使用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, cursorwidth: "10px", cursorborder: "0", cursorborderradius: "5px" }); $("#btnExport").click(function () { var queryStr = $("#ajax-form").serialize(); location.href = "/Hscode/Export?" + queryStr; }); </script> }