Using jQuery's Dialog in Conjuction with .Net Postbacks

In a recent Asp.Net/C# project I needed to figure out a way to use a jQuery dialog box along with the built-in jQuery buttons and still do a button postback to my asp.net page. This post explains how I went about accomplishing this.

First, on my form I created my <div> which would be used as my jQuery dialog box.

<div id="dialog" style="display:none" title="Test Dialog">
This is my test dialog.
</div>

Then on my form, I created the button which I wanted to use to catch the onClick event. Keep in mind, this button won't actually do anything except provide the onClick event, we'll actually make it invisible to the user by setting display:none in the style:

<asp:button style="display:none" runat="server" id="btnPost" text="" onclick="btnPost_click">
</asp:button>

Finally, here's the javaScript jQuery code that will run the dialog box:

<script>

        $(document).ready(function() {
            $('#dialog').dialog({
                modal: true,
                autoOpen: false
                buttons: {
                    "Cancel" : function () {
                        $(this).dialog("close");
                    },
                    "OK" : function () {
                        <asp:literal id="litBtnPost" runat="server">
                    }
               }
            });
        });
        
</script>

Notice in here is a asp:Literal control. This control will actually contain a bit of javaScript that will call the postback as if it were clicked from the actual asp:button itself. To set it, in the page_load of your code behind, do this:

    litBtnPost.Text = string.Format("{0};", Page.ClientScript.GetPostBackEventReference(btnPost, string.Empty));

So now all you need is a way to trigger the dialog box:

    <a href="javascript: void(0);" onclick="$('#dialog').dialog('open');">Show Dialog</a>

When the OK button is clicked, a .net postback will occur on your page and will be handled by the btnPost_click event.