Question

以下是我的观看代码的简化示例。我想有DevExpress标签，每个标签共享一个div的内容。这里的想法是我有很多HTML将在这些标签中显示，我不想一次性浏览所有浏览器。我想这样做，当您选择一个选项卡时，共享div中的HTML被删除，然后通过AJAX加载新的局部视图以重新填充div并在屏幕上显示。这样，在页面加载时只会加载一个选项卡，在选项卡之间切换时，将删除上一个选项卡的HTML以提高浏览器性能。有谁知道我怎么做到这一点？谢谢！

<%
Html.DevExpress().PageControl(settings =>
{
    settings.Name = "pcGeneralTabs";
    settings.Styles.Tab.Paddings.Padding = Unit.Pixel(5);
    settings.Styles.ActiveTab.BackColor = Color.White;
    settings.Styles.Tab.Height = Unit.Pixel(35);
    settings.Width = Unit.Percentage(100);
    settings.Height = Unit.Percentage(100);

    settings.ClientSideEvents.ActiveTabChanged = @"
        function(s, e) {
            var tab = s.GetActiveTab().name;

            //Implement loading of Tab content through AJAX
        }";

    settings.TabPages.Add(tab =>
    {
        tab.Name = "tbFirst";
        tab.Text = "Summary Information";
    });

    settings.TabPages.Add(tab =>
    {
        tab.Name = "tbSecond";
        tab.Text = "Financial Analysis";

    });
}).Render();
%>

Answer 1

您可以通过更改以下设置和方法来完成此操作：

更改其他标签的名称和文字属性。

settings.TabPages.Add(tabpage =>
{
    tabpage.Name = "TabPage1";
    tabpage.Text = "Page 1";
    tabpage.SetContent(() =>
    {
        ViewContext.Writer.Write(String.Format("<div id='{0}' >", tabpage.Name));
        Html.RenderAction(tabpage.Name);
        ViewContext.Writer.Write("</div>");
    });
});

和ClientSideEvent：

 function OnActiveTabChanging(s, e) {
    var action = e.tab.name;
    var actionUrl = window.location + "/Home/" + action;
    $.ajax({
        type: "POST",
        url: actionUrl,
        success: function (response) {
            $("#" + action).html(response);
        }
    });
}

在控制器中添加方法：

public ActionResult TabPage1()
{               
   return PartialView("PartialView1");
}

Answer 2

没有内置功能可以删除已加载的HTML内容。但是，可以通过 PageControlSettings.CallbackRouteValues 设置首次激活它们，从而启用延迟/推迟标签加载（即，创建动态HTML内容以加速初始渲染）。查看Tab Strip - AJAX演示，了解如何完成此任务。

动态加载DevExpress PageControl选项卡

2 个答案: