Question

是否有人知道是否可以通过向返回Partial的控制器发出Ajax请求来加载tabstrip，就像使用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>

非常感谢任何想法。

Cragly

Answer 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.
}]
);

Answer 2

我最终无法找到一种方法来使控件本身工作，所以我想出了我自己的问题解决方案，即在ajax请求中请求partial，然后只需更新div内容特定标签。

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

希望它可以帮助那些有同样问题的人。

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

Answer 3

每个＆＃34; li＆＃34;你需要添加一个＆＃34; div＆＃34;和每个这些div的id。
如果＆＃34;选择＆＃34;在tabStrip中，您需要单击与此选项卡相关的div。在这个例子中，我们将调用＆＃34; divContent＆＃34;选项卡的div点击了。
调用ajax请求到控制器以获取partiaview。您将获得此ajax调用的响应，并且您需要在上一步中插入div内部：

divContent.html（响应）;

我这样做，效果很好。你甚至可以添加一些jquery效果来使看起来更好：

divContent.html（响应）; //在div中设置你的响应 divContent.hide（）; //隐藏divContent.fadeIn（500）; //然后淡出结果

我希望它有所帮助

干杯，里卡多

使用部分加载KendoUI Tabstrip

3 个答案: