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

最新推荐文章于 2019-08-22 08:38:34 发布

huanghongfei1

最新推荐文章于 2019-08-22 08:38:34 发布

阅读量2.4k

点赞数 1

本文链接：https://blog.csdn.net/huanghongfei1/article/details/54893470

版权

使用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 ?? 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()));
      }

huanghongfei1

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
MVC无刷新查询，PagedList分页控件使用，导出Excel

使用MVC开发也有一段时间了，总结下无刷新部分视图的使用、PagedList分页控件的使用。@using PagedList@model StaticPagedListT>style type="text/css"> .tab-title { background-color: #efefef; width: 10%; }
复制链接

扫一扫