渲染局部视图是在 TabStrip 上写入

Question

为什么这会覆盖 TabStrip 并将部分视图放在 TabStrip 顶部而不是将其放在其中一个选项卡内？我正在尝试从树视图中获取所选项目，并能够在标签条中查看部分视图，并随着树视图上的选择更改而更新它。它正确呈现列表视图并正确过滤，但现在整个选项卡控件被列表视图覆盖！！！！

<script>
    var treeview;
    $(document).ready(function () {
        treeview = $("#treeview").data("kendoTreeView");
    });
    function select(e) {

        var selectedbook = $(e.node).data("bookid");

        var tabstrip =
        $.get('@Url.Action("Index", "ListView")',
            { id: selectedbook }, function (data) {
                $("#ContactsTabStrip").html(data);
            });
    }
</script>

我必须进行 ajax 调用！

Answer 1

尽管您没有从结果中说出 #ContactsTabStrip 是什么，但我猜它是 Tab 的标识符而不是正文的标识符。

不管怎样，你不需要给它一个名字，你只需要从你select处理程序中收到的事件参数中获取它。像这样的：

function select(e) {
    var selectedbook = $(e.node).data("bookid");

    // Get a reference to the content from the event
    var content = e.contentElement;

    $.get('@Url.Action("Index", "ListView")', { id: selectedbook }, function (data) {
        // Set data
        item.html(data);
    });
}

编辑：如果您想更改与所选选项卡不同的选项卡的内容，那么首先要找到该选项卡的索引，然后使用contentElement 访问该元素。

function select(e) {
    var selectedbook = $(e.node).data("bookid");

    $.get('@Url.Action("Index", "ListView")', { id: selectedbook }, function (data) {
        // Get a reference to the tabStrip
        var tabStrip = $("#tabStrip").data("kendoTabStrip");
        // Find the index of the element to be changed
        var idx = tabStrip.tabGroup.find("#ContactsTabStrip").index();
        // Use contentElement function for changing the content
        $(tabStrip.contentElement(idx)).html(data);
    });
}