<script type=”text/javascript”>

var handleTabChange = true;

function ValidatePage()

{

if(handleTabChange)

{

if (Page_ClientValidate(‘Tab1′) == false)

{

$find(“<%=TabContainerAddEnquiry.ClientID%>”).set_activeTabIndex(0);

}

else if (Page_ClientValidate(‘Tab2′) == false)

{

$find(“<%=TabContainerAddEnquiry.ClientID%>”).set_activeTabIndex(1);

}

else if (Page_ClientValidate(‘Tab3′) == false)

{

$find(“<%=TabContainerAddEnquiry.ClientID%>”).set_activeTabIndex(2);

}

}

else

{

handleTabChange = true;

}

}

</script>

From the above JavaScript you can see iam having if else statements and in that iam checking Page_ClientValidate() by passing the validation group of each and every tabpanel.

Iam having 3 tabpanels and evry tabpanel has got its own validation group set as you can see below highlighted with yellow Color. So basically you have to set separate validation group for each and every tabcontrol.

See source code here:

<EA:TabContainer ID=”TabContainerAddEnquiry” runat=”server” CssClass=”scienceEnquiry” OnClientActiveTabChanged=”SaveActiveTabIndex” ActiveTabIndex=”1″>

<EA:TabPanel ID=”tabContactDetails” runat=”server” HeaderText=”Contact Details” TabIndex=”1″>

<ContentTemplate>

<p>

<label for=”Textbox1″>

Text1:

</label>

<asp:TextBox ID=”Textbox1″ runat=”server” TextMode=”MultiLine” ValidationGroup=”Tab1″></asp:TextBox>

<asp:RequiredFieldValidator ID=”_ Textbox1ReqFieldVal” runat=”server” ControlToValidate=”Textbox1″ ValidationGroup=”Tab1″

SetFocusOnError=”True” Display=”None” ErrorMessage=”<b>Required Field Missing</b><br />Recieved Date is required.”></asp:RequiredFieldValidator>

<EA:ValidatorCalloutExtender ID=”_ Textbox1DescValExt” TargetControlID=”_Textbox Textbox1ReqFieldVal “

HighlightCssClass=”validatorCalloutHighlight” runat=”server” Enabled=”True”>

</EA:ValidatorCalloutExtender>

</p>

</ContentTemplate>

</EA:TabPanel>

<EA:TabPanel ID=”tabEnquiryDetails” runat=”server” HeaderText=”Enquiry Details” TabIndex=”2″>

<ContentTemplate>

<p>

<label for=”Textbox2″>

Text2:

</label>

<asp:TextBox ID=”Textbox2″ runat=”server” TextMode=”MultiLine” ValidationGroup=”Tab2″></asp:TextBox>

<asp:RequiredFieldValidator ID=”_ Textbox2ReqFieldVal” runat=”server” ControlToValidate=”Textbox2″ ValidationGroup=”Tab2″

SetFocusOnError=”True” Display=”None” ErrorMessage=”<b>Required Field Missing</b><br />Recieved Date is required.”></asp:RequiredFieldValidator>

<EA:ValidatorCalloutExtender ID=”_ Textbox1DescValExt” TargetControlID=”_ Textbox2ReqFieldVal “

HighlightCssClass=”validatorCalloutHighlight” runat=”server” Enabled=”True”>

</EA:ValidatorCalloutExtender>

</p>

</ContentTemplate>

</EA:TabPanel>

<EA:TabPanel ID=”tabAssignTo” runat=”server” HeaderText=”Assign To” TabIndex=”3″>

<ContentTemplate>

<p>

<label for=”Textbox3″>

Text3:

</label>

<asp:TextBox ID=”Textbox3″ runat=”server” TextMode=”MultiLine” ValidationGroup=”Tab3″></asp:TextBox>

<asp:RequiredFieldValidator ID=”_ Textbox3ReqFieldVal” runat=”server” ControlToValidate=”Textbox3″ ValidationGroup=”Tab3″

SetFocusOnError=”True” Display=”None” ErrorMessage=”<b>Required Field Missing</b><br />Recieved Date is required.”></asp:RequiredFieldValidator>

<EA:ValidatorCalloutExtender ID=”_ Textbox3DescValExt” TargetControlID=”_Textbox3ReqFieldVal “

HighlightCssClass=”validatorCalloutHighlight” runat=”server” Enabled=”True”>

</EA:ValidatorCalloutExtender>

</p>

</ContentTemplate>

</EA:TabPanel>

</EA:TabContainer>

And after setting the validation groups, I need to validate the data when in click on the submit button. So in order to validate the data in button click there is a property called OnClientClick for button control . Use this property to call the javascript like this =”javascript:ValidatePage();” and one more thing you need to do is set the validation groups for the button control as shown below:

<asp:Button ID=”_btnSubmit” runat=”server” Text=”Add Enquiry” CausesValidation=”true” ValidationGroup=”Tab1,Tab2,Tab3″ OnClick=”_btnSubmit_Click” OnClientClick=”javascript:ValidatePage();” />

This solves the problem. Happy Coding…………..

I have a DropDownList in 2 different Tab Panels in a TabContainer (from the AJAX control toolkit on ASP.NET’s website) and I discovered that the TabContainer does not maintain state on postbacks for DropDownLists.  In other words, if I am on the second tab and I changed the value of the DropDownList (w/ AutoPostBack=”true”), I always return to the first tab (index 0).

In order to solve the above problem, we have to write a piece of Code in JavaScript as show below:

<script type=”text/javascript”>

function SaveActiveTabIndex(sender, e)

{

var activetabindex = sender.get_activeTab().get_tabIndex();

setCookie(activetabindex);

}

function setCookie(value)

{

document.cookie = “tabIndex=” + escape(value) ;

}

</script>

In the tabcontainer you can set the OnClientActiveTabChanged property to call javascript as shown below:

OnClientActiveTabChanged=”SaveActiveTabIndex”

After setting the tabcontrol property to javascript and in the aspx.cs file in the pageLoad event place the below code:

protected void Page_Load(object sender, EventArgs e)

{

if (Request.Cookies["tabIndex"] != null)

{

int index = int.Parse(Server.HtmlEncode(Request.Cookies["tabIndex"].Value));

if (index > -1 && index < TabContainerAddEnquiry.Tabs.Count)

{

TabContainerAddEnquiry.ActiveTabIndex = index;

}

else

{

TabContainerAddEnquiry.ActiveTabIndex = 0;

}

}

}

This should solve the problem.

Complete Source code is given below:

Aspx Page:

<EA:TabContainer ID=”TabContainerAddEnquiry” runat=”server” CssClass=”scienceEnquiry” OnClientActiveTabChanged=”SaveActiveTabIndex” ActiveTabIndex=”1″>

<EA:TabPanel ID=”tabContactDetails” runat=”server” HeaderText=”Contact Details” TabIndex=”1″>

<ContentTemplate>

</ContentTemplate>

</EA:TabPanel>

<EA:TabPanel ID=”tabEnquiryDetails” runat=”server” HeaderText=”Enquiry Details” TabIndex=”2″>

<ContentTemplate>

</ContentTemplate>

</EA:TabPanel>

<EA:TabPanel ID=”tabAssignTo” runat=”server” HeaderText=”Assign To” TabIndex=”3″>

<ContentTemplate>

</ContentTemplate>

</EA:TabPanel>

</EA:TabContainer>

Aspx.cs i.e. CodeBehind Page:

protected void Page_Load(object sender, EventArgs e)

{

if (Request.Cookies["tabIndex"] != null)

{

int index = int.Parse(Server.HtmlEncode(Request.Cookies["tabIndex"].Value));

if (index > -1 && index < TabContainerAddEnquiry.Tabs.Count)

{

TabContainerAddEnquiry.ActiveTabIndex = index;

}

else

{

TabContainerAddEnquiry.ActiveTabIndex = 0;

}

}

}

Happy Coding………….

1. Create new Asp.Net Website

2. Add new item for XML file with the name LaptopsService.xml (Data source for DropdownList Items)

<?xml version=“1.0“ encoding=“utf-8“ ?>

<LaptopsService>

<make name=“Dell“>

<model name=“Inspiron 1111“>

<color name=“Green“ />

<color name=“Sea Green“ />

<color name=“Pale Green“ />

</model>

<model name=“Inspiron 2222“>

<color name=“Red“ />

<color name=“Bright Red“ />

</model>

<model name=“Inspiron 3333“>

<color name=“Teal“ />

<color name=“Dark Teal“ />

</model>

</make>

<make name=“Sony“ value=“Sony (value)“>

<model name=“Sony 1111“ value=“Sony 1111 (value)“>

<color name=“Azure“ value=“Azure (value)“ />

<color name=“Light Azure“ value=“Light Azure (value)“ />

<color name=“Dark Azure“ value=“Dark Azure (value)“ />

</model>

<model name=“Sony 2222“ value=“Sony 2222 (value)“>

<color name=“Silver“ value=“Silver (value)“ />

<color name=“Metallic“ value=“Metallic (value)“ />

</model>

<model name=“Sony 3333“ value=“Sony 3333(value)“>

<color name=“Cyan“ value=“Cyan (value)“ />

</model>

</make>

<make name=“IBM“ value=“IBM (value)“>

<model name=“IBM 1111“ value=“IBM 1111 (value)“>

<color name=“Blue“ value=“Blue (value)“ />

<color name=“Sky Blue“ value=“Sky Blue (value)“ />

<color name=“Racing Blue“ value=“Racing Blue (value)“ />

</model>

<model name=“IBM 2222“ value=“IBM 2222 (value)“>

<color name=“Yellow“ value=“Yellow (value)“ />

<color name=“Banana“ value=“Banana (value)“ />

</model>

<model name=“IBM 3333“ value=“IBM 3333 (value)“>

<color name=“Brown“ value=“Brown (value)“ />

</model>

</make>

</LaptopsService>

3. Add new item for AJAX-enabled WCF Service with the name Service1.svc and write the following source code

public class Service1

{

private static XmlDocument XMLDoc;

private static object LockXMLDoc = new object();

// Read XML file

public static XmlDocument Document

{

get

{

lock (LockXMLDoc)

{

if (XMLDoc == null)

{

XMLDoc = new XmlDocument();

XMLDoc.Load(HttpContext.Current.Server.MapPath(“~/App_Data/LaptopsService.xml”));

}

}

return XMLDoc;

}

}

// Hierarchy for XML elements

public static string[] Hierarchy

{

get

{

return new string[] { “make”, “model” };

}

}

[OperationContract]

public AjaxControlToolkit.CascadingDropDownNameValue[] GetDropDownContents(string knownCategoryValues, string category)

{

// Get a dictionary of known category/value pairs

StringDictionary knownCategoryValuesDictionary = AjaxControlToolkit.CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);

// Perform a simple query against the data document

return AjaxControlToolkit.CascadingDropDown.QuerySimpleCascadingDropDownDocument(Document, Hierarchy, knownCategoryValuesDictionary, category);

}

}

4. Drag and drop the following components and design the following at Default.aspx

1. Script Manager from AJAX Extensions tab in toolbox

2. Update Panel from AJAX Extensions tab in toolbox

3. Three DropDownList controls from Standard tab in toolbox and drop into Update Panel and Enable Autopostback for the 3^rd DropDownList

4. Label control from Standard tab in toolbox and drop into Update Panel

5. Three Cascading Dropdown controls from AJAX Toolkit and drop into Update Panel

5. Set the following properties to the CasecadingDropDown controls

CascadingDropDown1

TargetControlID=DropDownList1

Category=Make

PromptText=Plese Select a Laptop Make

ServiceMethod=GetDropDownContents

ServicePath=Service1.svc

CascadingDropDown2

TargetControlID=DropDownList2

Category=Model

ParentControlID=DropDownList1

PromptText=Please Select a model

ServiceMethod=GetDropDownContentsPageMethod

CascadingDropDown3

TargetControlID=DropDownList3

Category=Color

ParentControlID=DropDownList2

PromptText=Please Select a color

ServiceMethod=GetDropDownContents

ServicePath=Service1.svc

6. Write the following code in Default.aspx.cs

using System.Web.Services;

using AjaxControlToolkit;

[WebMethod]

[System.Web.Script.Services.ScriptMethod]

public static CascadingDropDownNameValue[] GetDropDownContentsPageMethod(string knownCategoryValues, string category)

{

return new Service1 ().GetDropDownContents(knownCategoryValues, category);

}

protected void DropDownList3_SelectedIndexChanged(object sender, EventArgs e)

{

string make = DropDownList1.SelectedItem.Text;

string model = DropDownList2.SelectedItem.Text;

string color = DropDownList3.SelectedItem.Text;

if (string.IsNullOrEmpty(make))

{

Label1.Text = “Please select a make.”;

}

else if (string.IsNullOrEmpty(model))

{

Label1.Text = “Please select a model.”;

}

else if (string.IsNullOrEmpty(color))

{

Label1.Text = “Please select a color.”;

}

else

{

Label1.Text = string.Format(“You have chosen a {0} {1} {2}. Nice laptop!”, color, make, model);

}

}

7. When you run the code you can see the following output

Output

8. When you select the first dropdown list then the rest of the drop downs will be populated with values. You can see the output below

Output