zoukankan      html  css  js  c++  java
  • MVC无刷新查询,PagedList分页控件使用,导出Excel

    使用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,
                cursor "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="100%;text-align:center">每页 @Model.PageSize 条记录,共 @Model.PageCount 页,当前第 @Model.PageNumber 页,合计 @Model.TotalItemCount 条记录</div>
        <div style="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()));
          }

  • 相关阅读:
    [GO]使用bufio的文件读取方式
    php开发工程师面必问题
    一位资深php程序员在北京的面试30个题目
    GIT 分支管理:创建与合并分支、解决合并冲突
    linux下挂在u盘,移动硬盘的方法,转移服务器资料的时候,使用移动硬盘什么最方便了
    php后台对接ios,安卓,API接口设计和实践完全攻略,涨薪必备技能
    navicat 官方使用手册,中文版,快捷键大全
    Memcached之缓存雪崩,缓存穿透,缓存预热,缓存算法
    Memcache 笔记(2)
    Memcache笔记(1)
  • 原文地址:https://www.cnblogs.com/tanpeng/p/6293879.html
Copyright © 2011-2022 走看看