Click here to Skip to main content
11,580,653 members (67,651 online)
Click here to Skip to main content

A Postback Modal jQuery Popup Message

, 16 Mar 2012 CPOL 22.7K 1.3K 7
Rate this:
Please Sign up or sign in to vote.
This tip explains how to display a jQuery modal pop-up message using server side events.
Sample Image

Introduction

This tip explains how to display a jQuery modal pop-up message using server side events. The jQuery modal pop-up window is initiated after a server side button postback. Once the postback is invoked, the modal window will register the client side script to allow the browser to open up the pop-up window. This is useful if you need to do some sort of server side processing or validation before you want to display the pop-up. It is also useful if you don't want your client side code to handle your modal popup messages. In the end, I have created a server side control that uses the jQuery toolkit.

UPDATE - 24/02/2014

I have updated this project to make it more useful. I have included an additional "Panel" control that allows the user to add any ASP control into the custom pop-up control. The user can then code against these controls however he/she feels is appropriate allowing developers the ability to place the page controls within the pop-up modal giving this control a lot more flexibility.

Background

You will need a good understanding of jQuery, JavaScript, and C#.

Using the Code

It is really easy to use the control. Just reference the control on your page. Make sure you register the OnOkClicked event.

uc1:PopMessageControl OnOkClicked="PopMessageControl1_OK" 
ID="PopMessageControl1" runat="server" />

Set up your modal pop-up control's properties:

// Set up what you want your pop-up modal title and/or message to say.
protected void Button1_Click(object sender, EventArgs e)
{
    PopMessageControl1.Title = "This is the title";    
    PopMessageControl1.ImageUrl = "~/images/User_Male_Information.png";
    PopMessageControl1.PopupButtonSet = PopupButtonSet.OkPostback;

    //display the modal pop-up message
    PopMessageControl1.Show();
}

When the "OK" button is clicked within the modal pop-up control, the OnOkClicked event will be invoked. You can decide what to do after the event has fired. The modal window's content is wrapped inside an AJAX UpdatePanel - this will prevent the page from "hiding" the modal pop-up on the postback event, i.e., it is up to the programmer to decide what will happen after the "OK" button has been clicked inside of the modal pop-up. It is here where you would normally do some "real" business logic. In my example below, I do a simple integer increment (using ViewState to remember my increments on each postback) and on the 3rd attempt, I instruct the page to redirect effectively allowing the page to "reset" - thus the modal will no longer be visible.

// Decide what you want to do once the user has clicked on the "OK" button,
// You can either update the contents on the modal pop-up or decide to redirect
// away from this page.
protected void PopMessageControl1_OK(object sender, PopupMessageArgs e)
{
     Counter++;

     if (Counter > 3)
         Response.Redirect("Default.aspx");

     lblMessage.Text = "You clicked the 'OK' button. On the 3rd OK click attempt - this modal will close...";

     blItems.Items.Add(new ListItem(Counter + " item", "1"));
          
} 

License

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

Share

About the Author

UberGeoff
Web Developer MyMarket
South Africa South Africa
Been developing for about 7 years now. Love solving new and interesting problems. Especially enjoy web GUI projects.

Worked as a web developer for K2 SourceCode. Projects worked on: K2 WorkSpace, BlackPoint, BlackPearl and K2 for SharePoint.

Currently working at BidTravel and helping them out with their Procurement systems.

Living in sunny South Africa.

You may also be interested in...

Comments and Discussions

 
QuestionHow can i make this work in ASP.Net but using VB Pin
templek29-Dec-12 22:36
membertemplek29-Dec-12 22:36 
In Visual Studio 2008, How can i register the OnOkClicked Event ?

uc1:PopMessageControl OnOkClicked="PopMessageControl1_OK" ID="PopMessageControl1" runat="server" />

Thanks in advance....
GeneralThank you Pin
Member 88385662-May-12 3:10
memberMember 88385662-May-12 3:10 
QuestionDialog width is not setting Pin
Joel WZ27-Mar-12 6:16
memberJoel WZ27-Mar-12 6:16 
AnswerRe: Dialog width is not setting Pin
UberGeoff27-Mar-12 23:32
memberUberGeoff27-Mar-12 23:32 
GeneralRe: Dialog width is not setting Pin
Joel WZ28-Mar-12 6:58
memberJoel WZ28-Mar-12 6:58 
GeneralRe: Dialog width is not setting Pin
UberGeoff28-Mar-12 10:42
memberUberGeoff28-Mar-12 10:42 
QuestionDialog styling Pin
Joel WZ27-Mar-12 3:59
memberJoel WZ27-Mar-12 3:59 
AnswerRe: Dialog styling Pin
UberGeoff27-Mar-12 4:55
memberUberGeoff27-Mar-12 4:55 
AnswerRe: Dialog styling Pin
Joel WZ27-Mar-12 6:04
memberJoel WZ27-Mar-12 6:04 
AnswerHow about ajax? Pin
Neetflash19-Mar-12 6:09
memberNeetflash19-Mar-12 6:09 
GeneralRe: How about ajax? Pin
UberGeoff19-Mar-12 21:43
memberUberGeoff19-Mar-12 21:43 
GeneralRe: How about ajax? Pin
UberGeoff26-Mar-12 5:28
memberUberGeoff26-Mar-12 5:28 
GeneralGood job Pin
trbznl17-Mar-12 0:49
membertrbznl17-Mar-12 0: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 | Terms of Use | Mobile
Web03 | 2.8.150603.1 | Last Updated 16 Mar 2012
Article Copyright 2012 by UberGeoff
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid