Question

尝试在我的ajax tabcontainer控件中克隆模板面板时遇到了一个有趣的问题。

我的想法是我在第一个选项卡上有一个自定义控件，列出了一些东西，并添加一个新东西，你单击自定义控件上的新按钮，这会在包含tabcontainer的控件/页面中引发一个事件。然后该控件/页面将克隆隐藏的tabpanel并将克隆添加到tabcontainer。

使用此标记，我从第一个选项卡（包含列表）和任何后续选项卡（由隐藏的tabpanel准备克隆）模板中得到我需要的内容...

<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>

好了，现在让我们假设在我的自定义控件的第一个面板上，我有一个按钮，它会引发“MyEvent”事件，而该事件又调用方法“CreateTabFromTemplate”。

现在我要做的是复制隐藏面板“TemplatePanel”并将其添加到标签容器中。

在我的代码中，用于将新选项卡面板添加到我的选项卡容器的方法代码就像这样...

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;
}

到目前为止看起来都不错......但是我错过了一些东西......我没有模板化新的tabpanels标题......似乎我只能设置文本。

按照这个例子：http://forums.asp.net/t/1108611.aspx/1我可以做我想做的事情，但我不想写一个定义我的标题模板的类我要实例化我的标记版本的实例并传递实例到我的新面板。

我不相信这可以做到......这是控件的错误还是我错过了什么？！？！

有什么想法吗？

Answer 1

事实证明我是以错误的方式进行的......

基本上是分配模板和数据绑定过程之间的差异，它仍然不完美，因为数据我试图传递到我的标签模板，但这里是基本的主要...

标记：

<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>

代码背后：

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

我刚刚测试了以下内容，据我所知。

标记：

<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>

代码背后：

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;        
    }
}

克隆AJAX TabPanels

2 个答案: