How to use same user control multiple times in aspx page

Question

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) {
               UDTControlFuncAscx("abc");
           }
           if (ActiveIndex == 1) {
               UDTControlFuncAscx("xyz");
           }
           if (ActiveIndex == 2) {
               UDTControlFuncAscx("mno");
           }
       }
 </script>
  <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
      <cc1:TabContainer ID="DashboardContainer" runat="server"OnClientActiveTabChanged="ActiveTabChanged" >
             <cc1:TabPanel ID="TabPanel1" runat="server" HeaderText="abc">
                 <UserControl:UDTControl ID="id1" runat="server"/>
             </cc1:TabPanel>
             <cc1:TabPanel ID="TabPanel2" runat="server" HeaderText="xyz">>
                   <UserControl:UDTControl ID="id2" runat="server"/>
             </cc1:TabPanel>
             <cc1:TabPanel ID="TabPanel3" runat="server" HeaderText="mno">>
                   <UserControl:UDTControl ID="id3" runat="server"/>
              </cc1:TabPanel>                
     </ContentTemplate>
</asp:UpdatePanel>
</asp:Content>

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
         }
     }
 </script>

<asp:UpdatePanel ID="DashboardPanel" runat="server">
    <ContentTemplate>
         <asp:Panel ID="Dashboard1" runat="server">
             <table id="tableid" > </table>
        </asp:Panel>
    </ContentTemplate>          
</asp:UpdatePanel>

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.