首页 新闻 搜索 专区 学院

asp.net mvc 模式 怎么设置一个查询页面 只有点击查询的时候才进行加载数据 打开页面不进行加载数据

0
悬赏园豆:10 [已解决问题] 解决于 2018-01-18 15:02

asp.net mvc 模式 怎么设置一个查询页面 只有点击查询的时候才进行加载数据 打开页面不进行加载数据。

问题补充:

可能就这么说还是有点笼统,还是贴下代码吧,改哪里请指出,谢谢。

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>
View Code

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 }
View Code

现在就是初始化页面没按查询,查询结果就出来了。

星尘之泪的主页 星尘之泪 | 初学一级 | 园豆:49
提问于:2017-11-07 13:25
< >
分享
最佳答案
0

页面加载的时候返回空View,不要传model。

查询按钮事件:

查询数据,渲染,append 到页面。

收获园豆:10
肖恩部落 | 小虾三级 |园豆:575 | 2017-11-07 16:03
其他回答(2)
0

通过JS异步加载

写代码的相声演员 | 园豆:512 (小虾三级) | 2017-11-07 13:54
0

怎么解决的,我也需要

nicho1234 | 园豆:202 (菜鸟二级) | 2020-01-17 10:16
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册