ASP.NET MVC using WebGrid for showing SearchResults

Question

I have a Search.cshtml View, that looks like that:

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

My Controller has the following methods:

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

Everything works almost fine. But the sorting of the Columns and the Paging-Links dont work. If you click on one of them, the View reloads with no data in the Grid.

Is there any way to get the WebGrid work in this Search-View?

try placing a debugger in Search in action name and check whether `query` has any value when you typed in some text and hit the submit button. — Karthik Chintala, Feb 27 '13 at 12:50
`query` has a value. I know where the problem is. If i search (for example) for a title with "ab" i get all book-objects where the title contains "ab". On the WebGrid i get the first 20 results correctly. But if i click (for example) on the link for the next page i come in the `public ActionResult Search()` function, where the model gets overwritten with `IEnumerable model = new List();` Any idea how i solve this problem? — willi, Feb 28 '13 at 10:06

Suraj Shrestha · Answer 1 · 2013-03-01T09:38:17.700

0

In your code:

@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>
}

--Edit--

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

edited Mar 01 '13 at 09:38

answered Feb 28 '13 at 10:10

Suraj Shrestha

1,790
1
25
51

i think you missunderstand my problem. Also `WebGridPagerModes.All` has the same effect as `canSort` and `canPage` – willi Feb 28 '13 at 12:57
I don't know whether it will fix your problem. I updated my code. You can add ajaxUpdateContainerId: "grid" which will load your contents to the div with id "grid". – Suraj Shrestha Mar 01 '13 at 03:30
Yes with Ajax would work. But on the Users PC (really old ones) who use this Application Ajax doesnt work. I dont know exactly why but I need a solution without Ajax. I think i must override the WebGrid Paging-Links, so that when i click on one of them i go to the `public ActionResult Search(string categorie, string query) ` function and not to the `public ActionResult Search() ` – willi Mar 01 '13 at 09:08
I wrote the sorting code as above, where sort is the fieldname from which sorting is done and sortDir is sorting direction. – Suraj Shrestha Mar 01 '13 at 09:43

score 0 · Accepted Answer · answered Apr 16 '13 at 11:38

I didnt get it worked without Ajax. So now my solution looks like this:

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

The 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 }))
    ));
}

The Controller now has the following methods:

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

I hope that this solution will help everyone with similar problems.

ASP.NET MVC using WebGrid for showing SearchResults

2 Answers2