ASP.NET MVC4+BootStrap 实战(二)
上一篇文章我们讲述了页面初始加载数据的一些东西，本篇我们来讲一下查询按钮和分页按钮。在很久以前我写过一篇ASP.NET MVC4切近实战的文章，有关于分页的代码，本篇我们不采用微软的AJAX框架。
先看一下查询效果，在点击Get按钮之后，会进行AJAX请求。
js代码如下
jQuery(document).ready(function(){setRowBackColor();$("#btnsearch").click(function(){$("#selsamelist").empty();$("#seldifflist").empty();searchByCondition(1);});})functionsearchByCondition(pageIndex){$.ajax({url:"/Home/GetSearchResult?pam="+newDate().toTimeString(),type:"POST",datatype:"Html",data:{param:JSON.stringify({IsMarried:$("#ddlMarried").val(),StartDate:$("#txtdatestart").val(),EndDate:$("#txtdateend").val(),UserName:$.trim($("#txtusername").val()),PageIndex:pageIndex,PageSize:$("#hfdPageSize").val()})},beforeSend:function(){$("#divloding").show();},complete:function(){$("#divloding").hide();},success:function(data){$("#divresult").html(data);setRowBackColor();},error:function(){alert("查询失败!");}});}
在页面加载完成后，我们给Get按钮注册了一个click事件，请求action获取数据。在请求之前，我们展示一个正在获取数据的div，请求结束以后我们隐藏这个div。当查询成功完成以后，我们将服务端返回的页面加载到divresult。我们来看一下这个action。
[HttpPost]publicPartialViewResultGetSearchResult(){stringrequestJson=Request["param"];JObjectjObj=(JObject)JsonConvert.DeserializeObject(requestJson);stringisMarried=jObj.Value<string>("IsMarried");stringuserName=jObj.Value<string>("UserName");stringstrStartDate=jObj.Value<string>("StartDate");stringstrEndDate=jObj.Value<string>("EndDate");intpageIndex=jObj.Value<int>("PageIndex");intpageSize=jObj.Value<int>("PageSize");intstartPageIndex=jObj.Value<int>("StartPageIndex");DateTimestartDate=DateTime.MinValue;DateTimeendDate=DateTime.MinValue;DateTime.TryParse(strStartDate,outstartDate);DateTime.TryParse(strEndDate,outendDate);UserInfoRequestrequest=newUserInfoRequest(){IsMarried=isMarried=="-1"?string.Empty:isMarried,UserName=userName,StartDate=startDate==DateTime.MinValue?null:(DateTime?)startDate,EndDate=endDate==DateTime.MinValue?null:(DateTime?)endDate,PageIndex=pageIndex,PageSize=pageSize};DataResponse<UserDBEntity>dataResponse=GRLCBiz.GetInstance().GetUserInfoEntityList(request);UserInfoViewModeluserInfoViewModel=newUserInfoViewModel();userInfoViewModel.DataResponse=dataResponse;userInfoViewModel.DataResponse.PageSize=ConstValues.CONN_DefaultPageSize;userInfoViewModel.DataResponse.StartPageIndex=startPageIndex;returnPartialView("~/Views/Partial/UserInfoPartial.cshtml",userInfoViewModel);}
首先在action中，获取客户端传递过来的json格式的请求参数，我们利用Newtonsoft.Json.dll来解析客户端传递过来的json对象。然后构造request，最后调用GetUserInfoEntityList获取数据。在上节中我们在讲到DAL层获取数据的时候，有一个DBScriptManager类，这个类就是专门用来读取DBScriptXML工程下的xml文件中的sql脚本的。
publicclassDBScriptManager{publicstaticstringGetScript(TyperemotingClassType,stringkey){stringfolder=ConstValues.CON_DbScriptXmlFolder;stringxmlFile=Path.Combine(AppDomain.CurrentDomain.BaseDirectory,folder);xmlFile=Path.Combine(xmlFile,remotingClassType.FullName+".xml");stringxPathExpression="/Scripts/Script[@Key='"+key.Trim()+"']/text()";returnExecuteXPath(xmlFile,xPathExpression);}.......}
这个类其实就是根据web.config配置的xml文件的文件夹路径加上文件路径(class fullname+.xml)找到xml文件后，进行解析得到sql script。所以大家看到xml文件的命名是DAL层下面的类的fullName。
这样的定义便于一一对应，对于维护来说也比较方便。另外使用xml文件的优势在于它易于修改，如果脚本写在SP中或者代码中，就不是那么容易去修改。因为大多数情况下sql服务器是不允许乱动的，代码也是需要重新编译才能上线的。当然了，复杂的业务处理还是要放到SP中，因为SP内部的一些执行优化机制是其他方式所不具备的。
OK,查询讲完了，我们看一下分页，首先我在webConfig中定义了一个节点，用于调整显示页码的数量。
OK，我们定义的值为6。看一下分页partial view的代码
@usingBruce.GRLC.Model.Response;@usingBruce.GRLC.Utility;@usingBruce.GRLC.Model.Entity;@modelDataResponse<UserDBEntity><ulclass="paginationpagination-lg">@if(Model!=null){@Html.HiddenFor(m=>m.PageSize,new{id="hfdPageSize"})<li><ahref="#">«</a></li>if(Model.StartPageIndex>ConstValues.CONN_PagerDisplayCount){<li><ahref="#"id="linkPaginationprev"onclick="linkPaginationClick(@Model.StartPageIndex,@Model.PageSize,@Model.TotalCount,0)">expand</a></li>}for(inti=Model.StartPageIndex;i<=Model.TotalPages;i++){<liid="li_@i"><ahref="#"id="link_@i"onclick="searchByCondition(@i,@Model.StartPageIndex)">@i</a></li>if(i>0&&i%ConstValues.CONN_PagerDisplayCount==0){break;}}if(Model.StartPageIndex<Model.TotalPages-ConstValues.CONN_PagerDisplayCount){<li><ahref="#"id="linkPaginationnext"onclick="linkPaginationClick(@Model.StartPageIndex,@Model.PageSize,@Model.TotalCount,1)">expand</a></li>}<li><ahref="#">»</a></li>}</ul>
还是使用BootStrap提供的样式，目前只有两页的数据，其实上面的这段代码是想实现如果配置的页码数是6，当我在1-6页时，显示展示下一批页码的链接，当我在7-12页时，我就显示前一批和下一批的链接。
现在的页码有点少，稍等，我给数据库插入一批数据。
DECLARE@IndexINT=1WHILE(@Index<=100)BEGININSERTINTOdbo.[User](UseNo,pwd,IsAdmin)SELECT'Bruce'+CAST(@IndexASCHAR(3)),pwd,'0'FROMdbo.[User]WITH(NOLOCK)WHEREUseNo='lilei'SET@Index=@Index+1END
插入完成，我们看一下效果
我们看到expand按钮出来了，我点击它，应该出来7-12页。
ok，很好，因为目前只有12页的数据，所以我们还无法看到12页以后的expand链接，不要紧，我们再插入一批数据，刷新，效果如下
看到了吧，前后都有一个expand链接。OK，页面代码实现的话，比较简单，大家仔细看就明白了。接下来我们看一下这个页码expand的js方法。
functionlinkPaginationClick(pageindex,pagesize,totalcount,type){varurlParam=pageindex+"_"+pagesize+"_"+totalcount+"_"+type;$.ajax({url:"/Home/GetNewPaginationView/"+urlParam+"?pam="+newDate().toTimeString(),type:"GET",datatype:"Html",success:function(data){$("#divpagination").html(data);}});}
将pageIndex，pagesize,totalcount和type(标示是向前expand，还是向后expand)传递到服务端，在服务端计算好之后返回一个partial页码给客户端。
好了，我们看一下action的代码。
[HttpGet]publicPartialViewResultGetNewPaginationView(stringid){string[]paramArray=id.Split(newchar[]{'_'},StringSplitOptions.RemoveEmptyEntries);DataResponse<UserDBEntity>dataResponse=newDataResponse<UserDBEntity>();dataResponse.TotalCount=int.Parse(paramArray[2]);dataResponse.PageSize=int.Parse(paramArray[1]);stringtype=paramArray[3];if(type=="0"){dataResponse.StartPageIndex=int.Parse(paramArray[0])-ConstValues.CONN_PagerDisplayCount;}else{dataResponse.StartPageIndex=int.Parse(paramArray[0])+ConstValues.CONN_PagerDisplayCount;}returnPartialView("~/Views/Partial/PaginationPartial.cshtml",dataResponse);}
当我们判断是向前expand的时候，我们就把起始页码减去配置的需要显示的页数。反之，则加上。在这里，其实可以在客户端实现这个东西，在服务端实现是一种浪费，稍后我会将其改成客户端实现。
OK，最后我们看一下点击页码的ajax请求。
functionsearchByCondition(pageIndex,startPageIndex){$.ajax({url:"/Home/GetSearchResult?pam="+newDate().toTimeString(),type:"POST",datatype:"Html",data:{param:JSON.stringify({IsMarried:$("#ddlMarried").val(),StartDate:$("#txtdatestart").val(),EndDate:$("#txtdateend").val(),UserName:$.trim($("#txtusername").val()),PageIndex:pageIndex,PageSize:$("#hfdPageSize").val(),StartPageIndex:startPageIndex})},beforeSend:function(){$("#divloding").show();},complete:function(){$("#divloding").hide();},success:function(data){$("#divresult").html(data);$("#li_"+pageIndex).addClass("active");setRowBackColor();},error:function(){alert("查询失败!");}});}
将页码传进来就行了，和查询调用同一个action。有时候用户想知道我在哪一页，我们就需要给链接加上样式。
$("#li_"+pageIndex).addClass("active");
给当前的页码加上蓝色背景。
OK了，我们看见第10页的背景变成蓝色了。最后我们看一下输入查询条件查询，就按照出生日期查询吧
日期选择使用的是Html5的新标签<Input type="date">。
OK，本节到此结束，下节我们来讲Compare功能。
声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。
