0

我有一个用户可以登录的 asp.net MVC 网站（Visual Studio 2012，C#）。当他们单击“登录”链接时，它会打开一个呈现部分登录视图的 jQuery 对话框。我可以让对话框发布到正确的操作和控制器，但如果用户名/密码组合无效，我需要帮助重定向回对话框屏幕。我已经在提交按钮上进行了错误检查，以在继续之前检查两者中是否存在值，但需要其他部分的帮助。

我会尽力解释网站的布局：

_HeaderPartial View

<header id="header" class="style2">
    <link href="@Url.Content("~/Content/themes/base/minified/jquery-ui.min.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.20.min.js")" type="text/javascript"></script>

    <script type="text/javascript">
        var jq = jQuery.noConflict(true);
        jq(document).ready(function ($) {

            $("#ViewLogin").live("click", function (e) {
                var url = $(this).attr('href');
                $("#login_panel").dialog({
                    title: 'Client Login',
                    closeOnEscape: true,
                    autoOpen: false,
                    resizable: false,
                    height: 350,
                    width: 400,
                    show: { effect: 'drop', direction: "up" },
                    modal: true,
                    draggable: true,
                    open: function (event, ui) {
                        $(this).load(url);

                    },
                    close: function (event, ui) {
                        $(this).dialog('destroy');
                    }
                });

                $("#login_panel").dialog('open');
                return false;
            });
        });
    </script>
    <div class="container">

        <!-- logo -->
        <h1 id="logo"><a href="@Url.Action("Index", "Home")">
            <img src="~/images/small_logo.png" alt="Logo"></a></h1>

        <ul class="topnav navRight">
            <li>&nbsp;</li>

            @if (Session["LoggedIn"] == null || Convert.ToBoolean(Session["LoggedIn"])==false)
            {
                <li><a href="@Url.Action("ViewLogin", "Home")" id="ViewLogin">LOGIN</a></li>
            }
            else
            {
                <li><a href="@Url.Action("LogOut", "Home")">LOGOUT</a></li>
            }
        </ul>

    <other generic html markup omitted>

如您所见，当单击“登录”链接时，jQuery 会打开一个对话框，这是一个名为“login_panel”的简单 div：

_Layout View

<div id="login_panel" style="display: none"></div>

_Login View

@model MyApp.LoginViewModel
@{
    Layout = null;
}
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

<div id="login_panel">
    <div class="inner-container login-panel">
        <h4>SIGN IN TO ACCESS YOUR ACCOUNT</h4>
        @using (Html.BeginForm("Login", "Home", FormMethod.Post))
        {
            <div class="validation-text">
                <h5>@Html.ValidationSummary()</h5>
            </div>
            <div>
                @Html.LabelFor(x => x.Username)
                @Html.TextBoxFor(x => x.Username, new { placeholder = "Username..." })
            </div>
            <div>
                @Html.LabelFor(x => x.Password)
                @Html.PasswordFor(x => x.Password, new { placeholder = "Password..." })
            </div>
            <br />
            <button class="btn btn-danger" type="submit">LOG IN</button>
            <div class="links"><a href="#" onclick="ppOpen('#forgot_panel', '350');">FORGOT YOUR USERNAME or PASSWORD?</a></div>
        }
    </div>
</div>

LoginViewModel

public class LoginViewModel
{
    [Required(ErrorMessage = "Username is required.")]
    public string Username { get; set; }

    [Required(ErrorMessage = "Password is required.")]
    public string Password { get; set; }
}

和HomeController

public ActionResult ViewLogin()
{
    return View("_Login");
}

public ActionResult LogOut()
{
    Session["LoggedIn"] = false;
    return RedirectToAction("Index", "Home");
}

[HttpPost]
public ActionResult Login(LoginViewModel model)
{
    if (ModelState.IsValid)
    {
        using (ProPhysiqueContext db = new ProPhysiqueContext())
        {
            var user = db.Users
                            .Where(u => u.EmailAddress == model.Username &&
                                    u.WebPassword == model.Password).FirstOrDefault();

            if (user != null)
            {
                Session["LoggedIn"] = true;
                return RedirectToAction("Index", "ClientStats");
            }
        }
    }

    ModelState.AddModelError("", "Invalid Username or Password.");

    return PartialView("_Login", model);
}

如您所见，我可以让对话框_Login正确呈现局部视图，并将发布到LoginHome 控制器上的操作。我只是不知道如何从操作中重新打开对话框。现在的方式是，网站重定向到主页_Login上的部分视图，而不是在对话框中。

任何帮助表示赞赏。

4

1 回答 1

0

不如改用 Ajax 表单，这样您就不必费力地将视图返回到它所处的状态，即打开对话框。为此，您需要更改一些内容：

  1. 将您的更改Html.BeginForm为 anAjax.BeginForm并将OnComplete属性设置为将被调用的 javascript 函数，接受响应的单个参数。
  2. 更改您的操作方法以返回JsonResult包含重定向 URL 而不是RedirectToAction结果的方法。
  3. 在您的 javascript 函数中，根据响应，您将使用响应替换登录表单的内容或重定向到 URL。

以下是使用您的代码的相关更改。

_登录查看

@* omitted for brevity *@
@using (Ajax.BeginForm("Login", "Home", new AjaxOptions() { OnComplete = "complete" }))
{

}

家庭控制器

[HttpPost]
public ActionResult Login(LoginViewModel model)
{
    // omitted for brevity
    if (user != null)
    {
        Session["LoggedIn"] = true;
        return Json(new { url = Url.Action("Index", "ClientStats") });
    }
}

页眉部分视图

<script type="text/javascript">
    var jq = jQuery.noConflict(true);
    jq(document).ready(function ($) {
        // omitted for brevity
    });

    function complete(response) {
        try {
            var data = JSON.parse(response.responseText);
            if (data['url'])
                $(location).attr('href', data['url']);
        }
        catch (e) {
            $('#login_panel').html(response.responseText);
            // this is to reapply jQuery validation to dynamic content
            $.validator.unobtrusive.parse('#login_panel');
        }
    }
</script>
于 2013-10-02T00:03:58.750 回答