asp.net mvc 模式 怎么设置一个查询页面 只有点击查询的时候才进行加载数据 打开页面不进行加载数据
0
悬赏园豆：10
[已解决问题]
解决于 2018-01-18 15:02
asp.net mvc 模式 怎么设置一个查询页面 只有点击查询的时候才进行加载数据 打开页面不进行加载数据。
问题补充：
View Code
View Code
可能就这么说还是有点笼统，还是贴下代码吧，改哪里请指出，谢谢。
1.cshtml
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script src="~/Scripts/jquery-1.10.2.js"></script> 5 </head> 6 <body> 7 <div class="panel-body" style="padding-bottom:0px;"> 8 <div class="panel panel-default"> 9 <div class="panel-heading">查询条件</div> 10 <div class="panel-body"> 11 <form id="formSearch" class="form-horizontal"> 12 <div class="form-group" style="margin-top:15px"> 13 <label class="control-label col-sm-1" for="txt_search_documentname">文档名称</label> 14 <div class="col-sm-3"> 15 <input type="text" class="form-control" id="txt_search_documentname" name="txt_search_documentname"> 16 </div> 17 <label class="control-label col-sm-1" for="txt_search_Des">描述</label> 18 <div class="col-sm-3"> 19 <input type="text" class="form-control" id="txt_search_Des"> 20 </div> 21 <label class="control-label col-sm-1" for="txt_search_KksName">KKS名称</label> 22 <div class="col-sm-3"> 23 <input type="text" class="form-control" id="txt_search_KksName" /> 24 </div> 25 </div> 26 <div class="col-sm-12" style="text-align:right;"> 27 <button type="button" style="margin-right:auto" id="btn_query" class="btn btn-primary" onclick="SearchData()">查询</button> 28 </div> 29 </form> 30 </div> 31 </div> 32 33 <div id="toolbar" class="btn-group"> 34 <button id="btn_add" type="button" class="btn btn-default"> 35 <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增 36 </button> 37 <button id="btn_edit" type="button" class="btn btn-default"> 38 <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改 39 </button> 40 <button id="btn_delete" type="button" class="btn btn-default"> 41 <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除 42 </button> 43 </div> 44 <table id="tb_documents"></table> 45 </div> 46 <script type="text/javascript"> 47 $(document).ready(function () { 48 $('#tb_documents').bootstrapTable({ 49 url: '/Document/GetDocument', //请求后台的URL（*） 50 method: 'get', //请求方式（*） 51 //method: 'post', 52 //contentType: "application/X-www-form-urlencoded", 53 toolbar: '#toolbar', //工具按钮用哪个容器 54 striped: true, //是否显示行间隔色 55 cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*） 56 pagination: true, //是否显示分页（*） 57 sortable: true, //是否启用排序 58 sortOrder: "asc", //排序方式 59 queryParams: function (params) { 60 return { 61 //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的 62 limit: params.limit, //页面大小 63 offset: params.offset, //页码 64 documentname: $("#txt_search_documentname").val(), 65 Des: $("#txt_search_Des").val(), 66 KksName:$("#txt_search_KksName").val() 67 }; 68 },//传递参数（*） 69 sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*） 70 pageNumber: 1, //初始化加载第一页，默认第一页 71 pageSize: 10, //每页的记录行数（*） 72 pageList: [10, 25, 50, 100], //可供选择的每页的行数（*） 73 search: false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大 74 strictSearch: true, 75 showColumns: true, //是否显示所有的列 76 showRefresh: false, //是否显示刷新按钮 77 minimumCountColumns: 2, //最少允许的列数 78 clickToSelect: true, //是否启用点击选中行 79 height: 530, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度 80 uniqueId: "ID", //每一行的唯一标识，一般为主键列 81 showToggle: true, //是否显示详细视图和列表视图的切换按钮 82 cardView: false, //是否显示详细视图 83 detailView: true, //是否显示父子表 84 columns: [{ 85 checkbox: true 86 }, { 87 field: 'Name', 88 title: '文档名称', 89 formatter: function (value, row, index) 90 { 91 return '<a href="#" onclick="fun1()">' + value + '</a> ' 92 } 93 }, { 94 field: 'Description', 95 title: '描述' 96 }, { 97 field: 'VersionNo', 98 title:'版本号' 99 }, { 100 field: 'RevisionNo', 101 title:'修订号' 102 }], 103 //注册加载子表的事件。注意下这里的三个参数！ 104 onExpandRow: function (index, row, $detail) { 105 var parentid = row.Id; 106 var cur_table = $detail.html('<table></table>').find('table'); 107 $(cur_table).bootstrapTable({ 108 url: '/Document/GetDocumentFiles', 109 method: 'get', 110 queryParams: { strDocumentId: parentid }, 111 ajaxOptions: { strDocumentId: parentid }, 112 clickToSelect: true, 113 detailView: false, 114 uniqueId: "Id", 115 columns: [{ 116 field: 'Name', 117 title: '文件名称' 118 }, { 119 field: 'Description', 120 title: '文件描述' 121 }, { 122 field: 'VersionNo', 123 title: '文件版本' 124 }, { 125 field: 'RevisionNo', 126 title: '修订版本' 127 }, { 128 field: 'Extension', 129 title: '后缀名' 130 },], 131 132 }); 133 } 134 }); 135 }); 136 //查询事件 137 function SearchData() { 138 $('#tb_documents').bootstrapTable('refresh', { pageNumber: 1 }); 139 } 140 function fun1() 141 { 142 window.open('https://www.baidu.com', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no'); 143 } 144 145 </script> 146 </body> 147 </html>
2.controller
1 using MVC项目研究7.Models; 2 using System; 3 using System.Collections.Generic; 4 using System.Data; 5 using System.Data.SqlClient; 6 using System.Linq; 7 using System.Web; 8 using System.Web.Mvc; 9 using Dapper; 10 11 namespace MVC项目研究7.Controllers 12 { 13 public class DocumentController : Controller 14 { 15 const string _connectionString = "data source=DESKTOP-0Q78TLO;initial catalog=IPS_WZGD;persist security info=True;user id=sa;password=chenwin68538420;MultipleActiveResultSets=True"; 16 // GET: Document 17 public ActionResult Index() 18 { 19 return View(); 20 } 21 public JsonResult GetDocument(int limit, int offset, string documentname, string Des, string KksName) 22 { 23 using (IDbConnection dbConnection = new SqlConnection(_connectionString)) 24 { 25 dbConnection.Open(); 26 var sql = "select Documents.Id,Documents.Name,Documents.Description,Documents.VersionNo," + 27 "Documents.RevisionNo from Documents" + 28 " left join DocumentFiles on Documents.Id=DocumentFiles.DocumentId" + 29 " left join KksCodeDocumentFiles on DocumentFiles.Id=KksCodeDocumentFiles.DocumentFile_Id" + 30 " left join KksCodes on KksCodeDocumentFiles.KksCode_Id=KksCodes.Id" + 31 " where 1=1"; 32 33 var dynamicParams = new DynamicParameters(); 34 if (!string.IsNullOrEmpty(documentname)) 35 { 36 sql += " and Documents.Name like @docname"; 37 dynamicParams.Add("docname", "%"+documentname+"%"); 38 } 39 if (!string.IsNullOrEmpty(Des)) 40 { 41 sql += " and Documents.Description like @des"; 42 dynamicParams.Add("des", "%" + Des + "%"); 43 } 44 if (!string.IsNullOrEmpty(KksName)) 45 { 46 sql += " and KksCodes.Name like @KksName"; 47 dynamicParams.Add("KksName", "%" + KksName + "%"); 48 } 49 sql += " group by Documents.Id,Documents.Name,Documents.Description,Documents.VersionNo," + 50 "Documents.RevisionNo"; 51 var dc = dbConnection.Query<Documents>(sql,dynamicParams); 52 dbConnection.Close(); 53 var total = dc.ToList().Count; 54 var rows = dc.ToList().Skip(offset).Take(limit).ToList(); 55 return Json(new { total = total, rows = rows },JsonRequestBehavior.AllowGet); 56 } 57 } 58 [HttpPost] 59 public ActionResult GetDocumentFiles(string strDocumentId) 60 { 61 using (IDbConnection dbConnection = new SqlConnection(_connectionString)) 62 { 63 dbConnection.Open(); 64 var sql = "select DocumentFiles.Id,DocumentFiles.Name,DocumentFiles.Description,DocumentFiles.VersionNo," + 65 "DocumentFiles.RevisionNo,DocumentFiles.Extension from DocumentFiles" + 66 " where 1=1"; 67 var dynamicParams = new DynamicParameters(); 68 if (!string.IsNullOrEmpty(strDocumentId)) 69 { 70 sql += " and DocumentFiles.DocumentId = @docid"; 71 dynamicParams.Add("docid", strDocumentId); 72 } 73 var dcf = dbConnection.Query<DocumentFiles>(sql, dynamicParams); 74 dbConnection.Close(); 75 return Json(dcf.ToList(),JsonRequestBehavior.AllowGet); 76 } 77 } 78 } 79 }
现在就是初始化页面没按查询，查询结果就出来了。
最佳答案
0
页面加载的时候返回空View，不要传model。
查询按钮事件：
查询数据，渲染，append 到页面。
收获园豆：10
其他回答(2)
0
通过JS异步加载
0
怎么解决的，我也需要
