Asp .net MVC Razor + JQuery UI delaog(登录弹出窗口)

时间:2014-08-24 03:50:30

标签: asp.net-mvc razor

这是我的用例。当用户单击“登录”按钮时,它会弹出一个jquery ui对话框并询问用户名/密码。当我点击提交时,我的家应该登录。

为了实现这一点,我在对话框中创建了一个表单并使用了一个提交按钮。但我从未到达控制器(AccountController.cs)

public ActionResult Login(LoginModel model, string returnUrl)

而是始终调用(AccountController.cs)

public ActionResult Login(string returnUrl)

我在jquery对话框中的表单如下所示(Index.cshtml)

@model MyProject.Models.LoginModel
.
.
.
<section id="loginForm">
        @using (Html.BeginForm(new { ReturnUrl = ViewBag.ReturnUrl })) {
            @Html.AntiForgeryToken()
            @Html.ValidationSummary(true)

            <fieldset>
                @Html.LabelFor(m => m.UserName)
                @Html.TextBoxFor(m => m.UserName, new { @Value = "jane@smith.com", @class = "text ui-widget-content ui-corner-all" })
                <input type="password" name="password" id="password" value="xxxxxxx" class="text ui-widget-content ui-corner-all"-->
                @Html.LabelFor(m => m.Password)
                @Html.PasswordFor(m => m.Password, new { @Value = "xxxxxxx", @class = "text ui-widget-content ui-corner-all" })
                <input type="submit" value="Log in" />
                <p>@Html.ActionLink("Log in", "Login", "Account", routeValues: null, htmlAttributes: new { id = "loginLink" })</p>
            </fieldset>
    }
</section>

,对话框将弹出如下

dialog = $("#dialog-form").dialog({
            autoOpen: false,
            height: 220,
            width: 350,
            modal: true,
            close: function () {
                form[0].reset();
                allFields.removeClass("ui-state-error");
            }
        });

我确定我在某处犯了一些配置错误,但无法确定在哪里。我假设“提交”会调用帐户控制器(但我想知道我在哪里配置)。我也尝试了@ Html.ActionLink。但不确定传递模型对象的位置。

1 个答案:

答案 0 :(得分:1)

您可以在BeginForm

中提及控制器和操作
@using (Html.BeginForm("Login", "Account", routeValues))

和js

$("#dialog-form").dialog({
    autoOpen: false,
    height: 220,
    width: 350,
    modal: true,
    buttons: {
        "Submit": function () {
            $("#LogOnForm").submit(); <-- this is the trick
        },
        Cancel: function () {
            $(this).dialog("close");
        }
    }
});