練習題 - ASP.NET MVC 資料列表顯示 + 分頁 + 查詢 + FormMethod.Post

這是一個蠻常見的功能，使用 ASP.NET MVC 開發，將某一個資料以列表方式顯示，並且加上分頁功能，另外還要有查詢功能，而希望顯示分頁的時候可以保留查詢的條件（也就是查詢結果也要能夠分頁顯示），因為有可能查詢的欄位會有相當多個，所以不希望是以 Get 的方式讓查詢條件以 QueryString 的方式傳遞到後端，而是使用 Post 的方式來做傳遞（因為這不是用在一般的前台頁面，而是常見於後台的操作頁面）。

其實這樣的功能也不是相當複雜，我在之前的資料分頁文章也曾經做過說明，例如以下這一篇：

ASP.NET MVC 資料分頁 MVCPaging 2.0 應用 Part.1：一般、表單(Form)

不過這一次會有不一樣的方式來實作，分頁套件會使用「PagedList.Mvc」，因為查詢條件可能會有相當多個的情況，所以會建立一個 ViewModel 來使用，藉由這樣的一個範例說明可以讓初學者能夠瞭解類似這樣的需求應該要如何處理。

 

---

開發環境：Visual Studio 2013 Update 3, LocalDB, ASP.NET MVC 5

 

首先在 VS2013 裡建立了一個 ASP.NET MVC 5 網站專案，加入使用 Entity Framework 6.1.1 以及 PagedList.Mvc，

建立 LocalDB，使用的範例資料庫是 Northwind，

使用 Entity Fremework 建立 Model，使用的建立方式為「來自資料庫的 Code First」，

 

接著 ViewModels 目錄，在目錄中建立了兩個等一下會使用到的 ViewModel 類別，一個是用來作為查詢欄位使用的 Model，另一個則是頁面顯示所使用的 Model，頁面顯示的 ViewModel 會包含分頁資料、查詢、分頁 Index 的資料，

ProductSearchModel.cs

ProductListViewModel.cs

 

接著建立 ProductController.cs

上面所看到的的程式內容，可以與一般大家所做的資料分頁方是有所不同，不過做法大同小異，例如要做為頁面裡的下拉選單資料，以往很多人都會直接使用 ViewBag，不過我不是很喜歡使用太多的 ViewBag，因為既然要將資料從 Controller 傳遞給後端，就應該直接使用 Model，而這邊有很多初學者會有個疑問，在 ASP.NET MVC 裡，一個頁面只能使用一個 Model 類別，而這個 Model 類別大多是直接使用 Entity Framework 所建立的其中一個 Model 類別，所以很多人就會卡在這邊，都會認為只能使用一個 Model 類別，所以其他的資料都用 ViewBag 傳遞給 View。

其實 Model 類別只是一個 class，功能就是裝載資料，從 Controller 到 View 或是 View 到 Controller，既然一個頁面只能使用一個 Model 類別，所以我們可以另外建立 ViewModel 類別，在這個 ViewModel 裡的成員就可以包含其他的類別，那麼我們就可以不受一個頁面只能使用一個 Model 類別的限制，有關 ViewModel 的說明與使用，請看我所寫的 ViewModel 幾篇文章，

ASP.NET MVC 的 ViewModel - 基礎篇

ASP.NET MVC - 為什麼不建議在 ViewModel 裡加入行為

ASP.NET MVC - ViewModel 參考文章與其他說明

 

接著再來建立頁面 Post 回到後端的處理，因為頁面有查詢功能，所以要依據 Model 裡的 SearchParameter 內的各種查詢條件是否有值然後增加查詢的判斷，

[HttpPost]

public ActionResult Index(ProductListViewModel model)

{

    var query = _db.Products.AsQueryable();

    if (!string.IsNullOrWhiteSpace(model.SearchParameter.ProductName))

    {

        query = query.Where(

            x => x.ProductName.Contains(model.SearchParameter.ProductName));

    }

    if (!string.IsNullOrWhiteSpace(model.SearchParameter.QuantityPerUnit))

    {

        query = query.Where(

            x => x.QuantityPerUnit.Contains(model.SearchParameter.QuantityPerUnit));

    }

    int supplierId;

    if (!string.IsNullOrWhiteSpace(model.SearchParameter.Supplier)

        &&

        int.TryParse(model.SearchParameter.Supplier, out supplierId))

    {

        query = query.Where(x => x.SupplierID == supplierId);

    }

    int categoryId;

    if (!string.IsNullOrWhiteSpace(model.SearchParameter.Category)

        &&

        int.TryParse(model.SearchParameter.Category, out categoryId))

    {

        query = query.Where(x => x.CategoryID == categoryId);

    }

    query = query.OrderBy(x => x.ProductID);

    int pageIndex = model.PageIndex < 1 ? 1 : model.PageIndex;

    var result = new ProductListViewModel

    {

        SearchParameter = model.SearchParameter,

        PageIndex = model.PageIndex < 1 ? 1 : model.PageIndex,

        CategoryItems = new SelectList(

            items: this.Categories,dataValueField: "CategoryID",

            dataTextField: "CategoryName",

            selectedValue: model.SearchParameter.Category),

        Suppliers = new SelectList(

            items: this.Suppliers,

            dataValueField: "SupplierID",

            dataTextField: "CompanyName",

            selectedValue: model.SearchParameter.Supplier),

        Products = query.ToPagedList(pageIndex, PageSize)

    };

    return View(result);

}

 

前端頁面，頁面所使用的 Model 是 ProductListViewModel 類別，

再來就是查詢介面的 Form，要特別注意紅線標示的地方，

而資料的列表顯示以及分頁的 Pager 就比較沒有什麼特殊的地方，所以就直接跳過，直接看如何處理 Post，

上面的程式在以前的文章也出現過，所以就直接拿過來使用，稍微修改一些地方，因為 Pager 的分頁都是直接使用 HyperLink，將分頁的 Index 使用 QueryString 的方式傳遞給後端以取得分頁資料，但是我們這邊是在瀏覽每個分頁的時候也必須保留查詢條件，查詢的地方所使用的是 FormMethod.Post，但是分頁連結則是 Get，其實可以設定 PagedList.Mvc 的 Pager 可以附加指定表單欄位的資料，但這只適用於表單欄位只有幾個的情況，一旦查詢的條件欄位有相當多個的時候，就不適合使用 Get 的方式將查詢條件值附加在 QueryString 傳遞給後端。

所以在前端就使用 jQuery 去改變 Pager 連結的行為，讓使用者按下分頁連結的時候是使用 Post 的方是將查詢條件值以及分頁 Index 傳遞給後端。

 

執行

加入查詢條件，

點選分頁，可以觀察到 Post 給後端的資料是有哪些，

 

完整的 ProductController.cs 內容

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using BlogDemo.ViewModels;

using BlogDemo.Models;

using PagedList;

namespace BlogDemo.Controllers

{

    public class ProductController : Controller

    {

        private readonly NorthwindDbContext _db = new NorthwindDbContext();

        private const int PageSize = 10;

        private IEnumerable<Category> Categories

        {

            get { return _db.Categories.OrderBy(x => x.CategoryID); }

        }

        private IEnumerable<Supplier> Suppliers

        {

            get { return _db.Suppliers.OrderBy(x => x.CompanyName); }

        }

        public ActionResult Index(int page = 1)

        {

            var query = _db.Products.OrderBy(x => x.ProductID);

            int pageIndex = page < 1 ? 1 : page;

            var model = new ProductListViewModel

            {

                SearchParameter = new ProductSearchModel(),

                PageIndex = pageIndex,

                CategoryItems = new SelectList(this.Categories, "CategoryID", "CategoryName"),

                Suppliers = new SelectList(this.Suppliers, "SupplierID", "CompanyName"),

                Products = query.ToPagedList(pageIndex, PageSize)

            };

            return View(model);

        }

        [HttpPost]

        public ActionResult Index(ProductListViewModel model)

        {

            var query = _db.Products.AsQueryable();

            if (!string.IsNullOrWhiteSpace(model.SearchParameter.ProductName))

            {

                query = query.Where(

                    x => x.ProductName.Contains(model.SearchParameter.ProductName));

            }

            if (!string.IsNullOrWhiteSpace(model.SearchParameter.QuantityPerUnit))

            {

                query = query.Where(

                    x => x.QuantityPerUnit.Contains(model.SearchParameter.QuantityPerUnit));

            }

            int supplierId;

            if (!string.IsNullOrWhiteSpace(model.SearchParameter.Supplier)

                &&

                int.TryParse(model.SearchParameter.Supplier, out supplierId))

            {

                query = query.Where(x => x.SupplierID == supplierId);

            }

            int categoryId;

            if (!string.IsNullOrWhiteSpace(model.SearchParameter.Category)

                &&

                int.TryParse(model.SearchParameter.Category, out categoryId))

            {

                query = query.Where(x => x.CategoryID == categoryId);

            }

            query = query.OrderBy(x => x.ProductID);

            int pageIndex = model.PageIndex < 1 ? 1 : model.PageIndex;

            var result = new ProductListViewModel

            {

                SearchParameter = model.SearchParameter,

                PageIndex = model.PageIndex < 1 ? 1 : model.PageIndex,

                CategoryItems = new SelectList(

                    items: this.Categories,dataValueField: "CategoryID",

                    dataTextField: "CategoryName",

                    selectedValue: model.SearchParameter.Category),

                Suppliers = new SelectList(

                    items: this.Suppliers,

                    dataValueField: "SupplierID",

                    dataTextField: "CompanyName",

                    selectedValue: model.SearchParameter.Supplier),

                Products = query.ToPagedList(pageIndex, PageSize)

            };

            return View(result);

        }

    }

}

完整的 ~/Views/Product/Index.cshtml 內容

@using PagedList.Mvc

@model BlogDemo.ViewModels.ProductListViewModel

@{

    ViewBag.Title = "Product - List";

}

<h2>Product - List</h2>

<hr />

<div class="well">

    @using (Html.BeginForm("Index", "Product", FormMethod.Post, new { @class = "form-horizontal", role = "form", id = "ProductList" }))

    {

        <div class="row">

            <div class="col-md-6 form-group">

                <label class="col-lg-3 control-label">Product Name:</label>

                <div class="col-lg-8">

                    @Html.EditorFor(x => x.SearchParameter.ProductName, new { htmlAttributes = new { @class = "form-control" } })

                </div>

            </div>

            <div class="col-md-6 form-group">

                <label class="col-lg-3 control-label">Quantity Per Unit:</label>

                <div class="col-lg-8">

                    @Html.EditorFor(x => x.SearchParameter.QuantityPerUnit, new { htmlAttributes = new { @class = "form-control" } })

                </div>

            </div>

        </div>

        <div class="row">

            <div class="col-md-6 form-group">

                <label class="col-lg-3 control-label">Supplier:</label>

                <div class="col-lg-8">

                    @Html.DropDownListFor(x => x.SearchParameter.Supplier, (SelectList)Model.Suppliers, "-- select item --", new { @class = "form-control" })

                </div>

            </div>

            <div class="col-md-6 form-group">

                <label class="col-lg-3 control-label">Category:</label>

                <div class="col-lg-8">

                    @Html.DropDownListFor(x => x.SearchParameter.Category, (SelectList)Model.CategoryItems, "-- select item --", new { @class = "form-control" })

                </div>

            </div>

        </div>

        <span class="clearfix"></span>

        <div class="row">

            <div class="col-md-offset-5">

                <input type="submit" class="btn btn-primary" value="Search">

                <span></span>

                <input type="reset" class="btn btn-default" value="Cancel">

            </div>

        </div>

    }

</div>

@Html.PagedListPager(Model.Products, page => Url.Action("Index", new { page }))

<table class="table">

    <tr>

        <th>

            Category Name

        </th>

        <th>

            Supplier Name

        </th>

        <th>

            @Html.DisplayNameFor(model => model.Products.FirstOrDefault().ProductName)

        </th>

        <th>

            @Html.DisplayNameFor(model => model.Products.FirstOrDefault().QuantityPerUnit)

        </th>

        <th>

            @Html.DisplayNameFor(model => model.Products.FirstOrDefault().UnitPrice)

        </th>

        <th>

            @Html.DisplayNameFor(model => model.Products.FirstOrDefault().UnitsInStock)

        </th>

        <th>

            @Html.DisplayNameFor(model => model.Products.FirstOrDefault().UnitsOnOrder)

        </th>

        <th>

            @Html.DisplayNameFor(model => model.Products.FirstOrDefault().ReorderLevel)

        </th>

        <th>

            @Html.DisplayNameFor(model => model.Products.FirstOrDefault().Discontinued)

        </th>

    </tr>

    @foreach (var item in Model.Products)

    {

        <tr>

            <td>

                @Html.DisplayFor(modelItem => item.Category.CategoryName)

            </td>

            <td>

                @Html.DisplayFor(modelItem => item.Supplier.CompanyName)

            </td>

            <td>

                @Html.DisplayFor(modelItem => item.ProductName)

            </td>

            <td>

                @Html.DisplayFor(modelItem => item.QuantityPerUnit)

            </td>

            <td>

                @Html.DisplayFor(modelItem => item.UnitPrice)

            </td>

            <td>

                @Html.DisplayFor(modelItem => item.UnitsInStock)

            </td>

            <td>

                @Html.DisplayFor(modelItem => item.UnitsOnOrder)

            </td>

            <td>

                @Html.DisplayFor(modelItem => item.ReorderLevel)

            </td>

            <td>

                @Html.DisplayFor(modelItem => item.Discontinued)

            </td>

        </tr>

    }

</table>

@section scripts

{

    <script type="text/javascript">

     $(function () {

         $('.pagination>li>a[href]').each(function (i, item) {

             var page = $(item).attr('href').replace('/Product?page=', '');

             $(item).attr('href', '#').click(function () { postPage(page); });

         });

     });

     function postPage(page) {

         var targetFormId = '#ProductList';

         if ($(targetFormId).size() > 0) {

             $('<input>')

                 .attr({ type: 'hidden', id: 'PageIndex', name: 'PageIndex', value: page })

                 .appendTo($(targetFormId));

             $(targetFormId).submit();

         }

     };

    </script>

}

 

---

這篇的內容只是再把以前的文章內容做點小修改，最主要的就是善用 ViewModel 的概念以及前端 jQuery 應用，有時候這些稍加變化的需求對於初學者會造成蠻多的疑惑，以致於會有一些「意外」的做法出現，並不是說不好，雖然這些意外的做法都可以將需求給完成，但是第一次使用意外做法所完成的，如果沒有再做檢討與改進的話，那麼往後開發的過程再遇到相同的需求就還是會繼續沿用，不好的做法就會永世流傳。

我在這一篇的做法就是比較適合的做法嗎？

其實不然，我相信還有更好的做法，這篇就當作開端，讓初學者能夠去思考如何做出更好與更適當的做法出來。

 

以上