ASP.. NET MVC 4下拉列表已被选中

本文关键字：下拉列表 NET MVC ASP | 更新日期: 2023-09-27 18:10:36

我在asp.net MVC 4.0中使用webgrid分页，但我有一些麻烦。RowsPerPage属性webgrid我想在下拉列表中选择。一切都很好，但是当我翻到第二页或第三页时…default RowsPerPage = 5。我知道原因，但我无法补救。请帮我解忧。这里是我的代码

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")
}

ASP.. NET MVC 4下拉列表已被选中

所以当你转到第2页或第3页时，WebGrid会向服务器发送GET请求。在GET操作处理程序中你有这个:

ViewBag.rowsPerPage = 5;

所以你一直在重置rowsPerPage。

实际上，在rowsPerPage中处理这些变化的正确方法不应该是表单提交。POST请求用于在服务器上更改数据(如写入DB)。这里不会发生这样的事情，所以正确的做法是:

  1. 让表单做GET请求而不是POST请求

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

  2. 使WebGrid成为同一表单的一部分

  3. 摆脱POST操作处理程序，因为我们不再做POST了，在Get处理程序中有类似的东西(这里没有测试代码):

    [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. 改变你的DropDwonList标记来决定选择的项目基于ViewBag值:

    @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();"})

    或者更简单的

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

另外，作为旁注，您应该真正考虑扩展您的模型以携带其中的所有数据，例如页面大小的选择、用户选择、页码——否则您的代码将变得越来越难以维护。

创建一个视图模型来表示您想要显示和编辑的内容，以便您可以强绑定到您的属性

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; }
}

和控制器(你没有改变数据，所以post方法应该被删除)

[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 );
}

并将视图更改为

@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
    ....

和提交表单的脚本

<script>
  $('#Paging').change(function() {
    $('form').submit();
  });
</script>
相关文章：