Click here to Skip to main content
Click here to Skip to main content

Returning a value from a modal popup

, 3 Mar 2011
Rate this:
Please Sign up or sign in to vote.
How to return a value from a modal popup.

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.

SourcePage.jpg

<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:

  1. ASP Server-Side JavaScript-like Calendar Popup
  2. ASP.NET AJAX Control Toolkit ModalPopupExtender Control in Action

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Omar Gameel Salem
Software Developer
Australia Australia
Enthusiastic programmer/researcher, passionate to learn new technologies, interested in problem solving,data structures, algorithms and automation.
 
If you have a question\suggestion about one of my articles, or you want an algorithm implemented in C#, feel free to contact me.
Follow on   LinkedIn

Comments and Discussions

 
QuestionUpdate Panel and the Delegates Pinmemberhaduken0330-Jul-14 16:41 
Answersimple js/ajax caledar Pinmembershanid36015-Jun-12 22:57 
GeneralRe: simple js/ajax caledar PinmemberOmar Gamil15-Jun-12 23:06 
GeneralMy vote of 5 Pinmembermanoj kumar choubey28-Mar-12 0:23 
GeneralMy vote of 5 PinmemberOmarMahmoudSayed17-Oct-11 23:46 
GeneralMy vote of 5 PinmemberRaheel Afzal Khan24-Apr-11 5:39 
GeneralMy vote of 4 PinmemberMonjurul Habib2-Apr-11 10:42 
GeneralMy vote of 5 PinmemberMonjurul Habib3-Mar-11 6:59 
GeneralMy vote of 5 PinmemberSlacker0073-Mar-11 5:26 
GeneralRe: My vote of 5 PinmemberOmar Gamil3-Mar-11 5:39 
GeneralDumb Question... Pinmemberkaschimer28-Feb-11 6:14 
GeneralRe: Dumb Question... PinmemberOmar Gamil28-Feb-11 6:37 
GeneralRe: Dumb Question... PinmemberJV999928-Feb-11 22:17 
GeneralRe: Dumb Question... PinmemberOmar Gamil1-Mar-11 2:58 
GeneralRe: Dumb Question... PinmemberJV99991-Mar-11 3:27 
GeneralMy vote of 3 PinmemberSlacker00728-Feb-11 5:43 
GeneralRe: My vote of 3 PinmemberOmar Gamil28-Feb-11 6:39 
GeneralRe: My vote of 3 PinmemberSlacker00728-Feb-11 6:51 
GeneralRe: My vote of 3 PinmvpDave Kreskowiak3-Mar-11 3:57 
GeneralRe: My vote of 3 PinmemberAndre K10-Mar-11 15:59 
GeneralRe: My vote of 3 PinmemberOmar Gamil10-Mar-11 21:49 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140827.1 | Last Updated 3 Mar 2011
Article Copyright 2011 by Omar Gameel Salem
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid