Клонирование AJAX TabPanels - PullRequest
Новая
       2

Клонирование AJAX TabPanels

3 голосов
/ 06 мая 2011

Я столкнулся с интересной проблемой при попытке клонировать панель шаблонов в моем элементе управления ajax tabcontainer.

Идея состоит в том, что у меня есть пользовательский элемент управления на первой вкладке, который перечисляет некоторые вещи и добавляетновая вещь, которую вы нажимаете новую кнопку в пользовательском элементе управления, которая вызывает событие в элементе управления / странице, содержащей вкладку-контейнер.Затем этот элемент управления / страница выполняет клонирование скрытой панели вкладок и добавление клона в контейнер вкладок.

с этой разметкой я получаю то, что мне нужно, как на первой вкладке (содержащей список), так и на всех последующих вкладках (на основе скрытой панели вкладок, готовой к клонированию) ... 

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

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

Следуя этому примеру: http://forums.asp.net/t/1108611.aspx/1 Я могу делать то, что пытаюсь сделать, но я не хочу писать класс, который определяет мой шаблон заголовка. Я хочу создать экземпляр моей версии разметки и передать этот экземпляр моей новой программе.nel.

Я не уверен, что это можно сделать ... это ошибка с контролем или я что-то пропустил?!?!

Есть идеи?

Ответы [ 2 ]

2 голосов
/ 09 мая 2011

Оказывается, я поступил неправильно ...

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

Разметка: 

<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";
      }
   }
}
0 голосов
/ 06 мая 2011

Я только что проверил следующее, что работает, насколько я могу судить.

Разметка: 

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