Question

Basically, I’m using WebGrid and I need to filter the results. The first problem I have here is it’s my first time using WebGrid and I was hoping some of you could give me a hand with it… So far, I’ve managed to sort grid results and filter them with Ajax, but, when re-sorting the filtered results, the subset is lost and I go back to the beginning with the full set of results. I know why it’s happening of course, but I don’t figure out how to make it work.

Example:

On my view:

@model IQueryable<Cities>
@section MoreScripts
{
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
}

@using (Ajax.BeginForm(new AjaxOptions { InsertionMode = InsertionMode.Replace,     UpdateTargetId = "GridData"}))
{
    <fieldset>
        <legend>Search Filters</legend>
        <br />
        <div>
            Name
        </div>
        <div>
            @Html.TextBox("Name")
        </div>
        <p>
            <input type="submit" value="Search" />
        </p>
    </fieldset>
}

<div id="GridData">
    @Html.Partial("Grid", Model)
</div>

My Partial View:

@model IQueryable<Cities>

@{
    var grid = new WebGrid<Cities>(null,rowsPerPage: 5, defaultSort: "Nombre", ajaxUpdateContainerId: "GridData");
    grid.Bind(Model, autoSortAndPage: true, rowCount: Model.Count());
    @grid.GetHtml(columns: 
                    grid.Columns(
                                grid.Column("Name", "Name", canSort: true),
                                grid.Column("CreationDate", "Creation Date", canSort: true),
                                grid.Column("Active", "Active", canSort: true, format: @<text><input type="checkbox" disabled="disabled" value="@item.ID" @(item.Active == true ? "Checked" : null) /></text>),
                                                                            grid.Column(format: (item) => Html.ActionLink("Edit", "Edit", new { id = item.Id }, new { @class = "editLink smallCell", @title = "Edit" })),
                                grid.Column(format: (item) => Html.ActionLink("Delete", "Delete", new { id = item.Id }, new { @class = "deleteLink smallCell", @title = "Delete" }))),
                          tableStyle: "webgrid",
                          headerStyle: "webgrid-header",
                          footerStyle: "webgrid-footer",
                          alternatingRowStyle: "webgrid-alternating-row",
                          selectedRowStyle: "webgrid-selected-row",
                          rowStyle: "webgrid-row-style");    
}

And finally what am doing wrong is here, on my controller:

    public ActionResult Index()
    {
        return View(repository.GetAllRecords().OrderByDescending(f => f.CreationDate));
    }

    [HttpPost]
    public ActionResult Index(string name)
    {
        var data = repository.GetAllRecords();

        if(!string.IsNullOrEmpty(name))
            data = data.Where(a => a.Name.Contains(name));

        data = data.OrderByDescending(f => f.CreationDate);

        return PartialView("Grid", data);
    }

I’m also using a class WebGrid : WebGrid as seen here:
http://archive.msdn.microsoft.com/mag201107WebGrid/Release/ProjectReleases.aspx?ReleaseId=5667

So, this actually works fine for filtering, but once you get the filtered results and then try to change the sort order of your narrowed search results, you lose the elements and the ‘name’ parameter’s value because the WebGrid goes agains the first controller action. Probably this is not the best approach, but as I said, I’ve never used WebGrid so I’m willing to learn. Any help would be really appreciated. Thanks.

Answer 1

Try to add FormMethod.Post to your form, so the request will go to the second ActionResult. Otherwise, the request is a GET, and goes to the first ActionResult Index() without the parameters.