ASP.NET MVC 使用 WebGrid 显示 SearchResults答案

【问题标题】：ASP.NET MVC using WebGrid for showing SearchResultsASP.NET MVC 使用 WebGrid 显示 SearchResults
【发布时间】：2015-06-10 12:38:20
【问题描述】：

我有一个 Search.cshtml 视图，看起来像这样：

@model IEnumerable<MVC.Models.Books>

@using (Html.BeginForm())
{
    @Html.DropDownList("Categorie", ViewBag.Categorie as SelectList); 
    @Html.TextBox("Query");
    <input type="submit" value="Search" />
}

@if (this.Model.Any())
{
    var grid = new WebGrid(Model, rowsPerPage:20);

    @grid.GetHtml(mode: WebGridPagerModes.All,
    columns: grid.Columns(
        grid.Column(columnName: "Number"),
        grid.Column(columnName: "Title"),
        grid.Column(format: (item) => Html.ActionLink("Edit", "Edit", new { id = item.Nummer })),
        grid.Column(format: (item) => Html.ActionLink("Details", "Details", new { id = item.Nummer })),
        grid.Column(format: (item) => Html.ActionLink("Delete", "Delete", new { id = item.Nummer }))
        )
    )
}

我的控制器有以下方法：

        public ActionResult Search()
        {
            ViewBag.Categorie= new SelectList(new[] { "Number", "Title"});
            IEnumerable<Books> model = new List<Books>();
            return View(model);
        }

        [HttpPost]
        public ActionResult Search(string categorie, string query)
        {
            ViewBag.Categorie= new SelectList(new[] { "Number", "Title"});    
            IEnumerable<Books> model;

            switch (categorie)
            {
                case "Number":
                    int qnumber = Convert.ToInt32(query);
                    model = _db.Books.Where(b => b.Number == qnumber)
                                    .OrderBy(b => b.Number).ToList();
                    break;
                default:
                    model = _db.Books.Where(b => b.Title.Contains(query))
                                    .OrderBy(b => b.Title).ToList();
                    break;
            }
            return View(model);
        }

一切正常。但是列和分页链接的排序不起作用。如果单击其中一个，视图会重新加载，而 Grid 中没有数据。

有没有办法让 WebGrid 在这个 Search-View 中工作？

【问题讨论】：

尝试在 Search in action name 中放置一个调试器，并检查query 在您输入一些文本并点击提交按钮时是否有任何值。
query 有一个值。我知道问题出在哪里。如果我搜索（例如）带有“ab”的标题，我会得到标题包含“ab”的所有书籍对象。在 WebGrid 上，我正确地得到了前 20 个结果。但是，如果我单击（例如）下一页的链接，我会进入public ActionResult Search() 函数，其中模型会被IEnumerable<Books> model = new List<Books>(); 覆盖知道如何解决这个问题吗？

标签： asp.net-mvc asp.net-mvc-3 webgrid

【解决方案1】：

在您的代码中：

@if (this.Model.Any())
{
   <div id="grid" class="ajaxGrid">
   @{
       var grid = new WebGrid(Model, rowsPerPage: 8, canPage: true, canSort: true, ajaxUpdateContainerId: "grid");
   }

   @grid.GetHtml(mode: WebGridPagerModes.All,
   columns: grid.Columns(
   grid.Column(columnName: "Number"),
   grid.Column(columnName: "Title"),
   grid.Column(format: (item) => Html.ActionLink("Edit", "Edit", new { id = item.Nummer })),
   grid.Column(format: (item) => Html.ActionLink("Details", "Details", new { id = item.Nummer })),
   grid.Column(format: (item) => Html.ActionLink("Delete", "Delete", new { id = item.Nummer }))))
</div>
}

--编辑--

    public ActionResult Fetch(string sort, string sortDir)
    {
        //sorting logic here
        return View();
    }

【讨论】：

我认为你误解了我的问题。同样WebGridPagerModes.All 与canSort 和canPage 具有相同的效果
我不知道它是否能解决你的问题。我更新了我的代码。您可以添加 ajaxUpdateContainerId: "grid" 这会将您的内容加载到 id 为“grid”的 div。
是的，Ajax 可以工作。但是在使用此应用程序 Ajax 的用户 PC（真的很旧）上不起作用。我不知道为什么，但我需要一个没有 Ajax 的解决方案。我想我必须覆盖 WebGrid 分页链接，这样当我点击其中一个时，我会转到 public ActionResult Search(string categorie, string query) 函数而不是 public ActionResult Search()
我写了上面的排序代码，其中sort是排序的字段名，sortDir是排序方向。

【解决方案2】：

如果没有 Ajax，我就无法正常工作。所以现在我的解决方案是这样的：

"Search.cshtml:"

<h2>Search</h2>

@using (Ajax.BeginForm("Update", "Book", new AjaxOptions
{
    HttpMethod = "GET",
    InsertionMode = InsertionMode.Replace,
    UpdateTargetId = "searchResults"
}))
{
    @Html.DropDownList("categorie", new SelectList(new[] { "Number", "Writer", 
                "Title"}) as SelectList)
    @Html.TextBox("query")
    <input type="submit" value="Search" />
}
<br /><br />

<table id="searchResults">
</table>

部分视图“_BookResults.cshtml”：

@model IEnumerable<MVC.Models.Books>

@{
    var grid = new WebGrid(Model, defaultSort: "Number", rowsPerPage: 20, ajaxUpdateContainerId: "searchResults");
    @grid.GetHtml(mode: WebGridPagerModes.All,
    htmlAttributes: new { id = "searchResults" },
    columns: grid.Columns(
        grid.Column(columnName: "Number"),
        grid.Column(columnName: "Title"),
        grid.Column(format: (item) => Html.ActionLink("Edit", "Edit", new { id = item.Nummer })),
        grid.Column(format: (item) => Html.ActionLink("Details", "Details", new { id = item.Nummer })),
        grid.Column(format: (item) => Html.ActionLink("Delete", "Delete", new { id = item.Nummer }))
    ));
}

Controller 现在有以下方法：

public ActionResult Search()
{
    return View();
}

public PartialViewResult Update(string categorie, string query)
{
    var books = new List<Books>();

    switch (categorie)
    {
        case "Number":
            int qnumber = Convert.ToInt32(query);
            books = _db.Books
                .Where(b => b.Number== qnumber).ToList();
            break;
        case "Writer":
            books = _db.Books
                .Where(b => b.Writer.Name.Contains(query))
                .OrderBy(b => b.Writer.Name).ToList();
            break;
        case "Title":
            books = _db.Books
                .Where(b => b.Title.Contains(query))
                .OrderBy(b => b.Title).ToList();
            break;
    }

    return PartialView("_BookResults", books);
}

我希望这个解决方案能帮助遇到类似问题的每个人。

【讨论】：