您的位置:首页 > 其它

MVC无刷新查询,PagedList分页控件使用,导出Excel

2017-02-06 15:28 633 查看
使用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> 导 出</<
4000
span style="color:#800000;">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 ?? 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()));

      }
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐