将搜索过滤器添加到分页、排序的 WebGrid 的问题

Question

我在将过滤后的结果正确地发回分页、排序的 webgrid 时遇到问题。例如，我的网格被限制为每页 5 个项目，但如果过滤器搜索返回 9 个项目，则所有 9 个项目都显示在一页上，而不是分两页显示，但我仍然会有“下一个”和“上一个”页面像网格这样的链接甚至都不知道它正在显示过滤后的结果。

然后，如果我尝试对过滤后的结果进行排序，我会完全丢失过滤器并返回到未过滤的 webgrid 数据。

您能帮我理解为什么过滤后的结果没有正确发布到 webgrid 中吗？

这是我的控制器：

using System.Linq;
using System.Web.Mvc;
using SchedulerManager.Models;

namespace SchedulerManager.Controllers
{
    public class ScheduleController : Controller
    {
         readonly ModelServices _mobjModel = new ModelServices();

         public ActionResult Index()
         {
             var schedules = _mobjModel.GetSchedules();
             return View(schedules);
         }

        [HttpPost]
        public ActionResult Index(string description)
        {
            var schedules = _mobjModel.GetSchedules();

            if (!string.IsNullOrEmpty(description))
                schedules = schedules.Where(s => s.Description.ToLower().Contains(description.ToLower())).ToList();

            return PartialView("_grid", schedules);
        }
    }
}

这是我的模型：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Scheduler;

namespace SchedulerManager.Models
{
    public class ModelServices : IDisposable
    {
        private readonly Entities _entities = new Entities();

        public IEnumerable<Schedule> GetSchedules()
        {
            return _entities.Schedules.ToList();
        }

        public void Dispose()
        {
            _entities.Dispose();
        }
    }
}

这是我的 index.cshtml：

@model IEnumerable<Schedule>
@using Scheduler
@using System.Globalization
@{
    ViewBag.Title = "Schedules";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
@using (Ajax.BeginForm(new AjaxOptions 
    { HttpMethod = "Post", InsertionMode = InsertionMode.Replace, UpdateTargetId = "myGrid" }))
{
    <fieldset>
        <legend>Schedules</legend>
        <div>
            Description: 
            <input type="text" id="description" name="description" /> 
            <input type="submit" value="Search" />
        </div>
    </fieldset>
}

<div id="myGrid">
        @Html.Partial("_grid", Model)
</div>

这是我的 _grid.cshtml：

@model IEnumerable<Schedule>
@using Scheduler

@{
    var grid = new WebGrid(Model, rowsPerPage: 5, ajaxUpdateContainerId: "grid");

    @grid.GetHtml(htmlAttributes: new { id = "grid" },
                  fillEmptyRows: false,
                  alternatingRowStyle: "alternate-row",
                  headerStyle: "grid-header",
                  footerStyle: "grid-footer",
                  mode: WebGridPagerModes.All,
                  firstText: "<< First",
                  previousText: "< Prev",
                  nextText: "Next >",
                  lastText: "Last >>",
        columns: new[] {
        grid.Column("Description", style: "description"),
        grid.Column("ScheduleType", "Type", style: "scheduletype"),
        grid.Column("EnableDate", "Enable Date", s=>s.EnableDate.ToShortDateString(), style: "enabledate"),
        grid.Column("DisableDate", "Disable Date", s=>s.DisableDate != null ? s.DisableDate.ToShortDateString() : "", style: "disabledate"),
        grid.Column("", "", 
                @<text>
                    @(Html.ActionLink("Edit", "Edit", new { id = item.ScheduleId }, new { @class = "actionlink" }))
                    |
                    @(Html.ActionLink("Delete", "Delete", new { id = item.ScheduleId }, new { @class = "actionlink" }))
                </text>)
        })
}

Answer 1

首先确保您已将 jquery.unobtrusive-ajax.js 脚本包含到您的页面中（在 jquery 之后），否则您的 Ajax.BeginForm 不会像您认为的那样：

<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script type="text/javascript" src="@Url.Content("~/scripts/jquery.unobtrusive-ajax.js")"></script>

然后您可以对搜索表单使用 GET 请求，以便搜索条件正确呈现为搜索后生成的分页锚中的查询字符串：

@using (Ajax.BeginForm("filter", new AjaxOptions { HttpMethod = "GET", InsertionMode = InsertionMode.Replace, UpdateTargetId = "myGrid" }))
{
    <fieldset>
        <legend>Schedules</legend>
        <div>
            Description: 
            <input type="text" id="description" name="description" /> 
            <input type="submit" value="Search" />
        </div>
    </fieldset>
}

最后重命名您的控制器操作并启用它以获取请求：

public class ScheduleController : Controller
{
    readonly ModelServices _mobjModel = new ModelServices();

    public ActionResult Index()
    {
        var schedules = _mobjModel.GetSchedules();
        return View(schedules);
    }

    public ActionResult Filter(string description)
    {
        var schedules = _mobjModel.GetSchedules();

        if (!string.IsNullOrEmpty(description))
        {
            schedules = schedules.Where(s => s.Description.ToLower().Contains(description.ToLower())).ToList();
        }

        return PartialView("_grid", schedules);
    }
}