Click here to Skip to main content
12,405,543 members (63,714 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as

Stats

56.7K views
3K downloads
41 bookmarked
Posted

Returning a value from a modal popup

, 3 Mar 2011 CPOL
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, AI, machine learning and nlp.

Amateur guitarist/ keyboardist, squash player.

You may also be interested in...

Comments and Discussions

 
QuestionUpdate Panel and the Delegates Pin
haduken0330-Jul-14 16:41
memberhaduken0330-Jul-14 16:41 
Answersimple js/ajax caledar Pin
shanid36015-Jun-12 22:57
membershanid36015-Jun-12 22:57 
GeneralRe: simple js/ajax caledar Pin
Omar Gamil15-Jun-12 23:06
memberOmar Gamil15-Jun-12 23:06 
GeneralMy vote of 5 Pin
manoj kumar choubey28-Mar-12 0:23
membermanoj kumar choubey28-Mar-12 0:23 
GeneralMy vote of 5 Pin
OmarMahmoudSayed17-Oct-11 23:46
memberOmarMahmoudSayed17-Oct-11 23:46 
GeneralMy vote of 5 Pin
Raheel Afzal Khan24-Apr-11 5:39
memberRaheel Afzal Khan24-Apr-11 5:39 
GeneralMy vote of 4 Pin
Monjurul Habib2-Apr-11 10:42
memberMonjurul Habib2-Apr-11 10:42 
GeneralMy vote of 5 Pin
Monjurul Habib3-Mar-11 6:59
memberMonjurul Habib3-Mar-11 6:59 
GeneralMy vote of 5 Pin
Slacker0073-Mar-11 5:26
memberSlacker0073-Mar-11 5:26 
GeneralRe: My vote of 5 Pin
Omar Gamil3-Mar-11 5:39
memberOmar Gamil3-Mar-11 5:39 
GeneralDumb Question... Pin
kaschimer28-Feb-11 6:14
memberkaschimer28-Feb-11 6:14 
GeneralRe: Dumb Question... Pin
Omar Gamil28-Feb-11 6:37
memberOmar Gamil28-Feb-11 6:37 
GeneralRe: Dumb Question... Pin
JV999928-Feb-11 22:17
memberJV999928-Feb-11 22:17 
GeneralRe: Dumb Question... Pin
Omar Gamil1-Mar-11 2:58
memberOmar Gamil1-Mar-11 2:58 
GeneralRe: Dumb Question... Pin
JV99991-Mar-11 3:27
memberJV99991-Mar-11 3:27 
GeneralMy vote of 3 Pin
Slacker00728-Feb-11 5:43
memberSlacker00728-Feb-11 5:43 
GeneralRe: My vote of 3 Pin
Omar Gamil28-Feb-11 6:39
memberOmar Gamil28-Feb-11 6:39 
GeneralRe: My vote of 3 Pin
Slacker00728-Feb-11 6:51
memberSlacker00728-Feb-11 6:51 
GeneralRe: My vote of 3 Pin
Dave Kreskowiak3-Mar-11 3:57
mvpDave Kreskowiak3-Mar-11 3:57 
GeneralRe: My vote of 3 Pin
Andre K10-Mar-11 15:59
memberAndre K10-Mar-11 15:59 
GeneralRe: My vote of 3 Pin
Omar Gamil10-Mar-11 21:49
memberOmar Gamil10-Mar-11 21:49 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    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 | Terms of Use | Mobile
Web02 | 2.8.160721.1 | Last Updated 3 Mar 2011
Article Copyright 2011 by Omar Gameel Salem
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid