An Interactive jQuery Modal Popup Control for .NET

• Download source - 239.7 KB

Introduction

The purpose of this tip is to give you an example of how you can get a parent page to interact with a JQuery modal popup control. I tried to stay away from using the AJAX update panel found in another example of mine found here. In this sample I have therefore made use of page callbacks to achieve a similar task.

Background

You will need a good understanding on jQuery, Javascript and C# code.

Using the Code

It is really easy to use the control. Just ensure to refrence the control onto your page. Ensure to 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.
// And assign which value will be used by your dropdown list at the default selected value
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;

    //Set the default value of your modal pop-up's drop down value
    PopMessageControl1.SelectedValue = "Correct";
    //uncomment the below item if you wish to se the default value to the 'wrong' field
    //PopMessageControl1.SelectedValue = "Wrong";

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

The jQuery modal pop-up window is initiated after a server side button is clicked on the parent page. Once the post back is invoked the modal window will register a 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 be solely responsible for handling your modal popup messages.

/// Registers client script that will execute on the client browser.
/// This will open up the JQuery modal window   
public void Show()
{
    this.Page.ClientScript.RegisterStartupScript(this.GetType(), "popUpMessage", "showMessageDialog();", true);

    if (!string.IsNullOrEmpty(SelectedValue))
    {
        ddlActions.SelectedValue = SelectedValue;
    }
}

When the "OK" button is clicked within the Modal pop-up control: The modal windows makes use of a page callbacks to return data (In the form of a JSON string) back to the server. This data can be used for server validation to stored into a Database if desired. Once the callback completes a new JSON message is sent back to the client webform. The client side code will now decide what will happen next depending on the contents of that message. In my example if the user made the correct selection from the drop down list: the final modal control's post back event will be triggered.

// Recieve the callback event argument
public void RaiseCallbackEvent(string eventArgument)
{
    JavaScriptSerializer serializer = new JavaScriptSerializer();

    // Deserialize the incoming JSON message into a Dictionary object
    Dictionary<string,> input = (Dictionary<string,>)serializer.Deserialize(
       eventArgument, typeof(Dictionary<string,>));

    //dicide what to do depending on what the user selected on the web form
    if (input.Keys.Contains("value"))
    {
        Items = new Dictionary<string,>();
        switch (input["value"])
        {
            case "Correct":
                //set the return message to true - as we have decided 
                //that user made the correct selection
                Items.Add("success", "true");
                break;

            case "Wrong":
                //the user chose the wrong selection - lets tell the user he made a mistake
                Items.Add("success", "false");
                Items.Add("msg", "You chose the wrong action.");
                break;
        }
    }

    if (Items != null)
    {
        //send the mssage back to the client in a JSON format
        this.Message = serializer.Serialize(Items);
    }
}</string,></string,></string,></string,>

Once the postback occurs the PopupMessageHandler will be invoked. At this point you can decide to use the SelectedValue property as I did below. Or you can redirect to another page if desired.

// Decide what you want to do once the user has clicked on the "OK" btton,
// 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)
{
    //cast the sender object to the correct type
    PopMessageControl control = (PopMessageControl)sender;

    //take the SelectedValue that was set within the control
    if (!string.IsNullOrEmpty(control.SelectedValue))
    {
        lblAction.Text = "You chose: '" + control.SelectedValue + "'";
    }         
}