AJAX Tab container control: For displaying content in tab style

A very common scenario  in web disign is to display two or more form in tab format.
Means instead of filling one form completely and then proceeding to next form we can access multiple form at a time using 
AJAX Tab container control.
We need to write below code.

  
ASPX page:

  <asp:TabContainer ID="tabCont" runat="server" ActiveTabIndex="0" Width="100%"  AutoPostBack="true"
                onactivetabchanged="tabCont_ActiveTabChanged" >
              <asp:TabPanel ID="tab1" runat="server"  HeaderText="General Details">
                <ContentTemplate>
                                   ..........
                 </ContentTemplate>
              </asp:TabPanel>
              <asp:TabPanel ID="tab2" runat="server" HeaderText="EmployerDetails" >
                <ContentTemplate>
                                     ..................
                 </ContentTemplate>
              </asp:TabPanel>
  </asp:TabContainer>


ASPX.CS page:

  protected void tabCont_ActiveTabChanged(object sender, EventArgs e)
      {
          if (tabCont.ActiveTab.HeaderText == "General Details")
          {                    
              tabCont.ActiveTabIndex = 0;
          }
          else if (tabCont.ActiveTab.HeaderText == "EmployerDetails")
           {
          tabCont.ActiveTabIndex = 1;
           }
      }

0 comments:

Post a Comment

Note: Only a member of this blog may post a comment.