使用 Partial 加载 KendoUI Tabstrip答案

【问题标题】：Loading KendoUI Tabstrip Using Partial使用 Partial 加载 KendoUI Tabstrip
【发布时间】：2013-09-19 18:16:57
【问题描述】：

有人知道是否可以通过向控制器发出 Ajax 请求来加载标签条，该控制器返回 Partial 就像您可以使用 KendoUI Window 控件一样？

如果没有，我将简单地执行 AJAX 请求来获取我的 PartialViewResult，然后设置使用 jQuery 来设置 div 的 html。但是很高兴知道它是否可以使用 tabstrip API 来完成。

我根据 KendoUI 文档尝试了以下方法，但似乎不起作用。

<div id="tabstrip">
    <ul>
        <li class="k-state-active">Tab 1</li>
        <li>Tab 2</li>
        <li>Tab 3</li>
    </ul>
</div>

<script>
    $(document).ready(function () {
        $("#tabstrip").kendoTabStrip({
            animation: { open: { effects: "fadeIn"} },
            contentUrls: [
                        'myController/myAction/id1',
                        'myController/myAction/id2',
                        'myController/myAction/id3'
                    ]
        });
    });
</script>

任何想法都将不胜感激。

嶙峋

【问题讨论】：

您是否还通过 ajax 调用返回脚本标签？在这种情况下，它应该可以工作，但我认为您必须删除文档加载事件，只需调用 kendo。请注意，在您的代码中 div 标签未关闭。另请注意，该 id 尚未使用。
我已经更新了代码示例，我从我的应用程序中使用的代码中稍微简化了它。我只是想证明在加载 DOM 之前我不会加载元素等。我的控制器操作返回一个 PartialViewResult。我不确定这是否是问题，即选项卡内容可以处理返回的内容吗？
由于您正在加载部分视图，我认为不应使用$(document).ready(function () {。你试过删除它吗？
是的，试过了，还是没有

标签： jquery kendo-ui

【解决方案1】：

基本上我的建议是初始化小部件（没有此类内容 URL），然后立即调用 append 方法，如 here 所示。

tabStrip.append(
[{
    text: "Item 1",
    url: "http://www.kendoui.com"               // Link URL if navigation is needed, optional.
},
{
    text: "<b>Item 2</b>",
    encoded: false,                             // Allows use of HTML for item text
    content: "text"                             // Content for the content element
},
{
    text: "Item 3",
    contentUrl: "partialContent.html"           // From where to load the item content
},
{
    text: "Item 4",
    imageUrl: "http://www.kendoui.com/test.jpg" // Item image URL, optional.
},
{
    text: "Item 5",
    spriteCssClass: "imageClass3"               // Item image sprite CSS class, optional.
}]
);

【讨论】：

感谢 Petur 的帮助。我从 KendoUI ajax demo (demos.kendoui.com/web/tabstrip/ajax.html) 获得了配置。我尝试了您的代码，但现在出现 jquery 错误（无法转换 JavaScript 参数 arg 0 [nsIDOMDocumentFragment.appendChild]）所以不确定它是否与 KendoUI（v2012.2.710）和 jQuery（1.9.1）的版本有关正在使用。

【解决方案2】：

我最终找不到一种方法来让它与控件本身一起工作，所以我想出了自己的解决方案，即在 ajax 请求中请求部分内容，然后简单地更新 div 内容特定选项卡。

function loadTabContent() {
    $.ajax({
        type: 'GET',
        url: '/myControllerName/Action',
        async: false,
        data: { id: itemId },
        success: function (data) {
            $('#myTabStripTabStrip-2').html(data);
        }
    });
}

希望它可以帮助遇到同样问题的其他人。

再次感谢所有帮助我解决这个问题的人。

【讨论】：

【解决方案3】：

在每个“li”内部，您需要为每个 div 添加一个“div”和 id。
在 tabStrip 的“选择”事件中，您需要单击与此选项卡相关的 div。在本例中，我们将单击的选项卡的 div 称为“divContent”。
向控制器调用 ajax 请求以获取您的 partiaview。您将获得此 ajax 调用的响应，并且您需要在上一步的 div 中插入：

divContent.html(响应);

我就是这样做的，效果很好。您甚至可以添加一些 jquery 效果来使外观更好看：

divContent.html(响应); //在div中设置你的响应 divContent.hide(); //隐藏divContent.fadeIn(500); //并淡入结果

希望对你有帮助

干杯，里卡多

【讨论】：