ASP.NET - ленивая загрузка динамических вкладок - PullRequest
Новая
       15

ASP.NET - ленивая загрузка динамических вкладок

1 голос
/ 31 марта 2011

Я нахожусь в тупике и надеюсь, что кто-то сделал что-то подобное.

У меня есть приложение ASP.NET, которое имеет несколько вкладок инструментария AJAX.Количество вкладок меняется от страницы к странице, поскольку они динамически генерируются в зависимости от настроек в файле конфигурации.

При этом некоторые вкладки управляются базой данных.Время загрузки, когда количество этих вкладок находится на странице, может быть значительным, поэтому я хочу реализовать отложенную загрузку.

Я следую шаблону Мэтта Берсета, но, похоже, он ломается, когда количество вкладокявляется динамическим (каждая вкладка нуждается в своем собственном методе на странице).

Если у кого-то есть предложения о том, как справиться с этим, это будет высоко ценится.

Я начал работать снебольшое приложение, чтобы заставить ленивую загрузку работать.Этот ленивый загружает вторую вкладку (которая жестко запрограммирована), но я борюсь с третьей вкладкой (она динамически добавляется).

Отредактировано для добавления кода: страница ASPX 

<script language="javascript" type="text/javascript">
    function clientActiveTabChanged(sender, args) {

        //  see if the table elements for the grids exist yet
        var isTab2Loaded = $get('<%= this.lbl2.ClientID %>');
        //  if the tab does not exist and it is the active tab, 
        //  trigger the async-postback
        if (!isTab2Loaded && sender.get_activeTabIndex() == 1) {
            // load tab1
            __doPostBack('btnTrigger', '');
        }
        // else if (!isTab2Loaded && sender.get_activeTabIndex() == 2)
            // load tab2
            // __doPostBack('btnEmployeesTrigger', '');
     }

</script>
<asp:scriptmanager ID="Scriptmanager1" runat="server"></asp:scriptmanager>
<div>
<cc1:TabContainer ID="tc1" runat="server" OnClientActiveTabChanged="clientActiveTabChanged">
   <cc1:TabPanel TabIndex="0" runat="server" HeaderText="Tab1" ID="Tab1">
        <ContentTemplate>
            <asp:UpdatePanel ID="up1" runat="server">
            <ContentTemplate>
                <asp:Label ID="lbl1" text="I am here" runat="server" />
            </ContentTemplate>
            </asp:UpdatePanel>
        </ContentTemplate>
   </cc1:TabPanel> 
   <cc1:TabPanel runat="server" HeaderText="Tab2" ID="Tab2">
    <ContentTemplate>
        <asp:UpdatePanel ID="up2" UpdateMode="Conditional" runat="server">
            <ContentTemplate>
                <asp:Label ID="lbl2" Text="Load when called" Visible="false" runat="server" />                
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="btnTrigger" />
            </Triggers>
        </asp:UpdatePanel>
    </ContentTemplate>
   </cc1:TabPanel>
</cc1:TabContainer>
</div>
<input ID="btnTrigger" style="display:none;" runat="server" type="button" onserverclick="btnTrigger_Click" />
<input id="btnTrigger2" style="display:none;" runat="server" type="button" onserverclick="btnTrigger2_Click" />

Codebehind: 

protected void Page_Init(object sender, EventArgs e)
{
    //TabPanel tp = new TabPanel();
    //tp.Controls.Add(new LiteralControl("Load first"));
    //tp.HeaderText = "Tab1";
    //tc1.Tabs.Add(tp);
    //tc1.ActiveTabIndex = 0;

    //TabPanel tp2 = new TabPanel();
    //UpdatePanel up1 = new UpdatePanel();
    //up1.Controls.Add(new LiteralControl("Load me when called"));
    ////up1.Triggers.Add(new AsyncPostBackTrigger());

    //AsyncPostBackTrigger trg = new AsyncPostBackTrigger();

    //tp2.Controls.Add(up1);
    //tp2.Controls.Add(new LiteralControl("Load when called"));
    //tp2.HeaderText = "Tab2";
    //tc1.Tabs.Add(tp2);

    TabPanel tp3 = new TabPanel();
    tp3.HeaderText = "Tab3";
    UpdatePanel up3 = new UpdatePanel();
    LiteralControl lc = new LiteralControl("Load me when needed");
    lc.ID = "lit3";
    lc.Visible = false;
    up3.ContentTemplateContainer.Controls.Add(lc);
    tp3.Controls.Add(up3);
    tc1.Controls.Add(tp3);

}

protected void btnTrigger_Click(object sender, EventArgs e)
{
    System.Threading.Thread.Sleep(2500);
    this.lbl2.Visible = true;    
}

Ответы [ 2 ]

1 голос
/ 31 марта 2011

Содержимое вкладок также управляется базой данных, как CMS?

Вы можете использовать UserControls в качестве контента и позволить всем реализовывать один и тот же интерфейс, например. IDataBindable с функцией BindData. На этом пути вы можете lazyload эти UserControl независимо от его содержимого.

На ActiveTabChanged вам нужно только вызвать эту функцию, а затем Update на панели обновления TabContainer.

0 голосов
/ 31 марта 2011

Быстрый способ сделать это может состоять в том, чтобы не загружать никакие вкладки (т.е. фактически не предоставлять им контент), кроме стандартных, до тех пор, пока не будет нажата эта вкладка (обнаруженная во время OnActiveTabChanged или OnClientActiveTabChanged).

Однако метод Тима позволяет методу OnActiveTabChanged быть таким же простым, как привязка данных к UserControl относительно этой вкладки - это, вероятно, лучший метод, хотя это и больше усилий.

...