Click here to Skip to main content
Click here to Skip to main content
Go to top

A Postback Modal jQuery Popup Message

, 16 Mar 2012
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.

Comments and Discussions

 
QuestionHow can i make this work in ASP.Net but using VB Pinmembertemplek29-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 PinmemberMember 88385662-May-12 3:10 
QuestionDialog width is not setting PinmemberJoel WZ27-Mar-12 6:16 
AnswerRe: Dialog width is not setting PinmemberUberGeoff27-Mar-12 23:32 
GeneralRe: Dialog width is not setting PinmemberJoel WZ28-Mar-12 6:58 
GeneralRe: Dialog width is not setting PinmemberUberGeoff28-Mar-12 10:42 
QuestionDialog styling PinmemberJoel WZ27-Mar-12 3:59 
AnswerRe: Dialog styling PinmemberUberGeoff27-Mar-12 4:55 
AnswerRe: Dialog styling PinmemberJoel WZ27-Mar-12 6:04 
AnswerHow about ajax? PinmemberNeetflash19-Mar-12 6:09 
GeneralRe: How about ajax? PinmemberUberGeoff19-Mar-12 21:43 
GeneralRe: How about ajax? PinmemberUberGeoff26-Mar-12 5:28 
GeneralGood job Pinmembertrbznl17-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 | Mobile
Web01 | 2.8.140916.1 | Last Updated 16 Mar 2012
Article Copyright 2012 by UberGeoff
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid