c# - Kendo UI MVC 网格选择更新单独的控件

Question

请原谅我提出愚蠢的问题，因为我是 MVC 和 Kendo UI 的新手，并且仍在尝试弄清楚什么是可能的。

我有一个页面布局，其中我在页面的上半部分有一个网格，在底部有一个选项卡式面板。当用户在网格上选择一条记录时，我希望能够调用 Controller 进行数据库调用并使用详细信息填充选项卡式面板。

现在我可以获取所选行的 ID...但我想知道如何从 JavaScript 调用 Controller 并只更新选项卡式面板。我已经阅读了一些有关 $.ajax 的内容，是否可以调用 Controller 并让它传回填充了我需要的详细信息的局部 View (选项卡式面板)？

我尝试过在网格内的自定义详细信息模板中加载面板，但决策者拒绝了这个想法耸耸肩。这可能吗？

Answer 1

这当然是可能的。不过，您需要更加熟悉 jQuery。看来您对 Kendo Grid 事件有所了解，所以我不会在这里解决这个问题。这是技巧(其中之一)...

在这种情况下，Kendo Grid 被用作奇特的多选，每次选择一个新的州(即 TX、NY)时，都会在调用此函数的网格中触发一个事件。这比你要求的要多，所以我会解释。它正在这样做:

1. 在网格中添加多选项目列表，并将此列表分配给隐藏的表单字段。
2. 使用 Ajax post 将此信息和表单中的其他信息更新到数据库(整个表单已传递)。 2b.请注意“async: false”，这会让数据库在下一次 Ajax 调用之前更新。
3. 另一个 Ajax 帖子使用所有表单字段再次查询数据库。

两个 Ajax 调用都访问 MVC Controller 方法，这些方法与数据库通信并返回部分 View 以同时更新页面的两个独立部分。这些可以是任何东西，在这种情况下，它们都是额外的剑道网格，但选项卡式面板也同样简单。

function updateParts() {
    var grid = $('#States').data('kendoGrid');
    var rows = grid.select();
    $('#StatesQuery').val('');
    rows.each(
        function () {
            var record = grid.dataItem($(this));
            $('#StatesQuery').val($('#StatesQuery').val() + record.StateCode + ",");
        }
    );
    $.ajax({
        url: '@Url.Action("UpdateSomething", "Controller")',
        type: 'post',
        data: $('form#ajaxSearchForm').serialize(),
        async: false,
        success: function (result) {
            $('#SomethingElseDiv').html(result);
        }
    });
    $.ajax({
        url: '@Url.Action("QuerySomething", "Controller")',
        type: 'post',
        data: $('form#ajaxSearchForm').serialize(),
        success: function (result) {
            $('#SearchResultsDiv').html(result);
        }
    });
}

Controller 方法

[HttpPost]
public ActionResult QuerySomthing(FormCollection formCollection)
{
    var query = new Status(); // Complext Data Model for Search
    query.States = formCollection["StatesQuery"].Split(',');
    ... etc
    var model = new SearchViewModel(); // ViewModel for Partial
    model.StatusSummaries = _submissionsDataProvider.DoQuery(query);
    return View("SearchResults", model);
}

我希望你和我一样喜欢 Kendo 和 MVC!