學習ASP.NET MVC(十)——排序

時間 2019-11-07

標籤學習 asp.net asp mvc 排序欄目 ASP 简体版

原文原文鏈接

1 按照價格對書籍進行排序

　　下面咱們經過一個簡單的例子學習如何對書籍信息按照價格進行排序。html

　　首先，咱們在Controllers\BookController.cs文件中的SearchIndex方法添加一個switch語句段，實現按照價格對書籍信息進行排序的功能。代碼以下列粗體顯示：前端

  public ActionResult SearchIndex(string Category, string searchString, string sortBy) { //類型選項
            var cateLst = new List<string>(); var cateQry = from d in db.Books orderby d.Category select d.Category; cateLst.AddRange(cateQry.Distinct()); ViewBag.category = new SelectList(cateLst); var books = from m in db.Books select m; if (!String.IsNullOrEmpty(searchString)) { books = books.Where(s => s.Name.Contains(searchString)); } //排序實現代碼
          switch (sortBy) { case "price_lowest": books = books.OrderBy(p => p.Price); break; case "price_highest": books = books.OrderByDescending(p => p.Price); break; default: break; } if (string.IsNullOrEmpty(Category)) return View(books); else { return View(books.Where(x => x.Category == Category)); } }

上面這段代碼分別使用Entity Framework的OrderBy和OrderByDescending方法，按照價格對書籍信息進行升序或降序排序。瀏覽器

前端界面代碼 學習

@model IEnumerable<MvcApplication1.Models.Book> @{ ViewBag.Title = "書籍查詢"; } <h2>書籍查詢</h2> @using (Html.BeginForm("SearchIndex","book",FormMethod.Get)){ <p>書籍種類： @Html.DropDownList("category", "All") 書籍名稱： @Html.TextBox("SearchString") <input type="submit" value="查詢" /> </p> } <table>
    <tr>
        <th> @Html.DisplayNameFor(model => model.Category) </th>
        <th> @Html.DisplayNameFor(model => model.Name) </th>
        <th> @Html.DisplayNameFor(model => model.Numberofcopies) </th>
        <th> @Html.DisplayNameFor(model => model.AuthorID) </th>
        <th> @Html.DisplayNameFor(model => model.Price) </th>
        <th> @Html.DisplayNameFor(model => model.PublishDate) </th>
        <th></th>
    </tr> @foreach (var item in Model) { <tr>
        <td> @Html.DisplayFor(modelItem => item.Category) </td>
        <td> @Html.DisplayFor(modelItem => item.Name) </td>
        <td> @Html.DisplayFor(modelItem => item.Numberofcopies) </td>
        <td> @Html.DisplayFor(modelItem => item.AuthorID) </td>
        <td> @Html.DisplayFor(modelItem => item.Price) </td>
        <td> @Html.DisplayFor(modelItem => item.PublishDate) </td>
        <td> @Html.ActionLink("Edit", "Edit", new { id=item.BookID }) | @Html.ActionLink("Details", "Details", new { id=item.BookID }) | @Html.ActionLink("Delete", "Delete", new { id=item.BookID }) </td>
    </tr> } </table>

其次，在Visual Studio中調試—>開始執行（不調試）-->啓動應用程序，而後在瀏覽器的地址欄中修改URL數據，進行排序測試，URL的格式分別爲book/SearchIndex?category=&SearchString=&sortBy=price_lowest和book/SearchIndex? category=&SearchString=&sortBy=price_highest。書籍信息應該分別顯示爲最低價格顯示在列表的頭部和最高價格顯示在列表的頭部。以下圖1，圖2。測試

圖1價格從低到高排序spa

圖2 價格從高到低排序調試

2 在書籍查詢頁面中增長排序選項

排序功能，是給用戶使用的，固然不能象上面咱們作測試同樣手工修改URL地址，因此咱們不能使用上面的方法。咱們須要在書籍查詢頁面中增長排序選項，容許用戶能夠按照他們本身選定的排序方式進行排序。咱們須要在書籍查詢頁面中添加一個下拉列表以及一個填充該下拉列表值和文本的字典。code

　　首先，咱們須要在BookController類中修改SearchIndex方法。修改\Controllers\BookController.cs文件，在SearchIndex方法中添加排序選項，見下列粗體顯示的代碼：orm

public ActionResult SearchIndex(string Category, string searchString, string sortBy)
        {

//類型選項
            var cateLst = new List<string>();
            var cateQry = from d in db.Books
                          orderby d.Category
                          select d.Category;

            cateLst.AddRange(cateQry.Distinct());
            ViewBag.category = new SelectList(cateLst);

//排序選項 var orderbyLst = new Dictionary<string, string> { { "價格從低到高", "price_lowest" }, { "價格從高到低", "price_highest" } }; ViewBag.sortBy = new SelectList(orderbyLst, "Value", "Key"); 

            var books = from m in db.Books
                        select m;
 

            if (!String.IsNullOrEmpty(searchString))
            {
                books = books.Where(s => s.Name.Contains(searchString));
            }

            // 排序功能實現
            switch (sortBy)
            {
                case "price_lowest":
                    books = books.OrderBy(p => p.Price);
                    break;
                case "price_highest":
                    books = books.OrderByDescending(p => p.Price);
                    break;
                default:
                    break;
            }

            if (string.IsNullOrEmpty(Category))
                return View(books);
            else
            {
                return View(books.Where(x => x.Category == Category));

            }

        }

　　其次，咱們須要在書籍查詢界面中添加一個下拉列表控件，用來顯示排序方式，方便用戶進行選擇。在Views\Book\SearchIndex.cshtml文件的按照分類來過濾產品信息的代碼後面，添加下列粗體顯示的代碼：htm

@model IEnumerable<MvcApplication1.Models.Book>

@{
    ViewBag.Title = "書籍查詢";
}

<h2>書籍查詢</h2> 

     @using (Html.BeginForm("SearchIndex","book",FormMethod.Get)){    

         <p>書籍種類： @Html.DropDownList("category", "All")  
           書籍名稱： @Html.TextBox("SearchString") 
    排序: @Html.DropDownList("sortBy", "不排序") <input type="submit" value="查詢" /> </p>        }

 <table>
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Category)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Numberofcopies)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.AuthorID)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Price)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.PublishDate)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Category)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Numberofcopies)

        </td>
        <td>
            @Html.DisplayFor(modelItem => item.AuthorID)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Price)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.PublishDate)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.BookID }) |
            @Html.ActionLink("Details", "Details", new { id=item.BookID }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.BookID })

        </td>
    </tr>
}
</table>