問題將搜索過濾器添加到分頁的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> 
} 

最後重命名你的控制器動作，並使其能夠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); 
    } 
}