使用MVC开发也有一段时间了，总结下无刷新部分视图的使用、PagedList分页控件的使用。
@using PagedList @model StaticPagedList<T> <style type="text/css"> .tab-title { background-color: #efefef; width: 10%; } .btn-custom { padding: 6px 24px !important; color: #ffffff !important; border-radius: 5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; } </style> @{ } <section> <div class="container" style="margin-top:10px;padding-top:2em;padding-bottom:4em;"> @using (Ajax.BeginForm("Index", "Hscode", null, new AjaxOptions() { HttpMethod = "Post", InsertionMode = InsertionMode.Replace, UpdateTargetId = "div-result", OnComplete = "regJs" }, new { @class = "form-horizontal", role = "form", id = "ajax-form" })) { <div class="form-group"> <div class="col-sm-4"> <input type="text" class="form-control" id="hscode" name="hscode" placeholder="商品编码"> </div> <div class="col-sm-4"> <input type="text" class="form-control" id="gname" name="gname" placeholder="商品名称"> </div> <div class="col-sm-4"> <button type="submit" class="btn btn-custom btn-sm"> <span class="glyphicon glyphicon-search"></span> 查询 </button> <a href="javascript:void(0)" class="btn btn-custom btn-sm" id="btnExport"><span class="glyphicon glyphicon-download"></span> 导 出</a> </div> </div> } <div id="div-result"> @Html.Partial("_Index", Model) </div> </div> </section> @section scripts{ <script src="~/Scripts/jquery.nicescroll.min.js"></script> <script type="text/javascript"> function regJs() { $("#pager > .pagination-container > .pagination > li > a").click(function () { var pageUrl = $(this).attr("href"); var queryStr = $("#ajax-form").serialize(); $(this).attr("href", pageUrl + "&" + queryStr); }); } regJs(); $("html").niceScroll({ cursorcolor: "#ddd", cursoropacitymax: 1, touchbehavior: false, cursor "10px", cursorborder: "0", cursorborderradius: "5px" }); $("#btnExport").click(function () { var queryStr = $("#ajax-form").serialize(); location.href = "/Hscode/Export?" + queryStr; }); </script> }
- 使用@Html.Partial("_Index", Model)在主视图进行部分视图的渲染
- PagedList点击分页时如何提交查询条件？这个问题困扰了下我。
经网上查资料用如下方法解决：
$("#pager > .pagination-container > .pagination > li > a").click(function () {
var pageUrl = $(this).attr("href");
var queryStr = $("#ajax-form").serialize();
$(this).attr("href", pageUrl + "&" + queryStr);
});
即将表单内容通过URL查询字符串进行传递。
- 无刷新查询需要使用的js有：jquery.unobtrusive-ajax
- 无刷新查询后会导致js失效，使用OnComplete进行js方法的重新注册。
@using PagedList @using PagedList.Mvc @model StaticPagedList<Hscode> @if (Model != null && Model.Count > 0) { foreach (var hscode in Model) { <table class="table table-condensed"> <tbody> <tr> <td class="tab-title" style="border-top:1px dashed #000;">商品编码</td> <td colspan="5" style="border-top:1px dashed #000;color:#ff0000;">@hscode.Hscode1</td> </tr> <tr> <td class="tab-title">商品名称</td> <td colspan="5">@hscode.GName</td> </tr> <tr> <td class="tab-title">申报要素</td> <td colspan="5">@hscode.DeclarationElements</td> </tr> <tr> <td class="tab-title">法定第一单位</td> <td>@hscode.Unit1</td> <td class="tab-title">法定第二单位 </td> <td>@hscode.Unit2</td> <td colspan="2"></td> </tr> <tr> <td class="tab-title">最惠国进口税率</td> <td>@hscode.ZHGJKSL</td> <td class="tab-title">普通进口税率</td> <td>@hscode.PTJKSL</td> <td class="tab-title">暂定进口税率</td> <td>@hscode.ZDJKSL</td> </tr> <tr> <td class="tab-title">消费税率</td> <td>@hscode.XFSL</td> <td class="tab-title">出口关税率</td> <td>@hscode.CKGSL</td> <td class="tab-title">出口退税率</td> <td>@hscode.CKTSL</td> </tr> <tr> <td class="tab-title">增值税率</td> <td>@hscode.ZZSL</td> <td class="tab-title">海关监管条件</td> <td>@hscode.HGJGTJ</td> <td class="tab-title">检验检疫类别</td> <td>@hscode.JYJYLB</td> </tr> <tr> <td class="tab-title" style="border-bottom:1px dashed #000;">商品描述</td> <td colspan="5" style="border-bottom:1px dashed #000;">@hscode.ProductDesc</td> </tr> </tbody> </table> } <div style="100%;text-align:center">每页 @Model.PageSize 条记录，共 @Model.PageCount 页，当前第 @Model.PageNumber 页，合计 @Model.TotalItemCount 条记录</div> <div style="100%;text-align:center" id="pager"> @Html.PagedListPager(Model, page => Url.Action("Index", new { page }), PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(new AjaxOptions { HttpMethod = "Post", InsertionMode = InsertionMode.Replace, UpdateTargetId = "div-result", OnComplete = "regJs" })) </div> } else { <table class="table table-condensed"> <thead> <tr> <th class="text-center">不存在符合条件的数据!</th> </tr> </thead> </table> }
public class HscodeController : Controller { private BasicModels dbContext = new BasicModels(); public ActionResult Index(int? page) { return Query(page); } [HttpPost] public ActionResult Index(int? page, FormCollection form) { return Query(page, true); } private ActionResult Query(int? page, bool ajaxQuery = false) { int pageIndex = page ?? 1; int pageSize = Pager.PageSize; IQueryable<Hscode> list = Query(); int totalItemCount = list.Count(); list = list.OrderBy(o => o.Id).Skip((pageIndex - 1) * pageSize).Take(pageSize); StaticPagedList<Hscode> pageData = new StaticPagedList<Hscode>(list, pageIndex, pageSize, totalItemCount); if (ajaxQuery) { return PartialView("_Index", pageData); } else { return View("Index", pageData); } } private IQueryable<Hscode> Query() { IQueryable<Hscode> list = dbContext.Hscode; string hscode = Request["hscode"]; if (hscode != null && !string.IsNullOrEmpty(hscode.Trim())) { list = list.Where(w => w.Hscode1.Contains(hscode.Trim())); } string gname = Request["gname"]; if (gname != null && !string.IsNullOrEmpty(gname.Trim())) { list = list.Where(w => w.GName.Contains(gname.Trim())); } return list; } public void Export() { IQueryable<Hscode> list = Query(); DataTable dt = list.Convert(); string strFileName = string.Format("申报要素_{0}", DateTime.Now.ToString("yyyyMMddHHmmssffffff")); ExcelHelper.ExportXlsxByWeb(dt, strFileName); } }
- 分页控件在视图中的使用如下
- 使用Entity Framework时，因为要根据查询条件进行查询。
早先使用IEnumerate<Hscode> list = dbContext.Hscode;导致表中全部内容加载到内存中，查询很慢。
怎么没使用延迟加载了？最后经同事指正如下才能做到延迟加载：
IQueryable<Hscode> list = dbContext.Hscode;
- 查询条件过滤数据
if (Request["hscode"] != null && !string.IsNullOrEmpty(Request["hscode"].Trim()))
{
list = list.Where(w => w.Hscode1.Contains(Request["hscode"].Trim()));
}
这种写法是有问题的。不知道大家开发的时候有没有遇到过？
有条件查询的时候会报错LINQ to Entities 不识别方法 System.String get_Item(System.String)
修正方法如下：
string hscode = Request["hscode"];
if (hscode != null && !string.IsNullOrEmpty(hscode.Trim()))
{
list = list.Where(w => w.Hscode1.Contains(hscode.Trim()));
}