Returning a value from a modal popup

Omar Gameel Salem

4.81/5 (11 votes)

Feb 28, 2011

CPOL

2 min read

94352

3256

How to return a value from a modal popup.

Download source code - 1.1 MB

Introduction

You know how in Facebook when you click Add as Friend, this popup appears:

Once you click Send Request, the Add as Friend changes to Friend Request Sent. Without refreshing the page, how can we do this is in .NET?

Dissection

We'll place the popup in a User Control.

User Control

This is a modal pop containing whatever business we want to handle. For the sake of demonstration, let the popup display a calendar and return the selected date into the source page's textbox.

<%@ Control Language="C#" 
     AutoEventWireup="true" CodeFile="CalendarControl.ascx.cs"
     Inherits="CalendarControl" %>
<%@ Register Assembly="AjaxControlToolkit" 
             Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<link href="Styles/Control.css" rel="stylesheet" type="text/css" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:Panel ID="Panel1" runat="server" 
                   BackColor="White" Style="display: none">
            <asp:Calendar ID="Calendar1" runat="server" 
                OnSelectionChanged="Calendar1_SelectionChanged"
                OnVisibleMonthChanged="Calendar1_VisibleMonthChanged"></asp:Calendar>
            <asp:ImageButton ID="btnClose" runat="server" 
                ImageUrl="~/Images/fancy_close.png"
                class="fancybox-close" OnClick="btnCloseMsg_Click" />
        </asp:Panel>
        <asp:ModalPopupExtender ID="Panel1_ModalPopupExtender" 
            runat="server" BackgroundCssClass="overlay_style"
            DropShadow="true" DynamicServicePath="" 
            Enabled="True" PopupControlID="Panel1"
            TargetControlID="FakeButton">
        </asp:ModalPopupExtender>
        <asp:Button ID="FakeButton" runat="server" Style="display: none" />
    </ContentTemplate>
</asp:UpdatePanel>

Source Page

Just the textbox where we want our result to return to, and a button to display the popup.

<head runat="server">
    <title>Test</title>
</head>
<body>
    <form runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            <asp:Button ID="btnGetDate" runat="server" 
                 Text="Get Date" OnClick="btnGetDate_Click" />
            <uc1:CalendarControl ID="ucCalendar" 
                 runat="server" OnDateSelected="OnDateSelected" />
        </ContentTemplate>
    </asp:UpdatePanel>
    </form>
</body>
</html>

Please note that the textbox is contained in an UpdatePanel.

Problem

The main issue is: how to make the calling page feel your custom control? I.e., our control is a calendar, we want the textbox in the source page to see the date we just selected.

I came across the following solutions:

Both are good, but I wanted something simpler without the fuss of JavaScript or iFrames, so I decided to use a different approach.

Solution

The answer is Event Bubbling.

In Our User Control

We will need a delegate, and an event based on that delegate.

public delegate void DateSelectedHandler(DateTime dtDateSelected);
public event DateSelectedHandler DateSelected;

Note how we gave the delegate an argument of the same type as the value we want returned (DateTime). Then, we create a new event of the same type as the delegate.

Now, in the Calendar1_SelectionChanged event, let's call the event instance we just created.

if (DateSelected != null)
    DateSelected(Calendar1.SelectedDate);

What we did is simply pass the value to our custom public event. Now, this event is exposed to our source page. This is Event Bubbling, events are propagated up the hierarchy (remember, bubble sort?).

User Control Code Behind

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

public partial class CalendarControl : System.Web.UI.UserControl
{
    public delegate void DateSelectedHandler(DateTime dtDateSelected);
    public event DateSelectedHandler DateSelected;

    #region Events
    protected void Calendar1_SelectionChanged(object sender, EventArgs e)
    {
        if (DateSelected != null)
            DateSelected(Calendar1.SelectedDate);
    }
    protected void Calendar1_VisibleMonthChanged(object sender, MonthChangedEventArgs e)
    {
        this.Panel1_ModalPopupExtender.Show();
    }

    protected void btnCloseMsg_Click(object sender, ImageClickEventArgs e)
    {
        Panel1_ModalPopupExtender.Hide();
    }
    #endregion

    #region Methods
    public void Show()
    {
        this.Panel1_ModalPopupExtender.Show();
    }
    #endregion
}

Now all we have to do is exploit our custom made event.

In Our Source Page

.aspx

<uc1:calendarcontrol ondateselected="OnDateSelected" 
         runat="server" id="ucCalendar">
</uc1:calendarcontrol>

.cs

protected void OnDateSelected(DateTime dtDateSelected)
{
    TextBox1.Text = dtDateSelected.ToShortDateString();
}

Source Page Code Behind

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

public partial class Test : System.Web.UI.Page
{
    #region Events
    protected void OnDateSelected(DateTime dtDateSelected)
    {
        TextBox1.Text = dtDateSelected.ToShortDateString();
    }
    protected void btnGetDate_Click(object sender, EventArgs e)
    {
        ucCalendar.Show();
    }
    #endregion
}

Final Tip

If you want your control to stay visible on postbacks (when the user changes months, for example):

protected void Calendar1_VisibleMonthChanged(object sender, MonthChangedEventArgs e)
{
    this.Panel1_ModalPopupExtender.Show();
}

Conclusion

So that's it, build your user control, handle your business and validation, and then pass the end result. With the help of delegates and events, we were able provide a nice solution to an old problem.