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

2018-06-22 06:09:04来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

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

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:MVC源码分析 - Action查找和过滤器的执行时机

下一篇:MVC源码分析 - ModelBinder绑定 / 自定义数据绑定