我创建了一个下拉菜单,用户可以从导航栏登录,而无需按下登录按钮并重定向到帐户/登录。这是在局部视图中完成的,并呈现在_layout.cshtml中的导航栏中。部分视图如下所示:
´´´
@using Microsoft.AspNet.Identity
@model Rent_a_Car.Models.LoginViewModel
@{
if (Request.IsAuthenticated)
{
using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm", @class = "navbar-right" }))
{
@Html.AntiForgeryToken()
<ul class="nav navbar-nav navbar-right">
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
@User.Identity.GetUserName()
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
@Html.ActionLink("My account", "Index", "Manage", routeValues: null, htmlAttributes: new { title = "Manage", @class = "dropdown-item" })
<a class="dropdown-item disabled" href="#">My orders</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:document.getElementById('logoutForm').submit()">Log off</a>
</div>
</div>
<li></li>
</ul>
}
}
else
{
<div class="dropleft">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Log-In </button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton" style="width: 300px">
@* form starting *@
@using (Html.BeginForm("Login", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="col-lg-12">
<div class="text-center">
<h3><b>Log In</b></h3>
</div>
<form id="ajax-login-form" method="post" role="form" autocomplete="off">
<div class="form-group">
<label for="username">Username</label>
@Html.TextBoxFor(m => m.Email, new { @class = "form-control", @placeholder = "Email" })
</div>
<div class="form-group">
<label for="password">Password</label>
@Html.PasswordFor(m => m.Password, new { @class = "form-control", @placeholder = "Password" })
</div>
<div class="form-group">
<div class="col-xs-5">
<input type="submit" name="Login" id="login-submit" tabindex="4" class="form-control btn btn-danger" value="Log In">
</div>
</div>
<div class="col-xs-5" align="Center">
@Html.CheckBoxFor(m => m.RememberMe)
<label for="remember"> Remember Me</label>
</div>
<div class="form-group">
<div class="row">
<div class="col-lg-12">
<div class="text-center">
<a tabindex="5" class="forgot-password">Forgot Password?</a>
</div>
</div>
</div>
</div>
</form>
</div>
}
@*form ending*@
</div>
</div>
}
}
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}
´´´
这是控制器。如您所见,当验证失败时,我将返回模型,这是我不想要的。
public async Task<ActionResult> Login(LoginViewModel model, string returnUrl)
{
if (!ModelState.IsValid)
{
return View(model);
}
// This doesn't count login failures towards account lockout
// To enable password failures to trigger account lockout, change to shouldLockout: true
var result = await SignInManager.PasswordSignInAsync(model.Email, model.Password, model.RememberMe, shouldLockout: false);
switch (result)
{
case SignInStatus.Success:
return RedirectToLocal(returnUrl);
case SignInStatus.LockedOut:
return View("Lockout");
case SignInStatus.RequiresVerification:
return RedirectToAction("SendCode", new { ReturnUrl = returnUrl, RememberMe = model.RememberMe });
case SignInStatus.Failure:
default:
ModelState.AddModelError("", "Invalid login attempt.");
return View(model);
}
}
我只需要确认错误消息出现在下拉菜单上,而无需将我重定向到另一个页面。我怎么能做到这一点?
答案 0 :(得分:0)
其他人问的最大问题是,为什么不使用javascript调用api进行登录,例如使用ajax post
$.post("your api here",
{
userName: "",
password: "",
rememberMe: ""
},function(data, status){
//show user what ever
});
此代码非常简单,但是,如果由于任何“我不知道”的原因而无法使用javascript,您将拥有下面的长代码以及现有控制器上的一些实现
我会解释
您将必须在表单中添加一个ReturnUrl
,并将登录表单更改为此
@using Microsoft.AspNet.Identity
@model Rent_a_Car.Models.LoginViewModel
@{
if (Request.IsAuthenticated)
{
using (Html.BeginForm("LogOff", "Account", new { returnUrl = Request.Url.PathAndQuery }, FormMethod.Post, new { id = "logoutForm", @class = "navbar-right" }))
{
@Html.AntiForgeryToken()
<ul class="nav navbar-nav navbar-right">
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
@User.Identity.GetUserName()
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
@Html.ActionLink("My account", "Index", "Manage", routeValues: null, htmlAttributes: new { title = "Manage", @class = "dropdown-item" })
<a class="dropdown-item disabled" href="#">My orders</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:document.getElementById('logoutForm').submit()">Log off</a>
</div>
</div>
</ul>
}
}
else
{
<div class="dropleft">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Log-In </button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton" style="width: 300px">
@* form starting *@
@using (Html.BeginForm("Login", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
@Html.AntiForgeryToken()
<p>@ViewBag.error</p>@*Display the error here*@
<div class="col-lg-12">
<div class="text-center">
<h3><b>Log In</b></h3>
</div>
<form id="ajax-login-form" method="post" role="form" autocomplete="off">
<div class="form-group">
<label for="username">Username</label>
@Html.TextBoxFor(m => m.Email, new { @class = "form-control", @placeholder = "Email" })
</div>
<div class="form-group">
<label for="password">Password</label>
@Html.PasswordFor(m => m.Password, new { @class = "form-control", @placeholder = "Password" })
</div>
<div class="form-group">
<div class="col-xs-5">
<input type="submit" name="Login" id="login-submit" tabindex="4" class="form-control btn btn-danger" value="Log In">
</div>
</div>
<div class="col-xs-5" align="Center">
@Html.CheckBoxFor(m => m.RememberMe)
<label for="remember"> Remember Me</label>
</div>
<div class="form-group">
<div class="row">
<div class="col-lg-12">
<div class="text-center">
<a tabindex="5" class="forgot-password">Forgot Password?</a>
</div>
</div>
</div>
</div>
</form>
</div>
}
@*form ending*@
</div>
</div>
}
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}
然后在您的Account Controller
中,将重定向返回到用户当前所在的视图,因为它是重定向,所以您必须将模型放入TempData
中,这就是{{1 }}和其他一些模型错误可能对您不起作用,因此您需要进行验证。
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
现在这是您要做的事。
您需要转到用户可能首先按下的所有可能的控制器(我将为您提供所有控制器的建议),并获取public async Task<ActionResult> Login(LoginViewModel model, string returnUrl)
{
if (!ModelState.IsValid)
{
//here send back the error and the model with validation message to any view
TempData["LoginModel"] = model;
TempData["LoginError"] = "Incorrect details";
return Redirect(returnUrl);
}
var result = await SignInManager.PasswordSignInAsync(model.Email, model.Password, model.RememberMe, shouldLockout: false);
switch (result)
{
case SignInStatus.Success:
return RedirectToLocal(returnUrl);
case SignInStatus.LockedOut:
return View("Lockout");
case SignInStatus.RequiresVerification:
return RedirectToAction("SendCode", new { ReturnUrl = returnUrl, RememberMe = model.RememberMe });
case SignInStatus.Failure:
default:
TempData["LoginModel"] = model;
TempData["LoginError"] = "Invalid login attempt";
return Redirect(returnUrl);
}
}
(模型)和错误。您的TempData
的{{1}}方法例如:
Index