ユーザーがログインできる asp.net MVC Web サイト (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> </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; }
}
そしてホームコントローラー
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ご覧のとおり、部分ビューを正しくレンダリングするダイアログを取得できLogin、Home コントローラーのアクションにポストされます。アクション内からダイアログを再度開く方法がわかりません。現在、Web サイト_Loginはダイアログではなく、メイン ページの部分ビューにリダイレクトされます。
どんな助けでも大歓迎です。