Loading UserControl Dynamically in UpdatePanel

In this post, I will show you how to load different user control in UpdatePanel from different menu item click. I have found a lot of request in Asp.net Ajax Forum and some of them are having misconception about this. Once you complete reading this post you will be able to load controls dynamically and learn how to employ different helper controls like UpdateProgress, ModalPopupExtender while the UserControl is loading. First let us create plain page without the ajax support:

Markup:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="PlainSampleMenu.aspx.cs" Inherits="PlainSampleMenuPage" %>

Plain Sample Menu

Code Behind:

using System; using System.Web; using System.Web.UI; using System.Web.UI.WebControls;

public partial class PlainSampleMenuPage: System.Web.UI.Page { private const string BASE_PATH = "~/DynamicControlLoading/";

private string LastLoadedControl { get { return ViewState["LastLoaded"] as string; } set { ViewState["LastLoaded"] = value; } }

private void LoadUserControl { string controlPath = LastLoadedControl;

if (!string.IsNullOrEmpty(controlPath)) { PlaceHolder1.Controls.Clear; UserControl uc = (UserControl)LoadControl(controlPath); PlaceHolder1.Controls.Add(uc); } }

protected void Page_Load(object sender, EventArgs e) { LoadUserControl; }

protected void Menu1_MenuItemClick(object sender, MenuEventArgs e) { MenuItem menu = e.Item;

string controlPath = string.Empty;

switch (menu.Text) { case "Load Control2": controlPath = BASE_PATH + "SampleControl2.ascx"; break; case "Load Control3": controlPath = BASE_PATH + "SampleControl3.ascx"; break; default: controlPath = BASE_PATH + "SampleControl1.ascx"; break; }

LastLoadedControl = controlPath; LoadUserControl; } }

As you can see we are loading the UserControls in the PlaceHolder Control on different menu item click. If you are wondering why I am also loading the controls in Page Load event based upon the ViewState, the reason is otherwise those dynamically loaded controls will not be visible in the consequent postbacks. There are few good articles written by on dynamically loading Controls which you will find in the following links:

Now let us ajaxify this page, lets wrap the PlaceHolder with an UpdatePanel control. The following shows the markup:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="SampleMenu1.aspx.cs" Inherits="SampleMenuPage1" %>

Sample Menu

Since the Menu control resides outside the UpdatePanel we will also need a AsyncPostBackTrigger for the Menu Control. Now run this page, you will find the controls are loaded without a full postback.

Now let us further enhance this page with UpdateProgress and AjaxControlToolKit's ModalPopupExtender. First with the UpdateProgress Control.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="SampleMenu1.aspx.cs" Inherits="SampleMenuPage1" %>

Sample Menu - UpdateProgress

Loading....

As you can see we have added a UpdateProgress Control in the UpdatePanel ContentTemplate. But the UpdateProgress does not get visible when you click any of the menu item. This is the true nature of UpdatePanel, it does not shows the UpdateProgress if the control is out side the UpdatePanel which caused the postback. We have to manually show the UpdateProgress by the JavaScript code like the following: