Question

我有一个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);
        }

一切都很好。但是Columns和Paging-Links的排序不起作用。如果单击其中一个，则视图会重新加载而网格中没有数据。

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

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

Answer 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>

Partial-View“_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);
}

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

ASP.NET MVC使用WebGrid显示SearchResults

2 个答案: