Código inicial del contraldor:
public ViewResult Index() { var products = db.Products.Include(p => p.Categories).Include(p => p.Suppliers); return View(products.ToList()); }Código inicial de la vista:
<table> <tr> <th> ProductName </th> <th> Suppliers </th> <th> Categories </th> <th> UnitPrice </th> <th> UnitsInStock </th> <th> Discontinued </th> <th></th> </tr>Sort:
En este ejemplo agregaremos al controlador.
public ViewResult Index(string sortOrder) { ViewBag.NameSortParm = String.IsNullOrEmpty(sortOrder) ? "ProductName desc" : ""; ViewBag.UnitPriceSortParm = sortOrder == "UnitPrice" ? "UnitPrice desc" : "UnitPrice"; var products = db.Products.Include(p => p.Categories).Include(p => p.Suppliers); switch (sortOrder) { case "ProductName desc": products = products.OrderByDescending(s => s.ProductName); break; case "UnitPrice": products = products.OrderBy(s => s.UnitPrice); break; case "UnitPrice desc": products = products.OrderByDescending(s => s.UnitPrice); break; default: products = products.OrderBy(s => s.ProductName); break; } return View(products.ToList()); }En la vista cambiaremos los header por links los cuales enviaran el orden necesario:
<table> <tr> <th> @Html.ActionLink("Product Name", "Index", new { sortOrder = ViewBag.NameSortParm }) </th> <th> Suppliers </th> <th> Categories </th> <th> @Html.ActionLink("UnitPrice", "Index", new { sortOrder = ViewBag.UnitPriceSortParm }) </th> <th> UnitsInStock </th> <th> Discontinued </th> <th></th> </tr>
Resultado:
Filtros:
En este ejemplo agregaremos al controlador.
public ViewResult Index(string sortOrder, string searchString)
{ ViewBag.NameSortParm = String.IsNullOrEmpty(sortOrder) ? "ProductName desc" : ""; ViewBag.UnitPriceSortParm = sortOrder == "UnitPrice" ? "UnitPrice desc" : "UnitPrice";
ViewBag.SearchString = searchString;
var products = db.Products.Include(p => p.Categories).Include(p => p.Suppliers); if (!String.IsNullOrEmpty(searchString)) { products = products.Where(s => s.ProductName.ToUpper().Contains(searchString.ToUpper())); } switch (sortOrder) { case "ProductName desc": products = products.OrderByDescending(s => s.ProductName); break; case "UnitPrice": products = products.OrderBy(s => s.UnitPrice); break; case "UnitPrice desc": products = products.OrderByDescending(s => s.UnitPrice); break; default: products = products.OrderBy(s => s.ProductName); break; } return View(products.ToList()); }
En la vista agregaremos un textbox necesario para buscar los productos:
<p> @Html.ActionLink("Create New", "Create") @using (Html.BeginForm()) { <p> Product Name: @Html.TextBox("SearchString") <input type="submit" value="Search" /></p> } </p>
En la vista también debemos de cambiar los action link para conservar el valor del searchString.
@Html.ActionLink("Product Name", "Index", new { sortOrder = ViewBag.NameSortParm, SearchString = ViewBag.SearchString }) @Html.ActionLink("UnitPrice", "Index", new { sortOrder = ViewBag.UnitPriceSortParm, SearchString = ViewBag.SearchString })
Resultado:
Pagineo:
Antes que nada tenemos que instalar : PagedList NuGet Package.
Resultado:
- Menu Tools
- Library Package Manager
- Add Library Package Reference
- Clic en online en la parte izquierda
- Luego en buscar escriba PagedList
- Por ultimo instale el paquete.
Se agrega la libreria el siguiente using:
using PagedList;
Código del controlador:
public ViewResult Index(string sortOrder, string currentFilter, string searchString, int? page) { ViewBag.CurrentSort = sortOrder; ViewBag.NameSortParm = String.IsNullOrEmpty(sortOrder) ? "ProductName desc" : ""; ViewBag.UnitPriceSortParm = sortOrder == "UnitPrice" ? "UnitPrice desc" : "UnitPrice";
ViewBag.SearchString = searchString; if (Request.HttpMethod == "GET") { searchString = currentFilter; } else { page = 1; } ViewBag.CurrentFilter = searchString; var products = db.Products.Include(p => p.Categories).Include(p => p.Suppliers); if (!String.IsNullOrEmpty(searchString)) { products = products.Where(s => s.ProductName.ToUpper().Contains(searchString.ToUpper())); } switch (sortOrder) { case "ProductName desc": products = products.OrderByDescending(s => s.ProductName); break; case "UnitPrice": products = products.OrderBy(s => s.UnitPrice); break; case "UnitPrice desc": products = products.OrderByDescending(s => s.UnitPrice); break; default: products = products.OrderBy(s => s.ProductName); break; } int pageSize = 10; int pageIndex = (page ?? 1); return View(products.ToPagedList(pageIndex, pageSize)); }
Código de la vista:
Debemos de cambiar el model:
Agregar el siguiente código al final de la tabla:
Debemos de cambiar el model:
@model PagedList.IPagedList<Northwind.Models.Products>
Agregar el siguiente código al final de la tabla:
<div> Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) of @Model.PageCount @if (Model.HasPreviousPage) { @Html.ActionLink("<<", "Index", new { page = 1, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter, SearchString = ViewBag.SearchString }) @Html.Raw(" "); @Html.ActionLink("< Prev", "Index", new { page = Model.PageNumber - 1, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter, SearchString = ViewBag.SearchString }) } else { @:<< @Html.Raw(" "); @:< Prev } @if (Model.HasNextPage) { @Html.ActionLink("Next >", "Index", new { page = Model.PageNumber + 1, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter, SearchString = ViewBag.SearchString }) @Html.Raw(" "); @Html.ActionLink(">>", "Index", new { page = Model.PageCount, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter, SearchString = ViewBag.SearchString }) } else { @:Next > @Html.Raw(" ") @:>> } </div>
Resultado: