I Have a little problem with WebGrid control for Asp.Net MVC3. What I want is to perform a search view using ajax and webgrid; something like this:
Search Criteria ______________________________
Subject: _____
Task Type: _____
SUBMIT SEARCH
WebGrid withPaging
.
When I click the button search it call the HTTPost action by ajax and apply the search criteria; however when I try to do paging it goes to the HTTPGet action; in this way, the filter according to the search criteria doesn't execute.
I put the grid inside a partial view; there is the 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 view looks like:
@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 know how to solve my problem I'll be grateful.
Greeting Arturo
Seeing as the grid generates an onclick call for each pager item (and column header) couldn't you just use jQuery to replace default values with a call to an Ajax method that passes the form back?