An easy and clean way to use ajax tab container, tab panels, and user controls, to make a great multi-tab form

Setting up the navigation and user Interface

say we have a form, with asp.net 2.0. we need to allow the user to enter his 1. personnal information, 2. Professional information, 3. Contact Information, and finally, his 4. professional experience in the form of a list.

asp.net 2.0 ajax 1.0 C# user controls properties

I. first we start by setting up the ajax tabs, to follow the pattern we set above.

<ajaxToolkit:TabContainer ID="tbCandidate" runat="server" ActiveTabIndex="0">
               <ajaxToolkit:TabPanel ID="step1" runat="server" HeaderText="Personnal Information">
                   <ContentTemplate>
                   </ContentTemplate>
               </ajaxToolkit:TabPanel>
               <ajaxToolkit:TabPanel ID="TabPanel1" runat="server" HeaderText="Professional Information">
                   <ContentTemplate>
                   </ContentTemplate>
               </ajaxToolkit:TabPanel>
               <ajaxToolkit:TabPanel ID="TabPanel2" runat="server" HeaderText="Contact Information">
                   <ContentTemplate>
                   </ContentTemplate>
               </ajaxToolkit:TabPanel>
               <ajaxToolkit:TabPanel ID="TabPanel3" runat="server" HeaderText="Professional Experience">
                   <ContentTemplate>
                   </ContentTemplate>
                   <HeaderTemplate>
                       Experience
                   </HeaderTemplate>
               </ajaxToolkit:TabPanel>
           </ajaxToolkit:TabContainer>

II. Now, let's create a user controls for each step, this will help us organize our tabs content, as well as keep code somewhat clean and organized.

The 4 user controls above are empty. we will place each one in its own tab. for the DataEntryControls folder, we will look at it later on.

III. Next, we will start by putting up the controls inside the user controls, which will set up our data entry screens. (for the sake of simplicity, we will have reduced Number of fields, 2 to 3 by user control, by tab).

Personnal Information :