MVC中的jQuery UI模态对话框

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):

请原谅我的问题太简单了，但是我一直在思考这个问题。我有一个视图(.cshtml)，包含以下内容(每个示例):

<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:

基本上，视图每次打开时都会在jQuery UI对话框中加载，也就是说，视图自己有责任将自己的内容放在jQuery UI对话框中。我这样做是为了覆盖登录的OnAuthorzation()事件，并在用户需要登录时将其重定向到弹出窗口。我有3个问题:

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?

1。当表单被发送回服务器时，如何显示加载动画(.gif) ?用这种方法吗?我知道如果我使用Ajax。BeginForm I可以指定一个UpdateTargetId，它将在post期间用作加载动画的区域，但是我如何使用这种方法实现这种效果呢?

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.

2。我如何将成功事件附加到以上的表格中?也就是说，当表单被发送回主控制器的登录操作时。

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?

3所示。我已经看到了至少3到4种在MVC中显示对话框的方法。正确的做法是什么?我上面发布的方法是否被认为是好的/mvc友好的实践，如果不是，你有什么建议?

1 个解决方案

#1

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

当表单被发送回服务器时，如何显示加载动画(.gif) ?

Take a look at ajaxSend:

看看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?

我已经看到至少3到4种不同的方法来显示MVC中的对话框。正确的做法是什么?

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.

没有最好的方式显示对话框。您可以使用您在页面加载对话框内容时所展示的方法，但我将在对话框div中添加style=“display: none;”。

#1