AJAX TabPanels 복제

Question

내 아약스 tabcontainer 컨트롤에서 템플릿 패널을 복제 할 때 흥미로운 문제가 발생했습니다.

아이디어는 내가 몇 가지를 나열하는 첫 번째 탭에 사용자 지정 컨트롤이 있고 컨트롤/이벤트를 포함하는 사용자 지정 컨트롤에서 새 단추를 클릭하면 새로운 것을 추가하는 것입니다 탭 컨테이너. 그런 다음 해당 컨트롤/페이지가 숨겨진 tabpanel을 복제하고 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> 

좋아 이제 가정 할 수 있습니다 ... 내가 첫 번째 탭 (목록 포함) 및 (복제 준비 숨겨진 탭 패널에 의해 템플릿) 후속 탭 모두에서 필요한 것을 얻을 내 사용자 정의 컨트롤의 첫 번째 패널에는 "CreateTabFromTemplate"메서드를 호출하는 "MyEvent"이벤트를 발생시키는 버튼이 있습니다.

이제 숨겨진 패널 "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;   
    } 
}