0

フィルタリングされた結果を、ページ化され、並べ替えられた Web グリッドに正しくポストバックする際に問題が発生しています。たとえば、私のグリッドは 1 ページあたり 5 アイテムに制限されていますが、フィルター検索で 9 アイテムが返された場合、9 アイテムすべてが 2 ページに分割されるのではなく 1 ページに表示されますが、「次」ページと「前」ページは引き続き表示されます。グリッドのようなリンクは、フィルタリングされた結果を表示していることさえ知りません。

次に、フィルター処理された結果を並べ替えようとすると、フィルターが完全に失われ、フィルター処理されていない webgrid データに戻ります。

フィルタリングされた結果が Web グリッドに正しく投稿されない理由を理解するのを手伝ってもらえますか?

これが私のコントローラーです：

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

1 に答える 1

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);
    }
}
于 2013-03-29T16:15:53.370 に答える