Click here to Skip to main content
15,124,972 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
How to use same user control multiple times in aspx page and load the user control on tab click.

I've defined an user control(UDTControl.ascx) and declared it in each tab panel. On tab click, based on tab index I'm passing the tabname to ascx function and the call the sp to load data in the table.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="temp.aspx.cs" Inherits="WebUI.temp" %>
   <%@ Register Src="Shared/UDTControl.ascx" TagName="UDTControl" TagPrefix="UserControl" %>
   <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

   <asp:Content ID="Content1" ContentPlaceHolderID="PublicContent" runat="server">
     <script type="text/javascript">
          function ActiveTabChanged(sender, e) {
              var ActiveIndex = sender.get_activeTabIndex();
              if (ActiveIndex == 0) {
              if (ActiveIndex == 1) {
              if (ActiveIndex == 2) {
     <asp:UpdatePanel ID="UpdatePanel1" runat="server">
         <cc1:TabContainer ID="DashboardContainer" runat="server"OnClientActiveTabChanged="ActiveTabChanged" >
                <cc1:TabPanel ID="TabPanel1" runat="server" HeaderText="abc">
                    <UserControl:UDTControl ID="id1" runat="server"/>
                <cc1:TabPanel ID="TabPanel2" runat="server" HeaderText="xyz">>
                      <UserControl:UDTControl ID="id2" runat="server"/>
                <cc1:TabPanel ID="TabPanel3" runat="server" HeaderText="mno">>
                      <UserControl:UDTControl ID="id3" runat="server"/>

and following is my ascx code

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="UDTControl.ascx.cs" Inherits="WebUI.Shared.UDTControl" %>
    <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>
    <%@ Register Assembly="WebUI" TagPrefix='SFX' Namespace='WebUI.Shared' %>
     <script type="text/javascript">
         function DashboardFuncAscx(ActiveTab) {
             if (ActiveTab == "abc") {
             //call abc sp using page method and load data on table
             if (ActiveTab == "xyz") {
                 //call xyz sp and load on table
    <asp:UpdatePanel ID="DashboardPanel" runat="server">
             <asp:Panel ID="Dashboard1" runat="server">
                 <table id="tableid" > </table>

What I have tried:

Currently, I'm facing an issue with above logic. This is working fine for first tab, but when i click on second tab SP is triggered and data is also fetched but the result is not showing bcz result is loaded on the first tab user control.
Updated 12-Oct-17 1:26am

1 solution

The Sender in your Method "ActiveTabChanged" has the Type Object. An Object doesn't know anything about the ".get_activeTabIndex".
You should assign the sender to a Type which corresponds to your Control and ask this element for the ".get_activeTabIndex" - I think you will now get the right answer ...
Member 12772491 12-Oct-17 9:49am
Thanks for your feedback. I'm actually getting the index id properly based on tab click and corresponding if condition is also getting executed. However the problem is different. Imagine first tab is empty and no user control, On second tab click its getting loaded and displaying correctly but when i click 3rd tab, sp is fired and data is loaded. but it is not showing on 3rd tab screen. its data is actually populated on second tab which can't be seen.
Ralf Meier 13-Oct-17 3:44am
My suggestion based on the text you wrote under "what I have tried". If you don't get an result from the Sender it might be 0. This would cause the mis-behaviour.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900