Question

我目前正在使用Kendo的新Q3版本，并且遇到了Kendo标签控件的问题。我有一个tabtrip有11个选项卡，第三个选项卡导出页面到另一个视图。从这个视图中我向后导航（使用面包屑或通过浏览器上的后退按钮），我选择第三个选项卡并刷新它的内容。但是，在此反向页面导航后，当我点击它时，第一个选项卡中的内容不会显示;我看到的只是标签中的灰色背景。当我检查控件时，我可以看到所有控件都有正确绑定的信息。如果我在导航回页面时选择第一个选项卡，则所有内容都会正确加载。

我不知道出了什么问题或者如何解决这个问题。任何帮助将不胜感激！

- EDIT-- 以下是如何设置标签条。

<div class="" id="tabstrip">
<ul>
    <li class="k-state-active">
            <i class="green icon-info-sign bigger-110"></i>
            @ResxStrings.PersonStrings.tab_juryMaster_lbl_CandidateInfo            
    </li>
    <li>            
            <i class="green icon-info-sign bigger-110"></i>
            @ResxStrings.PersonStrings.tab_heading_juryMaster            
    </li>
    <li>            
            <i class="green icon-question-sign bigger-110"></i>
            @ResxStrings.PersonStrings.tab_heading_eQuestion            
    </li>
    <li>
            <i class="green icon-bell bigger-110"></i>
            @ResxStrings.PersonStrings.tab_heading_Events            
    </li>
    <li>            
            <i class="green icon-flag bigger-110"></i>
            @ResxStrings.PersonStrings.tab_heading_Flags            
    </li>
    <li>            
            <i class="green icon-file bigger-110"></i>
            @ResxStrings.PersonStrings.tab_heading_DM            
    </li>
    <li>
            <i class="green icon-calendar bigger-110"></i>
            @ResxStrings.PersonStrings.tab_heading_Scheduling
    </li>
    <li>            
            <i class="green icon-money bigger-110"></i>
            @ResxStrings.PersonStrings.tab_heading_Financials            
    </li>
    <li>            
            <i class="green icon-exchange bigger-110"></i>
            @ResxStrings.PersonStrings.tab_heading_Merge            
    </li>
    <li>            
            <i class="green icon-suitcase bigger-110"></i>
            @ResxStrings.PersonStrings.tab_heading_NameHistory            
    </li>
    <li>            
            <i class="green icon-list-ul bigger-110"></i>
            @ResxStrings.PersonStrings.tab_heading_JudgesNotes            
    </li>

</ul>
<div><div id="candidateInfo"></div></div>
<!--BEGIN juryMaster CONTENT-->
<div id="juryMaster">
    @Html.Partial("~/Views/Person/Partial_JuryMaster.cshtml")           
</div>
<!-- /juryMaster -->

<!--BEGIN eQuestion CONTENT-->
<div id="eQuestion">
    @Html.Partial("~/Views/Person/Partial_eQuestion.cshtml")

</div>
<!-- /eQuestion -->

<!-- BEGIN Events CONTENT-->
<div>
    @Html.Partial("~/Views/Person/Partial_Events.cshtml")
</div>
<!--/Events-->

<!-- BEGIN Flags CONTENT-->
<div>
    @Html.Partial("~/Views/Person/Partial_Flags.cshtml")
</div>
<!--/Flags-->

<!-- BEGIN DM CONTENT-->
<div>
    @Html.Partial("~/Views/Person/Partial_DM.cshtml")
</div>
<!--/DM-->

<!-- BEGIN Scheduling CONTENT-->
<div>
    @Html.Partial("~/Views/Person/Partial_Scheduling.cshtml")
</div>
<!--/Scheduling-->

<!-- BEGIN Financials CONTENT-->
<div>
    @Html.Partial("~/Views/Person/Partial_Financials.cshtml")
</div>
<!--/Financials-->

<!-- BEGIN MergeUnMerge CONTENT-->
<div>
    @Html.Partial("~/Views/Person/Partial_MergeUnMerge.cshtml")
</div>
<!--/MergeUnMerge-->

<!-- BEGIN NameHistory CONTENT-->
<div>
    @Html.Partial("~/Views/Person/Partial_NameHistory.cshtml")
</div>
<!--/NameHistory-->

<!-- BEGIN JudgesNotes CONTENT-->
<div>
    @Html.Partial("~/Views/Person/Partial_JudgesNotes.cshtml")
</div> 
<!--/JudgesNotes-->

并在脚本中：

        $("#tabstrip").kendoTabStrip({
        select: onSelect,
        effects: "expand:vertical",
        activate: onActivate,
        animation: false
    });

select方法获取第一个选项卡并选择/刷新它，而activate方法只涉及单独选项卡上的网格格式。下面是选择第一个选项卡时调用的方法

    function loadJurorSummary(jurorID) {
    $.ajax({
        url: '@Url.Content("~/Person/getPersonSummary")',
        type: "GET",
        data: { id: jurorID },
        success: function (data) {
            $("#candidateInfo").html(data);
        }
    });
}

在同一页面上首次加载和导航时，一切正常。

Answer 1

从demo for ajax loaded content看来，您需要在tabstrip声明中将内容网址作为数组传递：

$(document).ready(function () {
    $("#tabstrip").kendoTabStrip({
        animation: { open: { effects: "fadeIn"} },
        contentUrls: [
                    '../../content/web/tabstrip/ajax/ajaxContent1.html',
                    '../../content/web/tabstrip/ajax/ajaxContent2.html',
                    '../../content/web/tabstrip/ajax/ajaxContent3.html'
                ]
    });
});

当您使用开发工具（假设您使用的是Chrome或IE）时，您是否在控制台中看到任何脚本错误？

Kendo Tabstrip无法正确加载第一个选项卡

1 个答案: