动态加载DevExpress PageControl表

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内容.但是，可以启用延迟/延迟的选项卡加载(即创建动态HTML内容以加快初始呈现)，同时通过PageControlSettings.CallbackRouteValues设置第一次激活它们。查看Tab Strip - AJAX演示，了解如何完成此任务。