ASP.NET MVC 4 DropDownList selectedindexchanged

Question

I'm paging using webgrid in ASP .NET MVC 4.0 but i have some trouble . RowsPerPage property webgrid i want to choose in DropDownList . Everything is OK but when i go to page 2 or page 3 ... default RowsPerPage = 5 . I know why but i can't fix it . Please help my trouble . Here my code

HomeController

public class HomeController : Controller
{
    [HttpGet]
    public ActionResult Index()
    {
        ViewBag.rowsPerPage = 5;
        return View(new StudentModel().ListStudent());
    }

    [HttpPost]
    public ActionResult Index(string model)
    {
        ViewBag.rowsPerPage = int.Parse(Request.Form["paging"].ToString());
        return View(new StudentModel().ListStudent());
    }

}

Index.cshtml

@{
  ViewBag.Title = "Index";
  Layout = "~/Areas/Admin/Views/Shared/_Layout.cshtml";
  <link href="~/Assets/Styles/Admin/bootstrap.min.css" rel="stylesheet" />
  <link href="~/Assets/Styles/Admin/HomeIndexStyle.css" rel="stylesheet" />
  <script src="~/Assets/Js/jquery-1.11.3.min.js"></script>
  <script src="~/Assets/Js/jquery-1.11.3.js"></script>
}

@model List<Model.ADO.M_STUDENT>

@using(@Html.BeginForm()) {
  @Html.DropDownList("paging", new List<SelectListItem> {
    new SelectListItem{Text="1",Value="1"},
    new SelectListItem{Text="5",Value="5",Selected=true},
    new SelectListItem{Text="10",Value="10"}
  }, new { onchange = @"form.submit();"})
}

@{
  var webGird = new WebGrid(
    Model, rowsPerPage: ViewBag.rowsPerPage,
    defaultSort: "Update_At",
    columnNames: new[] { "ID", "Name", "Address", "Email", "Phone", "Status", "Update_By", "Update_At" }
  );
  webGird.SortDirection = SortDirection.Descending;
  @webGird.GetHtml(tableStyle: "table table-bordered table-hover table-striped")
}

Answer 1

Create a view model to represent what you want to display and edit so that you can strongly bind to your properties

public class StudentVM
{
  [Display(Name = "Items per page")]
  public int Paging { get; set; }
  public IEnumerable<SelectListItem> PageList { get; set; }
  public List<M_STUDENT> Students { get; set; }
}

and in the controller (your not changing data so the post method should be deleted)

[HttpGet]
public ActionResult Index(int? paging)
{
  var pageList = new int[]{ 1, 5, 10 };
  StudentVM model = new StudentVM()
  {
    Paging = paging ?? 5,
    PageList = new SelectList(pageList),
    Students = // your query to return the students
  };
  return View(model );
}

And change your view to

@model yourAssembly.StudentVM
@using(@Html.BeginForm("Index", "Home", FormMethod.Get)) {
  @Html.LabelFor(m => m.Paging)
  @Html.DropDownListFor(m => m.Paging, Model.PageList)
}
@{
  var webGird = new WebGrid(
    Model.Students, rowsPerPage: Model.Paging, // modify this
    ....

And the script to submit the form

<script>
  $('#Paging').change(function() {
    $('form').submit();
  });
</script>

Answer 2

So what happens when you go to page 2 or 3 is the WebGrid sends GET request to the server. And on GET action handler you have this:

ViewBag.rowsPerPage = 5;

So you are resetting rowsPerPage all the time.

Actually the proper way to handle these changes in rowsPerPage should not be form submit. POST requests are used when data is supposed to be changed on server (like written to DB). Nothing like that happens here, so proper way to go is to:

1. Make form do GET requests instead of POST

   @using (Html.BeginForm("Index", "Home", FormMethod.Get){
   ...
   

2. Make WebGrid the part of the same form.

3. Get rid of POST action handler, as we are not doing POST anymore, and in GET handler have something like (not tested code here):

   [HttpGet]
   public ActionResult Index(string paging)
   {
       if (!String.IsNullOrEmpty(paging))
       {
           // alternatively use TryParse
           ViewBag.rowsPerPage = int.Parse(paging);
       }
       else
       {
           // default value
           ViewBag.rowsPerPage = 5;
       }
   

4. Change your DropDwonList markup to decide on selected item based on ViewBag value:

   @Html.DropDownList(
       "paging", 
       new SelectList(
           new List<SelectListItem>{
               new SelectListItem{Text="1",Value="1"},
               new SelectListItem{Text="5",Value="5"},
               new SelectListItem{Text="10",Value="10"}
           }, "Value", "Text", ViewBag.rowsPerPage),
       new { onchange = @"form.submit();"})
   

   or even simpler

   @Html.DropDownList(
       "paging", 
       new SelectList(
           new List<int>{1, 5, 10}, ViewBag.rowsPerPage),
       new { onchange = @"form.submit();"})
   

Also, as a side note, you should really consider widening your model to carry all the data in it, like choices for page size, user selection, page number perhaps - otherwise your code will grow harder and harder to maintain.