jQuery UI Modal Dialogs in MVC

Question

Excuse me for the simplistic question, but I've had a hard time getting my head around this. I have a View (.cshtml) with the following contents (Per this sample):

<div id='dlgLogin'>
    <h1>Log in</h1>
    <table>
        <tr>
            <td>Username:</td>
            <td>@Html.TextBox("username")</td>
        </tr>
        <tr>
            <td>Password:</td>
            <td>@Html.Password("password")</td>
        </tr>
    </table>
</div>
<script type="text/javascript">
    $(function () {
        $("#dlgLogin").dialog({
            modal: true,
            autoOpen: true,
            resizable: false,
            buttons: {
                Login: function () {
                    // perform login
                    $.post("@Url.Action("Login", "Home")",
                    {
                        username: $('#username').val(),
                        password: $('#password').val()
                    },
                    function( data, status, xhr ) {
                        if(data.Success){
                            alert('great'); // do something
                            $('#dlgLogin').dialog("close");
                            $('#divLoginButton').load("@Url.Action("GetLoginButton", "Home")");
                        } else {
                            // do something else
                        }
                    });
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            }
        });
    });
</script>

Basically the View will always load in a jQuery UI Dialog whenever it's opened, that is, it's the responsibility of the View itself to place it's own content inside a jQuery UI dialog. I've done this so that I can override the OnAuthorzation() event of my Log In and redirect the user to a pop up when they are required to log in. I have 3 questions:

1. How would I display a loading animation (a .gif) when the form is posted back to the server? With this approach? I'm aware that if I used an Ajax.BeginForm I could have specified a UpdateTargetId which would have been used as an area to load the animation during post back, but how would I achieve that effect with this approach?

2. How would I attach and handle the success event to the form post above? i.e. When the form is posted back to the Login Action of the Home Controller.

3. I've seeing at least 3 or 4 different approaches to displaying dialogs in MVC. What is the correct way to do this? Is the approach that I posted above considered good/mvc-friendly practise, if not what do you recommend?

Answer 1

1 How would I display a loading animation (a .gif) when the form is posted back to the server?

Take a look at ajaxSend:

<div id="loader"></div>

$("#loader").bind("ajaxSend", function () {
    $(this).show();
}).bind("ajaxStop", function () {
    $(this).hide();
}).bind("ajaxError", function () {
    $(this).hide();
});

2 How would I attach and handle the success event to the form post above?

I don't understand what you are asking. You have attached an anonymous function to handle the post to the server in your sample code.

3 I've seeing at least 3 or 4 different approaches to displaying dialogs in MVC. What is the correct way to do this?

There is no best way of showing a dialog. You can use the approach you showed with loading the dialog content with the page, but i would add a style="display: none;" to the dialogs div. Another approach would be to load the dialog content with ajax from a partial view when opening the dialog.