A Postback Modal jQuery Popup Message

• Download source - 230 KB

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 3^rd 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"));
          
}