Learning ASP. net mvc (10) -- sorting, asp. netmvc

Learning ASP. net mvc (10) -- sorting, asp. netmvc
1. sort books by price

Next we will use a simple example to learn how to sort books by price.

First, we add a switch statement segment in the SearchIndex method in the Controllers \ BookController. cs file to sort the book information by price. The code is shown in bold as follows:

Public ActionResult SearchIndex (string Category, string searchString, string sortBy) {// type option 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);} // sort implementation codeSwitch (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 ));}}

The above Code uses the OrderBy and OrderByDescending methods of Entity Framework to sort books in ascending or descending order by price.

Front-End Interface code

@ Model IEnumerable <MvcApplication1.Models. book >@{ ViewBag. title = "book query" ;}< h2> book query 
Next, debug in Visual Studio-> start execution (do not Debug) --> start the application, and then modify the URL data in the address bar of the browser to perform sorting test, the URL format is book/SearchIndex? Category = & SearchString = & sortBy = price_lowest and book/SearchIndex? Category = & SearchString = & sortBy = price_highest. The book information should be displayed as the lowest price in the list header and the highest price in the list header. For example, 1, Figure 2.
Figure 1Sort prices from low to high
 Figure 2 price sorting from high to low
2. Add sorting options on the book query page.
The sorting function is used for users. Of course, you cannot manually modify the URL address as we did in the preceding test. Therefore, you cannot use the preceding method. We need to add sorting options on the book query page, allowing users to sort by their own sorting method. You need to add a drop-down list and a dictionary that fills in the value and text of the drop-down list on the book query page.
First, we need to modify the SearchIndex method in the BookController class. Modify the \ Controllers \ BookController. cs file and add the sorting option in the SearchIndex method. See the following code in bold:
Public ActionResult SearchIndex (string Category, string searchString, string sortBy) {// type option 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 );// Sorting option var orderbyLst = new Dictionary<String, string>{"Price from low to low", "price_lowest" },{ "price from high to low", "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 ));}}
Next, we need to add a drop-down list control in the book query interface to display the sorting method, so that you can easily select. After the code for filtering product information by category in the Views \ Book \ SearchIndex. cshtml file, add the following code in bold:
 
@ Model IEnumerable <MvcApplication1.Models. book >@{ ViewBag. title = "book query" ;}< h2> book query Sort: @ Html. DropDownList ("sortBy", "unordered ")<Input type = "submit" value = "query"/> </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> </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>
The sorting option drop-down list control uses the sortBy attribute of the View package to generate the drop-down option data in the sorting option drop-down list control. The displayed Text of the drop-down list control is specified by the Value, the data value in the drop-down list control is specified by the Key value.
Third, debug in Visual Studio-> start execution (do not Debug) --> start the application, and then click the book query link. After the category filter drop-down list, we will see a drop-down list for sorting by price. 3, 4.
Figure 3Sort prices from low to high
 Figure 4:Price sorting from high to low