Reddybrek.com

How to use a JQuery UI modal box with asp.net

Filed under C# , General , jQuery

View Demo | Download Source

I was recently asked to look into making a JQuery UI dialog box (aka a modal box) work with asp.net. I thought it would be straight forward but as with anything in asp.net it turned out to be a little bit trickier than I had initially thought. Part of the problem was that I wanted to put the dialog box on an asp.net submit button and depending on the user's choice either submit the page or cancel the action.

Thankfully I stumbled across this great article over at DeviantPoint. It was pretty much exactly what I needed. However, for my example I needed to only show the dialog box if any of the checkboxes on the screen were not selected. In other words a normal postback would occur if every check was selected but if there were any checkboxes not selected the user would be asked to confirm their action.

If you take a look at my very basic demo page you will see exactly what I'm talking about. You will find all of the code within the source files I have posted for download but below is a brief overview of what is going on.

View Demo | Download Source

HTML used:

    
    
    

        
This is a top class widget. Features include...
        
        

    
        

            Below are the required items for this product to function correctly:

            Required Item 1
            Required Item 2

            Required Item 3 
            Required Item 4

        
    

    

        For this widget to function correctly you need to make sure you have all the required parts. Are you sure you wish to continue?

    

    

        
    

    

Javascript used:

C# Codebehind:

if (!Page.IsPostBack)
        {
            //this line is used to hold the exact postback function call used by the asp.net button
            this.MsgBoxContinue.Value = Page.ClientScript.GetPostBackEventReference(AddToBasket, string.Empty);

            //ensure the postback message is blank on load
            PostBackMsgTest.Text = ""; 
        }

        if (Page.IsPostBack)
        {
            PostBackMsgTest.Text = "Content posted back successfully.";
        }