Trying to get usercontrol URL's to load on a button click event. When I click the button, the tab is created, but the usercontrol is not loaded into the tab. If I create a static tab in the aspx page, then the user control will load.
protected void Button1_Click(object sender, EventArgs e) { ContentTabItem Tab = new ContentTabItem(); Tab.Text = "hello world"; Tab.UserControlUrl = "Test1.ascx"; Tab.DataBind(); WebTab1.Tabs.Add(Tab); WebTab1.DataBind(); }
<asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
<ig:WebTab ID="WebTab1" runat="server" Height="800px" Width="860px" TabOrientation="Horizontal" TabLocation="TopLeft" SelectedIndex="0" EnableActivation="true" StyleSetName="Office2007Blue" EnableEmbeddedJavaScript="true"> <AddNewTabItem Enabled="true" TextForNewTab="Untitled" EnableTextEditingOnDoubleClick="true" /> <CloseButton Enabled="true" /> <PostBackOptions EnableAjax="true" EnableLoadOnDemand="true" EnableLoadOnDemandUrl="true" /> <ClientEvents TabAdded="TabAddedHandler" /> <AjaxIndicator Enabled="True" Location="MiddleCenter" /> <Tabs> <ig:ContentTabItem runat="server" Text="Tab 1"> <Template> <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> </Template> </ig:ContentTabItem> <ig:ContentTabItem runat="server" Text="Tab2" UserControlUrl="~/Test1.ascx" > </ig:ContentTabItem> </Tabs> </ig:WebTab>
</ContentTemplate> </asp:UpdatePanel>
Hi,
If you have EnableLoadOnDemand, then you should remove all validations for IsPostBack from logic of your user controls, because it has no sence. That property will be false only for UserControl located in initially selected tab (defined in aspx or 0).IsPostBack is a global feature and it is not related to first instantiation of any Control/UserControl located in form, but it is related to form by itself.
Note:If you want to load a single user control at any time, then you should not use EnableAjax and/or do not put WebTab inside UpdatePanel. Because dot-net framework does not support skipping once loaded control wihin its async postbacks. Please read notes about that which I gave in previous response.
Viktor,
I couldn't get your example to work.
When the page is first loaded (i.e. IsPostBack=false), only page_load of UserControl1 is executed. When I now click on tab 2, page_load of both the user controls are executed and the IsPostBack=true. The code in the page_load event of UserControl2 does not fire because of the IsPostBack=true. This means both the user controls are loaded during the initial page load. How do I load the user control only for the active tab and unload for all the inactive tabs? I would appreciate your response!
Thanks
Below is example for you which configures WebTab in aspx and loads content of selected tab only. It loads contents of other selected tabs asynchronously when corresponding tab gets selected. As I mentioned before architecture of dot-net EventValidation does support skipping once loaded control while async postbacks, it means once loaded tabs will be reloaded. If you enable EnableLoadOnDemandViewState, then after full postback (Button1), only selected tab will be loaded and so on like on initial load. However, view states of all children of not loaded tabs will be lost. If you want to keep viewstates of once loaded tabs, then you should not use EnableLoadOnDemandViewState.
To verify that only selected tab is loaded, you may set break point in your user controls and watch when they are hit. You also may look at generated html (or use DOM debuggers of browsers) to confirm that it contains user control of only selected tab.
<ig:WebTab ID="WebTab1" runat="server" Height="200px" Width="300px"> <Tabs> <ig:ContentTabItem runat="server" Text="Tab 1" UserControlUrl="WebUserControl.ascx"> </ig:ContentTabItem> <ig:ContentTabItem runat="server" Text="Tab 2" UserControlUrl="WebUserControl2.ascx"> </ig:ContentTabItem> <ig:ContentTabItem runat="server" Text="Tab 3" UserControlUrl="WebUserControl.ascx"> </ig:ContentTabItem> </Tabs> <PostBackOptions EnableAjax="True" EnableLoadOnDemand="True" EnableLoadOnDemandViewState="False" /></ig:WebTab><asp:Button ID="Button1" runat="server" Text="Button" />
Hey Viktor,
Could you please provide a sample that does what you are saying?
Hi Tim,
If you use latest service release (last 1-2 months), then your first scenario should work. Content panes of dynamically created tabs will be loaded.
If you enable EnableLoadOnDemand, then you may write contents of all tabs with user controls into aspx and only selected tab will be loaded (your second scenario).
Note: if you use async postbacks (tab inside of UpdatePanel or EnableAjax is enabled), then on initial load only selected tab will be loaded. If another tab is selected, then its content pane will be loaded. However, once loaded content panes of tabs will be reloaded too. That is the limitation of EventValidation of dot-net AJAX framework. If full postback happens, then only content of currently selected tab will be loaded.