使用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>
}
主视图
- 使用@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="width:100%;text-align:center">每页 @Model.PageSize 条记录，共 @Model.PageCount 页，当前第 @Model.PageNumber 页，合计 @Model.TotalItemCount 条记录</div>
<div style="width: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 ?? ;
int pageSize = Pager.PageSize; IQueryable<Hscode> list = Query(); int totalItemCount = list.Count();
list = list.OrderBy(o => o.Id).Skip((pageIndex - ) * 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()));
}