2

请原谅我的愚蠢问题，因为我对 MVC 和 Kendo UI 都是新手，并且仍在尝试找出可能的方法。

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

现在我能够获取所选行的 ID ...但我想知道如何从 JavaScript 调用控制器并只更新选项卡式面板。我已经阅读了一些关于 $.ajax 的信息，是否可以调用控制器并让它传回填充了我需要的详细信息的部分视图（选项卡式面板）？

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

4

1 回答 1

0

这当然是可能的。不过，您需要更加熟悉 jQuery。看起来您已经掌握了 Kendo Grid 事件，所以我不会在这里讨论这个问题。这是诀窍（之一）......

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

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

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

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

控制器方法

[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！

于 2013-02-02T01:14:53.770 回答