Question

I’m new to jQuery and I want to do this simple thing in a ASP.Net application:

I have a button in the the form and which when clicked I want to execute some server side code. BUT I want the user confirmation first, given through a jQuery modal dialog.

Which of the following approaches is correct:

1) Put the ASP.Net button (server control who’s OnClick is linked to the server side event) in the form and use jQuery to open the dialog when clicked:

<script ...>
    $(document).ready(function ()
    {
        $("#ConfirmDialog").dialog(
        {
            autoOpen: false,
            modal: true,
            buttons: {
                'Yes': function () { return true; },
                'No': function () { return false; }
            }
        });

        $("#<%= SubmitButton.ClientID %>").click(function (event) {
            event.preventDefault();
            $("#ConfirmDialog").dialog('open');
        });
    });
</script>
...
<div id="ConfirmDialog"></div>
...
<asp:Button ID="SubmitButton" runat="server" 
        Text="Submit" OnClick="Submit_Click" />

2) Put the ASP.Net Button (server control) in the div used as the confirmation dialog and put a HTML button (non server control) in the form for the user to click.

<script ...>
    $(document).ready(function ()
    {
        $("#ConfirmDialog").dialog(
        {
            autoOpen: false,
            modal: true
        });

        $("#SubmitButton").click(function (event) {
            $("#ConfirmDialog").dialog('open');
        });
    });
</script>
...
<div id="ConfirmDialog">
    <asp:Button ID="SubmitButton" runat="server" 
            Text="Yes" OnClick="Submit_Click" />        
    ...
</div>
...
<input id="SubmitButton" type="button" value="Submit" />

I’m going with the first approach but can’t make it work, is it ok to do event.PreventDefault() and then just return true; in the Yes button?

Answer 1

The 2nd approach is more correct. If you think about it, you want to use server-side controls when you want some interaction with the server. In this case, you don’t want to interact with the server, but put up a client-side modal dialog, which requires zero interaction with the server to accomplish.

I’d use the following (untested):

<script ...>
    $(document).ready(function ()
    {
        $("#ConfirmDialog").dialog(
        {
            autoOpen: false,
            modal: true
        });

        $("#SubmitButtonClient").click(function (event) {
            $("#ConfirmDialog").dialog('open');
        });
    });
</script>
...
<div id="ConfirmDialog">
    <asp:Button ID="SubmitButton" runat="server" 
            Text="Yes" OnClick="Submit_Click" />        
    ...
</div>
...
<input id="SubmitButtonClient" type="button" value="Submit" />

All I changed was the id of the client-side submit button. In this approach, you don’t need to do event.PreventDefault(). Note that I haven’t tested the above code.

However, since jQuery is very AJAX-oriented, you generally don’t want to do a server postback to accomplish your “button press”, but use an AJAX post. This will prevent the entire page from reloading, and you can adjust your page as needed. See the ajax() method in jQuery for some examples. You’ll notice that in ASP.NET MVC you don’t see nearly as many server-side controls, but a richer integration with jQuery. This is the general direction Microsoft is headed – fewer server controls and more AJAX-level integration.