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:

Javascript used:

// ").val());
                        },
                        "Cancel": function () {
                            $(this).dialog("close");
                        }
                    }
                });
            });
        });
        function showjQueryDialog() {
            //check to see how many checkboxes there are and how many of those are checked.
            //if any of the checkboxes are not selected then show dialog box.
            var TotalNumCheckboxes = $("#ContentContainer input:checkbox").length;
            var TotalNumCheckboxesChecked = $("#ContentContainer input:checkbox:checked").length;

            if (TotalNumCheckboxes == TotalNumCheckboxesChecked)
            {
                eval($("#<%= MsgBoxContinue.ClientID %>").val());
            }
            else
            {
                $("#MsgBox").dialog("open");
            }
        } 
    
// ]]>

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.";
        }