Paging and filtering Asp Mvc3 webgrid by ajax

Question

I have a little problem with managing WebGrid for Asp.Net MVC3. I want to search using ajax and webgrid; something like that:

Search Criteria ______________________________

Subject: _____

Task Type: _____

SEARCH VIEW

---

WebGrid withPaging

.

When I click the search button, you invoke the HTTPost action using ajax and apply the search criteria; however, when I try to swap, it goes to the HTTPGet action; thus, a filter according to the search criteria is not executed.

I put the grid in a partial view; there is a code:

@model IEnumerable<MVC3.Models.Task> @{ var grid = new WebGrid(null, rowsPerPage: 2, canPage: true, canSort: true, ajaxUpdateContainerId: "myGrid"); grid.Bind(Model, rowCount: 3, autoSortAndPage: true); grid.Pager(mode: WebGridPagerModes.All); @grid.GetHtml( columns: grid.Columns( grid.Column(format: (item) => Html.ActionLink("Assign Notifications", "AssignNotifications", new { id = item.TaskId })), grid.Column(format: (item) => Html.ActionLink("Edit", "Edit", new { id = item.TaskId })), grid.Column(format: (item) => Html.ActionLink("Delete", "Delete", new { id = item.TaskId })), grid.Column("Subject"), grid.Column("Comment"), grid.Column(columnName: "Status", header: "Status", format: (item) => item.TaskStatu.Name), grid.Column(columnName: "StartDate", header: "Start Date", format: (item) => item.StartDate.ToString("MM/dd/yyy")), grid.Column(columnName: "Deadline", header: "Dead Line", format: (item) => item.Deadline.ToString("MM/dd/yyy")) ) ); } 

And my index looks like this:

 @model MVC3.ViewModel.TaskSearchViewModel @{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml"; } <h2> Task Index</h2> <hr /> @using (Ajax.BeginForm(new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "myGrid" })) { <div id="Filters"> <fieldset> <legend>Search criteria</legend> <br /> <table> <tr> <td> @Html.LabelFor(x => x.Subject) </td> <td> @Html.TextBoxFor(x => x.Subject, new { style = "width: 255px;" }) </td> </tr> <tr> <td> @Html.LabelFor(x => x.TaskTypeId) </td> <td> @Html.DropDownListFor(x => x.TaskTypeId, Model.GetTaskTypesSelectList(), "Select", new { style = "width: 260px;" }) </td> </tr> <tr> <td> @Html.LabelFor(x => x.ResponsableId) </td> <td> @Html.DropDownListFor(x => x.ResponsableId, Model.GetResponsablesSelectList(), "Select", new { style = "width: 260px;" }) </td> </tr> <tr> <td> @Html.LabelFor(x => x.StatusId) </td> <td> @Html.DropDownListFor(x => x.StatusId, Model.GetStatusSelectList(), "Select", new { style = "width: 260px;" }) </td> </tr> </table> </fieldset> </div> @Html.Hidden("page") <input id="btnSearch" type="submit" value="Search" /> } <br /> <div id="myGrid"> @Html.Partial("_TaskSearchResult", Model.ResultTask) </div> <br /> @Html.ActionLink("Create new Task", "NewTask") 

So, if anyone knows how to solve my problem, I will be grateful.

Greetings by Arturo

Answer 1

I think this is because you replace the grid every time you click the link on the next page. Perhaps use it something like this:

 @model IEnumerable<MVC3.Models.Task> @{ var grid = new WebGrid(null, rowsPerPage: 2, canPage: true, canSort: true, ajaxUpdateContainerId: "myGrid"); grid.Bind(Model, rowCount: 3, autoSortAndPage: true); grid.Pager(mode: WebGridPagerModes.All); <div id="myGrid"> @grid.GetHtml( columns: grid.Columns( grid.Column(format: (item) => Html.ActionLink("Assign Notifications", "AssignNotifications", new { id = item.TaskId })), grid.Column(format: (item) => Html.ActionLink("Edit", "Edit", new { id = item.TaskId })), grid.Column(format: (item) => Html.ActionLink("Delete", "Delete", new { id = item.TaskId })), grid.Column("Subject"), grid.Column("Comment"), grid.Column(columnName: "Status", header: "Status", format: (item) => item.TaskStatu.Name), grid.Column(columnName: "StartDate", header: "Start Date", format: (item) => item.StartDate.ToString("MM/dd/yyy")), grid.Column(columnName: "Deadline", header: "Dead Line", format: (item) => item.Deadline.ToString("MM/dd/yyy")) ) ); </div> } 

Answer 2

Seeing that the grid generates an onclick call for each pager element (and column heading), could you just use jQuery to replace the default values ​​with an Ajax method call that passes the form back?