Clonage AJAX TabPanels

Question

J'ai rencontré un problème intéressant en essayant de cloner un panneau de template dans mon contrôle ajax tabcontainer. L'idée est que j'ai un contrôle personnalisé sur le premier onglet qui répertorie certaines choses, et pour ajouter une nouvelle chose, vous cliquez sur le nouveau bouton sur le contrôle personnalisé, ce qui soulève un événement dans le contrôle/page qui contient le tabcontainer. Ce contrôle/page va ensuite cloner l'onglet caché et ajouter le clone au tabcontainer.

avec ce balisage je reçois ce que je dois à la fois le premier onglet (contenant la liste) et les onglets suivants (par le tabpanel basé sur un modèle caché prêt pour le clonage) ...

<asp:TabContainer ID="TabContainer1" runat="server"> 
    <asp:TabPanel ID="ui_pnl1" HeaderText="My Panel" runat="server"> 
     <ContentTemplate> 
      <cc1:myListOfThings ID="list" runat="server" OnMyEvent="CreateTabFromTemplate" /> 
     </ContentTemplate> 
    </asp:TabPanel> 
    <asp:TabPanel ID="TemplatePanel" runat="server" Visible="false"> 
     <HeaderTemplate> 
      <span>Hello World</span><asp:LinkButton ID="ui_btnRemove" runat="server" Text="x" /> 
     </HeaderTemplate> 
     <ContentTemplate> 
      Some content for my panel 
     </ContentTemplate> 
    </asp:TabPanel> 
</asp:TabContainer> 

Ok permet endosseront que sur le premier panneau dans mon contrôle personnalisé j'ai un bouton qui soulève l'événement "MyEvent" qui à son tour appelle la méthode "CreateTabFromTemplate".

Maintenant, ce que je veux faire est de copier le panneau caché "TemplatePanel" et l'ajouter au conteneur de l'onglet.

Dans mon code derrière, le code de la méthode pour ajouter le nouveau panneau de tabulation pour mon conteneur onglet fonctionne quelque chose comme ça ...

protected void CreateTabFromTemplate(object sender, EventArgs e) 
{ 
    // create a new tab panel 
    TabPanel newPanel = new TabPanel(); 
    // instantiate the hidden content template from the hidden note panel in the new panel 
    ui_tpNoteCreator.ContentTemplate.InstantiateIn(newPanel); 
    // add the panel to the available tabs and select it 
    TabContainer1.Tabs.Add(newPanel); 
    TabContainer1.ActiveTab = newPanel; 
} 

Tout en regardant bien jusqu'à présent ... mais je raté quelque chose .. Je n'ai pas modélisé l'en-tête des nouveaux onglets ... il semble que tout ce que je peux faire est de définir le texte. Suivant cet exemple: http://forums.asp.net/t/1108611.aspx/1 Je peux faire ce que j'essaie de faire mais je ne veux pas écrire une classe qui définit mon modèle d'en-tête Je veux instancier une instance de ma version de balisage et passer cette instance à mon nouveau panneau.

Je ne suis pas convaincu que cela puisse être fait ... est-ce un bug avec le contrôle ou ai-je raté quelque chose?!?!

Des idées?

Answer 1

Il se trouve que j'allais à ce sujet dans le mauvais sens ...

Essentiellement une différence theres entre assignant modèles et la processus de liaison de données, ce n'est pas encore parfait en raison des données im essayant de passer à mes modèles d'onglet, mais voici le principe de base ...

Markup:

<asp:TabContainer ID="TabContainer1" runat="server"> 
    <asp:TabPanel ID="ui_pnl1" HeaderText="My Panel" runat="server"> 
     <ContentTemplate> 
      <cc1:myListOfThings ID="list" runat="server" OnMyEvent="CreateTabFromTemplate" /> 
     </ContentTemplate> 
    </asp:TabPanel> 
    <asp:TabPanel ID="TemplatePanel" runat="server" Visible="false"> 
     <HeaderTemplate> 
      <span>Hello World</span><asp:LinkButton ID="ui_btnRemove" runat="server" Text="x" /> 
     </HeaderTemplate> 
     <ContentTemplate> 
      Some content for my panel 
     </ContentTemplate> 
    </asp:TabPanel> 
</asp:TabContainer> 

code derrière:

protected void CreateTabFromTemplate(object sender, EventArgs e) 
{ 
    // create a new tab panel 
    TabPanel newPanel = new TabPanel(); 
newPanel.HeaderTemplate = TemplatePanel.HeaderTemplate; 
newPanel.ContentTemplate = TemplatePanel.ContentTemplate; 
    // add the panel to the available tabs and select it 
    TabContainer1.Tabs.Add(newPanel); 
    TabContainer1.ActiveTab = newPanel; 
} 

protected void TabContainer_DataBinding(object sender, EventArgs e) 
{ 
    foreach(TabPanel panel in TabContainer.Tabs) 
    { 
     //identify if this is the correct tab 
     if(correctTab) 
     { 
      // this will find a control anywhere on the panel (eg in both header and content templates) 
      Label label = panel.FindControl("ControlID") as Label; 
      label.Text = "Some Business Object Value"; 
     } 
    } 
} 

Answer 2

Je viens de tester ce qui suit qui fonctionne autant que je sache.

Markup:

<asp:TabContainer ID="TabContainer1" runat="server" ViewStateMode="Enabled"> 
     <asp:TabPanel ID="ui_pnl1" HeaderText="My Panel" runat="server"> 
      <ContentTemplate> 
       <asp:Button ID="btnAddPanel" runat="server" Text="Add Panel" /> 
      </ContentTemplate> 
     </asp:TabPanel> 
     <asp:TabPanel ID="TemplatePanel" runat="server" Visible ="false"> 
      <HeaderTemplate> 
       <span>Hello World</span><asp:LinkButton ID="ui_btnRemove" runat="server" Text="X" /> 
      </HeaderTemplate> 
      <ContentTemplate> 
       <p>Test Content</p> 
      </ContentTemplate> 
     </asp:TabPanel> 
    </asp:TabContainer> 

code

derrière:

public partial class _Default : System.Web.UI.Page 
{ 
    protected void Page_Load(object sender, EventArgs e) 
    { 
     this.btnAddPanel.Click += new EventHandler(btnAddPanel_Click); 
    } 

    void btnAddPanel_Click(object sender, EventArgs e) 
    { 
     TabPanel newPanel = new TabPanel(); 

     newPanel.HeaderTemplate = TemplatePanel.HeaderTemplate; 
     TemplatePanel.ContentTemplate.InstantiateIn(newPanel); 

     TabContainer1.Tabs.Add(newPanel); 
     TabContainer1.ActiveTab = newPanel;   
    } 
}