Question

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

然后，如果我尝试对过滤后的结果进行排序，我会完全丢失过滤器并返回到未过滤的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>
}

最后重命名您的控制器操作并将其启用为GET请求：

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

将搜索过滤器添加到分页，排序的WebGrid

1 个答案: