使用 ajax 重新加载选项卡内容而不在刷新时加载页面

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 创建部分，这将帮助您创建具有动态值的可重用部分，并且可以绑定到您的内容页面。