如何使用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将从操作方法中提取一些新数据并将其返回到视图（与模型的类型相同）。这就是我被困的地方。我不知道如何使用新检索的数据重新填充网格。以下是代码。任何帮助将不胜感激。

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中。然后从您的控制器返回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>