c# - net - Mvc Asp Clasificación de elementos

paginacion mvc razor

Question

He usado PagedList.MVC para la paginación en mi aplicación. Esto está funcionando bien. La paginación funciona bien y también la lista desplegable OrderBy está funcionando bien. Cuando selecciono el valor de la lista desplegable, se obtiene el resultado ordenado deseado. Quiero decir, si selecciono AZ, ordena bien los elementos en orden ascendente, pero cuando hago clic en la segunda página o en la página siguiente, no ordena ningún elemento y la URL se vuelve así.

http: // localhost: 41213 / Home / Products? page = 2 & pageSize = 6

Y también ¿cómo puedo hacer que pageSize = 6 sea dinámico? Quiero que aparezca en la lista desplegable como {5,10,15,20} y cuando el usuario selecciona un valor, debe mostrar los números seleccionados del elemento.

Controlador

    [HttpGet]
    public ActionResult Products(int? OrderBy, int page=1, int pageSize=6)
    {
        private Shopping db = new Shopping();
        switch (OrderBy)
        {
            case 1:
                List<Product> listProductsasc = db.Products.OrderBy(p => p.Name).ToList();
                PagedList<Product> modelasc = new PagedList<Product>(listProductsasc, page, pageSize);
                return View(modelasc);
            case 2:
                List<Product> listProductsdesc = db.Products.OrderByDescending(p => p.Name).ToList();
                PagedList<Product> modeldesc = new PagedList<Product>(listProductsdesc, page, pageSize);
                return View(modeldesc);
            default:
                List<Product> listProducts = db.Products.ToList();
                PagedList<Product> modeldefault = new PagedList<Product>(listProducts, page, pageSize);
                return View(modeldefault);
        }
    }

Ver

@model PagedList.IPagedList<FypStore.Models.Product>
@using PagedList.Mvc
<div class="row">
        <div class="col-sm-6">
            @using (Html.BeginForm("Products", "Home", FormMethod.Get, new { id = "Form1" }))
            {
                <div class="col-sm-8">
                    Sort by:
                    @Html.DropDownList("OrderBy", new List<SelectListItem>

                     {
                        new SelectListItem{ Text="A-Z", Value = "1" },
                        new SelectListItem{ Text="Z-A", Value = "2" }
                     }, "-- Order By --")

                </div>
                <div class="col-sm-4">
                    <div class="form-group">
                        <div class="col-md-offset-2 col-md-10">
                            <input type="submit" class="btn btn-default" value="Filter" />
                        </div>
                    </div>
                </div>
            }
        </div>
</div>
<br />

@Html.PagedListPager(Model, page => Url.Action("Products", new { page, pageSize = Model.PageSize }))
Showing @Model.FirstItemOnPage to @Model.LastItemOnPage of @Model.TotalItemCount Products

Answer 1

Necesita modificar los parámetros de ruta del método PagedListPager() para incluir el valor del orden de clasificación, por ejemplo

@Html.PagedListPager(Model, page => Url.Action("Products", new { OrderBy = ViewBag.SortOrder, page, pageSize = Model.PageSize }))

y luego en el método, incluir

ViewBag.SortOrder = OrderBy;

antes de devolver la vista Sin embargo, un mejor enfoque es usar un modelo de vista que contenga las propiedades utilizadas por la vista que resolverá otros problemas con su código (por ejemplo, si selecciona la opción "ZA" y envía el formulario, cuando lo devuelve, la colección está ordenado, pero el menú desplegable muestra "-- Order By --" indica que no está ordenado. El modelo que ve debe estar

public class ProductsVM
{
  [Display(Name = "Sort by:")]
  public int? OrderBy { get; set; }
  public IEnumerable<SelectListItem> OrderList { get; set; }
  public int Page { get; set; }
  public int PageSize { get; set; }
  PagedList<Product> Products { get; set; }
}

y el método del controlador sería

[HttpGet]
public ActionResult Products(int? orderBy, int page=1, int pageSize=6)
{
  private Shopping db = new Shopping();
  IEnumerable<Product> products = db.Products; // not .ToList()
  if (orderBy == 1)
  {
    products = products.OrderBy(p => p.Name);
  }
  else if (orderBy == 2)
  {
    products = products.OrderByDescending(p => p.Name)
  }

  ProductsVM model = new ProductsVM
  {
    OrderBy = orderBy,
    OrderList = new List<SelectListItem>
    {
      new SelectListItem{ Text="A-Z", Value = "1" },
      new SelectListItem{ Text="Z-A", Value = "2" }
    },
    Page = page,
    PageSize = pageSize,
    Products = new PagedList<Product>(products, page, pageSize);
  };
  return View(model);
}

Y finalmente modifique su vista para usar el modelo de vista

@model ProductsVM
....
@using (Html.BeginForm("Products", "Home", FormMethod.Get))
{
  @Html.LabelFor(m => m.OrderBy)
  @Html.DropDownListForFor(m => m.OrderBy, Model.OrderList, "-- Order By --")
  <input type="submit" class="btn btn-default" value="Filter" />
}

@Html.PagedListPager(Model.Products, page => Url.Action("Products", new { orderBy = Model.OrderBy, page, pageSize = Model.PageSize }))
Showing @Model.Products.FirstItemOnPage to @Model.Products.LastItemOnPage of @Model.Products.TotalItemCount Products

Answer 2

Para corregir los enlaces de su página, debe pasar el parámetro OrderBy a la vista. La forma más fácil sería usar ViewBag. En tu controlador:

[HttpGet]
public ActionResult Products(int? OrderBy, int page = 1, int pageSize = 2)
{
    ViewBag.OrderBy = OrderBy;
    ...

En su opinión:

@Html.PagedListPager(Model, page => Url.Action("Products", new { page, pageSize = Model.PageSize, OrderBy = ViewBag.OrderBy }))

Otra forma sería usar un modelo de vista. Cree una clase llamada ProductsViewModel y rellene sus propiedades en su controlador de esta manera:

List<Product> modelasc = new PagedList<Product>(listProductsasc, page, pageSize);
var viewModel = ProductsViewModel();
viewModel.Products = modelasc;
viewModel.OrderBy = OrderBy;
return View(viewModel);

Y utilícelos dentro de la vista:

@model FypStore.Models.ProductsViewModel
...
@Html.PagedListPager(Model, page => Url.Action("Products", new { page, pageSize = Model.Products.PageSize, OrderBy = Model.OrderBy }))

Y también ¿cómo puedo hacer que pageSize = 6 sea dinámico?

Lo haces de la misma manera que con tu parámetro OrderBy : haz una lista desplegable con el nombre pageSize :

<div class="col-sm-8">
    Page size:
    @Html.DropDownList("pageSize", new List<SelectListItem>

            {
            new SelectListItem{ Text="2", Value = "2" },
            new SelectListItem{ Text="3", Value = "3" }
            }, "-- Page Size --")

</div>

Nota al .ToList(); : es posible que desee eliminar .ToList(); parte de su consulta en el controlador y moverlo a otro lugar. Porque ahora su código obtiene todos los datos de la base de datos y luego los ordena y extrae la cantidad necesaria de productos. Siempre debe realizar la lógica de clasificación y paginación en el lado de la base de datos y obtener solo los productos que desea mostrar en la página actual.