Question

我对Asp.Net MVC3的WebGrid控件有一点问题。我想要的是使用ajax和webgrid执行搜索视图;像这样的东西：

搜索条件 _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __

主题： _ __ _ _

任务类型： _ ____

提交搜索

WebGrid withPaging

当我点击按钮搜索时，它会通过ajax调用HTTPost操作并应用搜索条件;但是，当我尝试进行分页时，会转到HTTPGet操作;这样，根据搜索条件的过滤器不会执行。

我将网格放在局部视图中;有代码：

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

我的索引视图如下：

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

所以，如果有人知道如何解决我的问题，我将不胜感激。

问候语阿图罗

Answer 1

看到网格为每个分页器项（和列标题）生成一个onclick调用，你不能只使用jQuery来调用传递表单的Ajax方法来替换默认值吗？

Answer 2

我认为这是因为每次点击下一页链接时都会更换网格。也许用它是这样的：

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

Asp Mvc3 webgrid通过ajax进行分页和过滤

2 个答案: