.NetMvc之支持搜索+排序的AjaxPager分页

一、准备工作

        在我的前一篇帖子.NetMvc之AjaxPager分页基础上继续，也可以观看我的B站视频

实验3--Ajax异步刷新技术--1

实验3--Ajax异步刷新技术--2

二、添加搜索功能

1. 修改AjaxPage Action

           /// <summary>
           /// 异步分页
           /// </summary>
           /// <param name="pageIndex">页码</param>
           /// <param name="pageSize">页容量</param>
           /// <param name="queryStr">搜索词</param>
           /// <returns></returns>
           public ActionResult AjaxPage(int pageIndex = 1, int pageSize = 5, string queryStr = "")
           {
   
               //后台数据校验
               pageIndex = pageIndex < 1 ? 1 : pageIndex;
               pageSize = pageSize < 1 ? 5 : pageSize;
   
               //定义数据集规则
               var products = dbContext.Products.Select(p => p);
   
               //搜索功能
               //暂时只支持产品名称的模糊查询
               products = products.Where(p => queryStr.Trim().Length > 0 ? p.name.Contains(queryStr.Trim()) : true);
   
               //排序功能
               //默认id降序
               products = products.OrderByDescending(p => p.id);
   
               //用PagedList封装分页数据
               PagedList<Product> pagedList = products.ToPagedList(pageIndex, pageSize);
               //设定pagedList的总记录数
               pagedList.TotalItemCount = products.Count();
   
               //如果用户发送的是Ajax异步请求
               if (Request.IsAjaxRequest())
               {
                   return PartialView("_AjaxPage", pagedList);
               }
   
               //使用强类型返回pagedList
               return View(pagedList);
           }

2. 修改AjaxPage页面，添加表单

   @using (Ajax.BeginForm("AjaxPage", "Product", new AjaxOptions
   {
       UpdateTargetId = "ajaxDiv",
       InsertionMode = InsertionMode.Replace
   }, new { @class = "form-inline", id = "searchForm" }))
   {
       @Html.TextBox("queryStr", "", new { placeholder = "关键词", @class = "form-control" })
       @Html.Raw("  ")
   
       @Html.TextBox("submit", "提交", new { type = "submit", @class = "btn btn-default" })
   }

3. 修改_AjaxPage页面，点击异步分页导航按钮时，附带上表单参数

   @Ajax.Pager(Model, 
       new PagerOptions { 
           PageIndexParameterName = "pageIndex", 
           ContainerTagName = "ul", 
           CssClass = "pagination", 
           CurrentPagerItemTemplate = "<li class=\"active\"><a href=\"#\">{0}</a></li>", 
           DisabledPagerItemTemplate = "<li class=\"disabled\"><a>{0}</a></li>", 
           PagerItemTemplate = "<li>{0}</li>" 
       }).AjaxOptions(a => a.SetUpdateTargetId("ajaxDiv").SetDataFormId("searchForm"))

三、添加排序功能

1. 只支持用户按 中文标题 排序等价于实体类标注了 DisplayName 标签的属性
2. 修改AjaxPage Action，使用反射的方式，获取实体类中标注了DisplayName标签属性的属性名称和DisplayName值，以字典结构保存，以弱类型传值方式返回前端页面

               //获取 实体属性字典集
               var properties = new Dictionary<string, string>();
               PropertyInfo[] propertyInfoArray = new Models.Product().GetType().GetProperties();
               foreach (var item in propertyInfoArray)
               {
                   if (item.CustomAttributes.Where(c => c.AttributeType.Name.Equals("DisplayNameAttribute")).Count() > 0)
                   {
                       string key = item.Name;
                       string value = item.CustomAttributes
                           .Where(c => c.AttributeType.Name.Equals("DisplayNameAttribute"))
                           .FirstOrDefault().ConstructorArguments[0].Value.ToString();
                       properties.Add(key, value);
                   }
               }
               //将 属性字典集 以弱类型方式向页面传值 
               ViewBag.properties = properties;

   注意：该段代码建议位于 用户Ajax异步请求 之后，意味着如果用户发送的是异步请求，则不需要将实体属性字典集返回前端

3. 修改AjaxPage页面，定义页面变量

       //属性字典集
       Dictionary<string, string> properties = ViewBag.properties;
       //下拉列表项
       List<SelectListItem> selectListItems = new List<SelectListItem>();
       selectListItems.Add(new SelectListItem { Text = "", Value = "" });
       foreach (var item in properties)
       {
           selectListItems.Add(new SelectListItem { Text = item.Value, Value = item.Key });
       }

   代码位置

4. 修改AjaxPage页面的表单，添加排序项的下拉列表和升降序的单选框

   @Html.Raw("  ")
   @Html.Label("排序关键字：")
   @Html.DropDownList("sort", selectListItems, new { @class = "form-control" })
   
   @Html.Raw("  ")
   @Html.Label("升降序：")
   @Html.RadioButton("order", "desc", new { id = "desc_id" })
   @Html.Label("desc_id", "降序")
   @Html.RadioButton("order", "asc", new { id = "asc_id" })
   @Html.Label("asc_id", "升序")

   代码位置

5. 修改AjaxPage Action，接收排序项和升降序变量
6. 修改AjaxPage Action，添加排序功能

               //排序功能
               //默认id降序
               //降序判断条件
               bool isDesc = order.ToLower().Equals("desc");
               //否则按用户输入条件排序
               switch (sort)
               {
                   case "name":
                       products = isDesc ? products.OrderByDescending(p => p.name) : products.OrderBy(p => p.name);
                       break;
                   case "pDate":
                       products = isDesc ? products.OrderByDescending(p => p.pDate) : products.OrderBy(p => p.pDate);
                       break;
                   case "pWork":
                       products = isDesc ? products.OrderByDescending(p => p.pWork) : products.OrderBy(p => p.pWork);
                       break;
                   case "price":
                       products = isDesc ? products.OrderByDescending(p => p.price) : products.OrderBy(p => p.price);
                       break;
                   default:
                       products = products.OrderByDescending(p => p.id);
                       break;
               }

   代码位置