使用Ajax重新加载Tab内容而不在Refresh上加载页面

Question

重新加载选项卡，而不是整个页面

 <div class="content"> <div id="tabstrip"> <ul> <li id="tabEdit">@ResourceStrings.Text_ProblemDetails</li> <li id="tabItemsAffected">@ResourceStrings.Text_ItemsAffected</li> <li id="tabAttachments">@ResourceStrings.Text_Attachments</li> @if (ApplicationGlobals.SELECTED_COMPANY_CODE != CompanyCode.MONTREAL) { <li id="tabPlmReferences">@ResourceStrings.Text_PlmReferences</li> } <li id="tabDispositions">@dispositionsText</li> @if (ApplicationGlobals.SELECTED_COMPANY_CODE == CompanyCode.MONTREAL && (ApplicationGlobals.SELECTED_NCRBASE.NcrType != (int)NcrTypeEnum.NCRATTEST)) { <li id="tabReworkDetails">@ResourceStrings.Text_ReworkDetails</li> } <li id="tabLineClosure">@ResourceStrings.Text_Line_Approval</li> <li id="tabTraceability" style="float:right">@ResourceStrings.Text_Traceability</li> </ul> </div> </div> 

是否可以更新网页的各个部分（如标签页），而无需在切换到另一个标签页时重新加载整个页面

  $.ajax({ url: "NcrLine/Reload", type: "GET", async: false, dataType: "json", success: function () { alert("Hello"); var tab = $('#tabstrip').tabs('getSelected'); tab.panel('refresh'); } }); 

Answer 1

我需要了解的第一件事是那些类型的更新，如果这些更新具有简单的代码呈现，则您可以在收到响应后将HTML代码简单地绑定到选项卡句柄。 如下所示-

$.ajax({
    url: "NcrLine/Reload",
    type: "GET",
    async: false,
    dataType: "json",
    success: function () {
        alert("Hello");

        var tab = $('#tabstrip').tabs('getSelected');
        tab.panel('refresh');

        // Add css to the selected tab
        $('#tabstrip[selected=selected]').css('css-property', 'css-value');

        //Render complete new HTML code of updated tabstrip
        $('#tabstrip').html('<Your tabstrip HTML template>');
    }
});

如果您具有复杂的HTML呈现，那么我建议您使用handlebars.js创建局部，这将帮助您创建具有动态值的可重用局部，并将其绑定到您的内容页面。