如何使用 jquery 重新绑定 Html.Grid 的内容？

Question

我刚刚为我的项目安装了 Grid.mvc 包，并使用 Html.Grid 方法绘制了一个基本网格：

@Html.Grid(Model).Named("FeedbackGrid").Columns(columns =>
{
    columns.Add(c => c.Id).Titled("Request Number").SetWidth("10%");
    columns.Add(c => c.AspNetUser.FullName).Titled("Requester").Filterable(true).SetWidth("15%");
    columns.Add(c => c.RequestedDate).Titled("Date Requested").SetWidth("15%");
    columns.Add(c => c.Title).Titled("Title").SetWidth("20%");
    columns.Add(c => c.Description).Titled("Description")
        .RenderValueAs(c => c.Description.Substring(0, (c.Description.Length > 50) ? 50: c.Description.Length)
            + ((c.Description.Length > 50) ? "..." : "")).SetWidth("40%");
        }).WithPaging(10).Sortable(true)

这是我的模型：

@model IEnumerable<MyProject.Models.FeatureRequest>

我在屏幕上添加了一些搜索功能（如 ID、姓名等），带有搜索按钮。单击搜索时，jquery 从操作方法中提取一些新数据并将其 returns 到视图（与模型的类型相同）。这就是我被困的地方。我不知道如何使用新检索的数据重新填充网格。下面是代码。任何帮助将不胜感激。

var onSearchClicked = function(){
    var requestId = $('#RequestIdSearch').val();
    var requesterId = $('#RequesterIdSearch').val();
    var title = $('#TitleSearch').val();
    var description = $('#DescriptionSearch').val();

    $.ajax({
        cache: false,
        type: "POST",
        url: "/Home/GetFeatureRequests",
        data: { "requestId": requestId, "requesterId": requesterId, "title": title,"description": description},
        success: function (rdata) {
            // How to bind the grid to the retrieve rdata here?
            alert('successful');
        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert('Failed to retrieve request features!.');
        }
    });
}

Answer 1

把你的 HTML.Grid 放在 Partial View 里面。然后 return 来自你的控制器的 Partial View 像这样：

public PartialViewResult GetFeatureRequests(int requestId, int requesterId, string title, string description)
{
  // Your code here to fill model IEnumerable<MyProject.Models.FeatureRequest>
  return PartialView("_PartialViewName", model); // returns view with model
}

在 ajax success function 中，执行此操作：

$.ajax({
    cache: false,
    type: "POST",
    url: "/Home/GetFeatureRequests",
    data: { "requestId": requestId, "requesterId": requesterId, "title": title,"description": description},
    success: function (rdata) {
        $('#yourContainerId').html(rdata);
    },
    error: function (xhr, ajaxOptions, thrownError) {
        alert('Failed to retrieve request features!.');
    }
});

在您的主视图中，包括像

这样的局部视图

<div id="yourContainerId">
    @Html.Partial("_PartialViewName", Model.FeatureRequestList)
</div>

如何使用 jquery 重新绑定 Html.Grid 的内容？

How to re-bind content of an Html.Grid using jquery?

asp.net-mvc

jquery

grid.mvc