Use User control as popup page in ASP.Net

In this article I will show how to use a user control as a pop up using Ajax modal popup extender. To do this I consider a simple scenario. Suppose I have an asp page which contains a button. When click the button a user control will appear as a popup.



Figure1: Add Group button with pop up page.

When the Add Group Button is clicked the popup will appear as the Figure1. In this article we will see how can we add user control as pop up and how the pop up page save data and close automatically.

Step1: First I add a user control in my project.

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<asp:Panel ID="PanelMain" runat ="server" >

<table style="width: 100%;">

<tr>

<td colspan ="2">

<asp:Label ID="lblError" runat="server" ForeColor="#CC0000">asp:Label>

td>

tr>

<tr>

<td>

<asp:Label ID="Label4" runat="server" Text="Camp">asp:Label>

td>

<td>

<asp:Label ID="lblCamp" runat="server" Text="">asp:Label>

td>

tr>

<tr>

<td>

<asp:Label ID="Label1" runat="server" Text="Name">asp:Label>

td>

<td>

<asp:TextBox ID="txtGroupname" runat="server">asp:TextBox>

td>

tr>

<tr>

<td>

<asp:Label ID="Label2" runat="server" Text="Max In Group">asp:Label>

td>

<td>

<asp:TextBox ID="txtMaxInGroup" runat="server">asp:TextBox>

<cc1:FilteredTextBoxExtender ID="fteMaxInGroup" runat="server"

TargetControlID="txtMaxInGroup" FilterType="Custom, Numbers"

ValidChars="+-()." />

td>

tr>

<tr>

<td>

<asp:Label ID="Label3" runat="server" Text="Min In Group">asp:Label>

td>

<td>

<asp:TextBox ID="txtMinInGroup" runat="server">asp:TextBox>

<cc1:FilteredTextBoxExtender ID="fteMinInGroup" runat="server"

TargetControlID="txtMinInGroup" FilterType="Custom, Numbers"

ValidChars="+-()." />

tr>

<tr>

<td>

td>

<td>

<asp:Button ID="btnSave" runat="server" Text="Save" OnClientClick="__doPostBack(sender,e);"

onclick="btnSave_Click" />

<asp:Button ID="btnCancel" runat="server" Text="Cancel" OnClientClick “=find('addGroup').hide();return false;" />

td>

tr>

table>

asp:Panel>

I have two buttons in the popup page Save button and Cancel button. I add” OnClientClick="__doPostBack(sender,e);" on save button so that it will postback to save the data and OnClientClick = "$find('addGroup').hide();return false;" in Cancel button so that when click the Cancel button the pop up page closed.

Step2: Now I add the user control in asp page so that it can pop up the page when click the Add Group button.

<%@ Register Src="~/Controls/SummerCamp/SummerCampGroup.ascx" TagName="SummerCampGroup" TagPrefix="uc1" %>

<asp:Button ID="btnAddcampGroup" runat="server" Text="Add Group" OnClientClick="__doPostBack(sender,e);" />

<asp:Panel ID="ModalPanel" runat="server" Style="display: none; border-width: 1px;"

BackColor="Gray">

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<ContentTemplate>

	<uc1:SummerCampGroup ID="SummerCampGroup1" runat="server" />

ContentTemplate>

asp:UpdatePanel>

<ajaxToolkit:ModalPopupExtender ID="ModalPopup" runat="server" TargetControlID="btnAddcampGroup"

PopupControlID="ModalPanel" BackgroundCssClass="modalBackground" DropShadow="true"

PopupDragHandleControlID="Panel3" BehaviorID="addGroup" />

asp:Panel>

In my case the user control name is SummerCampGroup. So in the top of the page I Register the user control. Then add the user control using <uc1:SummerCampGroup ID="SummerCampGroup1" runat="server" /> line.

The main problem is that the Save button is in user control page. For that reason the pop up does not hide in server side. Now we see how we can do that.

In code behind page of user control I add an event close

public partial class SummerCampGroup : System.Web.UI.UserControl

{

public delegate void CloseModal();

public event CloseModal Close;

protected void Page_Load(object sender, EventArgs e)

{

lblCamp.Text = CurrentSession.CurrentSummerCamp;

}

}

Now I add the close event for my using user control in aspx page’s Page_Load method as follows.

SummerCampGroup1.Close += new SRMS.Summer.Controls.SummerCamp.SummerCampGroup.CloseModal(SummerCampGroup1_Close);

void SummerCampGroup1_Close()

{

this.ModalPopup.Hide();

}

The SummerCampGroup1_Close() method just close the modalpop up from server side.

Step4: Now I add a method in user control which call the close event. The method will call when I need to close the popup.

public void CloseMe()

{

if (Close != null)

Close();

}

Step5: Finally I add event handler for save button in user control which save the data in database and close the popup.

protected void btnSave_Click(object sender, EventArgs e)

{

// Code for add data in database

// Close method just call so that the popup close after save the data

CloseMe();

}