asp.net mvc多條件+分頁查詢解決方案

時間 2019-12-18

標籤 asp.net asp mvc 條件分頁查詢解決方案欄目 ASP 简体版

原文原文鏈接

開發環境vs2010javascript

css:bootstrapcss

js:jqueryhtml

bootstrap paginator前端

原先只是想作個mvc的分頁，可是通常的數據展示都須要檢索條件，並且是多個條件，因此就變成了MVC多條件+分頁查詢java

由於美工不是很好，因此用的是bootstrap前端框架，本身懶得寫前端的分頁控件，用的是bootstrap paginator分頁控件。jquery

方式：bootstrap

用Get方式提交檢索條件，分頁可用2種模式，無刷新或者帶刷新的跳轉。前端框架

Shared\_Layout.cshtml中添加css、js腳本引用：mvc

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>@ViewBag.Title</title>
 5     <link href="@Url.Content("~/Content/bootstrap/css/bootstrap.min.css")" rel="stylesheet" media="screen" />
 6     <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
 7     <script type="text/javascript" src="@Url.Content("~/Scripts/bootstrap.min.js")"></script>
 8 </head>
 9 
10 <body>
11 <div class="container">
12 @RenderBody()
13 </div>
14 </body>
15 </html>

_Layout.cshtml

查詢頁面（View）Index.cshtml：
引用分頁插件庫、生成分頁腳本，定義分頁跟數據展示的分部視圖：app

@Url.IncludePagerScript()
@Html.Pager("#pager", "#Content", "/Search/?page=", Model)

<div class="container">
    <div id="pager"></div>
    <div id="Content">
    @Html.Partial("IndexTable")
    </div>
</div>

封裝了下分頁腳本：

@Html.Pager(分頁控件, 數據展示, 分頁的查詢地址, 繼承PagerSearchBase的Model,是否刷新默認爲刷新的)

若要切換成分頁的無刷新模式，只須要寫成@Html.Pager("#pager", "#Content", "/Search/?page=", Model, false)

 1 public static MvcHtmlString Pager(this HtmlHelper htmlHelper, string filter, string content, string url, MvcPagerSearch.Models.PagerSearchBase pagerbase, bool refresh = true)
 2         {
 3             return Pager(htmlHelper, filter, content, url, pagerbase.CurrentPage, pagerbase.PageCount, pagerbase.Condition, refresh);
 4         }
 5 
 6         public static MvcHtmlString Pager(this HtmlHelper htmlHelper, string filter, string content, string url, int currentPage, int pageCount, string condition = "", bool refresh = true)
 7         {
 8             if(pageCount <= 1) return new MvcHtmlString(string.Empty);
 9             string requestUrl = string.Empty;
10             if(condition == null) condition = string.Empty;
11             if(condition.Length > 0 && condition.Substring(0, 1) != "&")
12             {
13                 condition = "&" + condition;
14             }
15             requestUrl = "\"" + url + "\" + page + \"" + condition + "&rand=\" + Math.random()";
16             return new MvcHtmlString("<script type=\"text/javascript\">$(function () {"
17                     + " $(\"" + filter + "\").bootstrapPaginator({ currentPage: " + currentPage + ","
18                     + " totalPages: " + pageCount + ","
19                     + " numberOfPages: 10,"
20                     + " size:\"large\","
21                     + " alignment: \"center\","
22                     + " useBootstrapTooltip: true,"
23                     + " tooltipTitles: function (type, page, current) {"
24                     + " switch (type) {"
25                     + " case \"first\":"
26                     + " return \"首頁 <i class='icon-fast-backward icon-white'></i>\";"
27                     + " case \"prev\":"
28                     + " return \"上一頁 <i class='icon-backward icon-white'></i>\";"
29                     + " case \"next\":"
30                     + " return \"下一頁 <i class='icon-forward icon-white'></i>\";"
31                     + " case \"last\":"
32                     + " return \"最末頁 <i class='icon-fast-forward icon-white'></i>\";"
33                     + " case \"page\":"
34                     + " return \"第 \" + page + \"頁 <i class='icon-file icon-white'></i>\";"
35                     + " }"
36                     + " },"
37                     + " onPageClicked: function (event, originalEvent, type, page) {"
38                     + (refresh ? " location.href = " + requestUrl + ";" : " $.post(" + requestUrl + ", function (data) { $(\"" + content + "\").html(data); });")
39                     + " }"
40                     + " });"
41                     + " });</script>");
42         }

Html.Pager的源代碼

定義查詢表單：

@using(Html.BeginForm("Index", "Search", FormMethod.Get, new { @class = "form-search form-inline" }))
{
    <div class="input-append">
    @Html.TextBoxFor(model => model.UserName, new { @class = "span2 search-query" })
    <button type="submit" class="btn">
        快速查詢</button>
    </div>
}

整個Index.cshtml與分部視圖IndexTable.cshtml的源代碼：

 1 @model MvcPagerSearch.Models.SearchModel
 2 
 3 @{
 4     ViewBag.Title = "Index";
 5 }
 6 @Url.IncludePagerScript()
 7 @Html.Pager("#pager", "#Content", "/Search/?page=", Model)
 8 
 9 <h2>查詢</h2>
10 @using(Html.BeginForm("Index", "Search", FormMethod.Get, new { @class = "form-search form-inline" }))
11 {
12     <div class="input-append">
13     @Html.TextBoxFor(model => model.UserName, new { @class = "span2 search-query" })
14     <button type="submit" class="btn">
15         快速查詢</button>
16     </div>
17 }
18 
19 <div class="container">
20     <div id="pager"></div>
21     <div id="Content">
22     @Html.Partial("IndexTable")
23     </div>
24 </div>

Index.cshtml

 1 @model MvcPagerSearch.Models.SearchModel
 2 <table class="table table-hover">
 3         <thead>
 4             <tr>
 5                 <th>
 6                     暱稱
 7                 </th>
 8                 <th>
 9                     性別
10                 </th>
11                 <th>
12                     年齡
13                 </th>
14             </tr>
15         </thead>
16         <tbody>
17             @foreach(var entity in Model.Members)
18             {
19                 <tr>
20                     <td>
21                         @entity.UserName
22                     </td>
23                     <td>
24                         @entity.Sex
25                     </td>
26                     <td>
27                         @entity.Age
28                     </td>
29                 </tr>
30             }
31         </tbody>
32     </table>

IndexTable.cshtml

控制器(Control)SearchController.cs：

Index：

 1 public ActionResult Index(int page = 1)
 2         {
 3             SearchModel conditionData = SearchModel.Create(Request, GetMembers());
 4             conditionData.Search(page);
 5 
 6             if(Request.IsAjaxRequest()) return PartialView("IndexTable", conditionData);
 7             return View("Index", conditionData);
 8         }

取得數據（測試數據）：

 1 // 獲取數據
 2         private List<Member> GetMembers()
 3         {
 4             List<Member> result = new List<Member>();
 5             for(int i = 0; i <= 100; i++)
 6             {
 7                 result.Add(new Member() { UserName = "A" + i, Age = i, Sex = i % 2 == 0 ? "男" : "女" });
 8             }
 9             return result;
10         }

測試數據

模型(Model)SearchModel.cs、Member.cs：
SearchModel繼承自PagerSearchBase

1 public class SearchModel : PagerSearchBase
2     {
3         public string UserName { get; set; }
4 
5         public IEnumerable<Member> Members { get; set; }
6     }

建立SearchModel對象的方法：

1 public static SearchModel Create(HttpRequestBase request, IEnumerable<Member> members)
2         {
3             SearchModel result = new SearchModel();
4             result.AddFields(request, "UserName");
5             result.Members = members;
6             return result;
7         }

protected void AddFields(HttpRequestBase request, params string[] fieldNames);

用於添加查詢條件的屬性名，併爲屬性設置值，這裏的屬性只能是string類型的

重載子類的SearchByPage函數

1 protected override void SearchByPage(int page)
2         {
3             // 過濾
4             Members = Members.Where(UserName, entity => entity.UserName.Contains(UserName));
5             // 分頁
6             Members = Pager(Members.OrderBy(entity => entity.UserName));
7         }

擴展了下IEnumerable<TSource>的Where函數，若遇到UserName爲空，則不進行條件過濾，且能鏈式調用

 1 public static IEnumerable<TSource> Where<TSource>(this IEnumerable<TSource> data, string condition, Func<TSource, bool> predicate)
 2         {
 3             if(string.IsNullOrEmpty(condition)) return data;
 4             return data.Where(predicate);
 5         }
 6 
 7         public static IEnumerable<TSource> Where<TSource>(this IEnumerable<TSource> data, string condition, Func<TSource, int, bool> predicate)
 8         {
 9             if(string.IsNullOrEmpty(condition)) return data;
10             return data.Where(predicate);
11         }

擴展Where函數

PagerSearchBase.cs基類

  1 public abstract class PagerSearchBase
  2     {
  3         /// <summary>
  4         /// 每頁行數，默認20，子類可調
  5         /// </summary>
  6         protected int pageSize = 20;
  7         private int pageCount = 0;
  8         private Hashtable hsCondition = new Hashtable();
  9 
 10         /// <summary>
 11         /// 總頁數
 12         /// </summary>
 13         public int PageCount { get { return pageCount; } set { pageCount = value; } }
 14 
 15         /// <summary>
 16         /// 當前頁
 17         /// </summary>
 18         public int CurrentPage { get; protected set; }
 19 
 20         /// <summary>
 21         /// 條件Url
 22         /// </summary>
 23         public string Condition { get; protected set; }
 24 
 25         /// <summary>
 26         /// 按頁查詢
 27         /// </summary>
 28         /// <param name="page"></param>
 29         protected abstract void SearchByPage(int page);
 30 
 31         /// <summary>
 32         /// 取得條件，可外部調用
 33         /// </summary>
 34         /// <returns></returns>
 35         public string GetCondition()
 36         {
 37             string result = string.Empty;
 38             int i = 0;
 39             foreach(object key in hsCondition.Keys)
 40             {
 41                 if(i++ > 0)
 42                     result += "&";
 43                 result += key.ToString() + "=" + HttpUtility.UrlEncode(hsCondition[key].ToString().Trim());
 44             }
 45             return result;
 46         }
 47 
 48         /// <summary>
 49         /// 按頁查詢，外部調用
 50         /// </summary>
 51         /// <param name="page"></param>
 52         public void Search(int page)
 53         {
 54             // 設置當前頁
 55             CurrentPage = page;
 56             // 取得反饋的條件Url
 57             Condition = GetCondition();
 58             SearchByPage(page);
 59         }
 60 
 61         /// <summary>
 62         /// 批量添加用於查詢條件的屬性名，併爲屬性設置值
 63         /// </summary>
 64         /// <param name="request"></param>
 65         /// <param name="fieldNames"></param>
 66         protected void AddFields(HttpRequestBase request, params string[] fieldNames)
 67         {
 68             for(int i = 0; i <= fieldNames.Length - 1; i++)
 69             {
 70                 string fieldName = fieldNames[i];
 71                 string value = WebUtil.GetSafeQueryString(request, fieldName).Trim();
 72                 // 設置屬性值
 73                 this.GetType().GetProperty(fieldName).SetValue(this, value, null);
 74                 // 添加反饋的條件Url
 75                 AddCondition(fieldName, value);
 76             }
 77         }
 78 
 79         /// <summary>
 80         /// 分頁
 81         /// </summary>
 82         /// <typeparam name="T"></typeparam>
 83         /// <param name="searchData"></param>
 84         /// <returns></returns>
 85         protected IEnumerable<T> Pager<T>(IEnumerable<T> searchData)
 86         {
 87             return PagerUtil.GetPageData(CurrentPage, pageSize, searchData, out pageCount);
 88         }
 89 
 90         /// <summary>
 91         /// 添加反饋的條件Url，內部方法
 92         /// </summary>
 93         /// <param name="name"></param>
 94         /// <param name="value"></param>
 95         private void AddCondition(string name, string value)
 96         {
 97             if(!string.IsNullOrEmpty(value))
 98                 hsCondition.Add(name, value);
 99         }
100     }

PagerSearchBase.cs

Member.cs

1 public class Member
2     {
3         public string UserName { get; set; }
4         public int Age { get; set; }
5         public string Sex { get; set; }
6     }

這樣就完成了多條件查詢+分頁的頁面。

若是要增長條件，就只要修改Model跟View就能夠了

如要增長個Age的條件：

修改Model:

增長屬性字段：public string Age { get; set; }

原result.AddFields(request, "UserName");改成result.AddFields(request, "UserName", "Age");

SearchByPage中增長過濾條件：

 1 protected override void SearchByPage(int page)
 2         {
 3             int age = 0;
 4             if(!Int32.TryParse(Age, out age)) Age = string.Empty;
 5             // 過濾
 6             Members = Members.Where(UserName, entity => entity.UserName.Contains(UserName))
 7                 .Where(Age, entity => entity.Age == age);
 8             // 分頁
 9             Members = Pager(Members.OrderBy(entity => entity.UserName));
10         }

完整的SearchModel.cs文件：

 1 public class SearchModel : PagerSearchBase
 2     {
 3         public string UserName { get; set; }
 4         public string Age { get; set; }
 5 
 6         public IEnumerable<Member> Members { get; set; }
 7 
 8         public static SearchModel Create(HttpRequestBase request, IEnumerable<Member> members)
 9         {
10             SearchModel result = new SearchModel();
11             result.AddFields(request, "UserName", "Age");
12             result.Members = members;
13             return result;
14         }
15 
16         protected override void SearchByPage(int page)
17         {
18             int age = 0;
19             if(!Int32.TryParse(Age, out age)) Age = string.Empty;
20             // 過濾
21             Members = Members.Where(UserName, entity => entity.UserName.Contains(UserName))
22                 .Where(Age, entity => entity.Age == age);
23             // 分頁
24             Members = Pager(Members.OrderBy(entity => entity.UserName));
25         }
26     }

SearchModel.cs

修改View:

在Index.cshtml查詢的表單中增長查詢條件:

@Html.TextBoxFor(model => model.Age, new { @class = "span2 search-query" })

完整的Index.cshtml文件：

 1 @model MvcPagerSearch.Models.SearchModel
 2 
 3 @{
 4     ViewBag.Title = "Index";
 5 }
 6 @Url.IncludePagerScript()
 7 @Html.Pager("#pager", "#Content", "/Search/?page=", Model)
 8 
 9 <h2>查詢</h2>
10 @using(Html.BeginForm("Index", "Search", FormMethod.Get, new { @class = "form-search form-inline" }))
11 {
12     <div class="input-append">
13     @Html.TextBoxFor(model => model.Age, new { @class = "span2 search-query" })
14     @Html.TextBoxFor(model => model.UserName, new { @class = "span2 search-query" })
15     <button type="submit" class="btn">
16         快速查詢</button>
17     </div>
18 }
19 
20 <div class="container">
21     <div id="pager"></div>
22     <div id="Content">
23     @Html.Partial("IndexTable")
24     </div>
25 </div>