c# - Webgrid:排序后维护过滤器

Question

我已经设置了一个 webgrid，它似乎工作正常，允许我排序和分页。我添加了一个过滤器选项，该选项也很好用，但是如果我过滤并然后对结果进行排序，过滤器将丢失并显示所有记录。

这是我的 Razor View 代码:

@using (Ajax.BeginForm(new AjaxOptions { HttpMethod = "Get", InsertionMode = InsertionMode.Replace, UpdateTargetId = "myGrid" }))
{

@Html.ValidationSummary(true)
<fieldset>
    <legend>Document Search</legend>

    <div class="editor-label">
        @Html.Label("Enter a Document code:")
    </div>
    <div class="editor-field">
        @Html.Editor("search")
    </div>

    <p>
        <input type="submit" value="Search" />
    </p>
</fieldset>
}

@{
    WebGrid grid = new WebGrid(null, rowsPerPage: 10, canPage: true, canSort: true, ajaxUpdateContainerId: "myGrid");
    grid.Bind(Model, autoSortAndPage: true);
}

<div id="myGrid">

    @grid.GetHtml(mode: WebGridPagerModes.All, firstText: "First Page", nextText: "Next", previousText: "Previous", lastText: "Last Page", numericLinksCount: 10,
            columns: grid.Columns(
                grid.Column("DocumentID", "Document Code", canSort: true),
                grid.Column("Title", "Document Title", canSort: true)
        )
    )

</div>

这是我的操作:

public ActionResult Index(string search)
    {
        List<DocumentIndexViewModel> viewModel = Mapper.Map<List<DocumentIndexViewModel>>(DocumentService.GetDocumentsBySearch(search));
        if (Request.IsAjaxRequest())
            return PartialView("_IndexGrid", viewModel);
        else
            return View(viewModel);
    }

如何在对显示的记录进行排序时维护过滤器？似乎我需要以某种方式将搜索字符串附加到排序链接上，但我不确定如何继续。

Answer 1

由于您对过滤器使用 GET，因此应该保留它。我无法重现该问题。这是我的完整工作测试用例。

型号:

public class CityViewModel
{
    public int Id { get; set; }
    public string Name { get; set; }
}

Controller :

public class HomeController : Controller
{
    public ActionResult Index(string search)
    {
        using (var client = new WebClient())
        {
            var query = HttpUtility.ParseQueryString(string.Empty);
            query["q"] = search;
            var json = client.DownloadString("http://gd.geobytes.com/AutoCompleteCity?" + query.ToString());
            var serializer = new JavaScriptSerializer();
            var viewModel = serializer
                .Deserialize<string[]>(json)
                .Select((x, index) => new CityViewModel
                {
                    Id = index,
                    Name = x
                })
                .Where(x => x.Name.StartsWith(search ?? string.Empty, StringComparison.OrdinalIgnoreCase))
                .ToList();

            if (Request.IsAjaxRequest())
            {
                return PartialView("_IndexGrid", viewModel);
            }
            else
            {
                return View(viewModel);
            }
        }
    }
}

主视图(~/Views/Home/Index.cshtml):

@model IEnumerable<CityViewModel>

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
<script type="text/javascript">
    $.ajaxSetup({
        cache: false
    });
</script>

@using (Ajax.BeginForm(new AjaxOptions { HttpMethod = "GET", InsertionMode = InsertionMode.Replace, UpdateTargetId = "gridPartial" }))
{
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Document Search</legend>

        <div class="editor-label">
            @Html.Label("Enter a Document code:")
        </div>
        <div class="editor-field">
            @Html.Editor("search")
        </div>

        <p>
            <input type="submit" value="Search" />
        </p>
    </fieldset>
}

<div id="gridPartial">
    @Html.Partial("_IndexGrid")
</div>

~/Views/Home/_IndexGrid.cshtml 部分:

@model IEnumerable<CityViewModel>

@{
    WebGrid grid = new WebGrid(null, rowsPerPage: 10, canPage: true, canSort: true, ajaxUpdateContainerId: "myGrid");
    grid.Bind(Model, autoSortAndPage: true);
}

<div id="myGrid">
    @grid.GetHtml(mode: WebGridPagerModes.All, firstText: "First Page", nextText: "Next", previousText: "Previous", lastText: "Last Page", numericLinksCount: 10,
        columns: grid.Columns(
            grid.Column("Id", "City Id", canSort: true),
            grid.Column("Name", "City Name", canSort: true)
        )
    )
</div>

排序和分页会保留输入的搜索过滤器，因为它在查询字符串中。