菜鸟入门【ASP.NET Core】15:MVC开发:ReturnUrl实现、Model后端验证 、Model前端验证

ReturnUrl实现

咱们要实现returnUrl,咱们须要在注册(Register)方法中接收传进的returnUrl并给它默认值null,而后将它保存在ViewData里面html

而后咱们定义一个内部方法来判断跳转returnUrl前端

复制代码
//内部跳转
private IActionResult RedirectToLocal(string returnUrl)
{
    if (Url.IsLocalUrl(returnUrl))
    {//若是是本地
        return Redirect(returnUrl);
    }

    return RedirectToAction(nameof(HomeController.Index),"Home");
}
复制代码

而后咱们须要在Register的HttpPost方法中,在注册成功后进行跳转到returnUrljquery

接下来咱们修改Register.cshtml后端

完整Register.cshtml代码:post

@{
ViewData["Title"] = "Register";
}ui

@using MvcCookieAuthSample.ViewModels;
@model RegisterViewModel;spa

<h2>@ViewData["Title"]</h2>
<h3>@ViewData["Message"]</h3>code

<div class="row">
<div class="col-md-4">
@* 这里将asp-route-returnUrl="@ViewData["returnUrl"],就能够在进行register的post请求的时候接收到returnUrl *@
<form method="post" asp-route-returnUrl="@ViewData["returnUrl"]">
<h4>Create a new account.</h4>
<hr />
<div class="form-group">
<label asp-for="Email"></label>
<input asp-for="Email" class="form-control" />
</div>
<div class="form-group">
<label asp-for="Password"></label>
<input asp-for="Password" class="form-control" />
</div>
<div class="form-group">
<label asp-for="ConfirmedPassword"></label>
<input asp-for="ConfirmedPassword" class="form-control" />
</div>
<button type="submit" class="btn btn-default">Register</button>
</form>
</div>
</div>orm

接下来登录的地方咱们也须要修改一下,咱们须要在登录(Login)方法中接收传进的returnUrl并给它默认值null,而后将它保存在ViewData里面htm

 

而后咱们须要在Login的HttpPost方法中,在注册成功后进行跳转到returnUrl

 

接下来咱们修改Login.cshtml

 

完整Login.cshtml代码:

@{
ViewData["Title"] = "Login";
}

@using MvcCookieAuthSample.ViewModels;
@model RegisterViewModel;

<div class="row">
<div class="col-md-4">
<section>
@* 这里将asp-route-returnUrl="@ViewData["returnUrl"],就能够在进行Login的post请求的时候接收到returnUrl *@
<form method="post" asp-controller="Account" asp-action="Login" asp-route-returnUrl="@ViewData["returnUrl"]">
<h4>Use a local account to log in.</h4>
<hr />

<div class="form-group">
<label asp-for="Email"></label>
<input asp-for="Email" class="form-control" />
</div>

<div class="form-group">
<label asp-for="Password"></label>
<input asp-for="Password" type="password" class="form-control" />
</div>

<div class="form-group">
<button type="submit" class="btn btn-default">Log in</button>
</div>

</form>
</section>
</div>
</div>

而后咱们就能够实现登录/注册后Url进行跳转到以前的页面。

Model后端验证 

咱们能够经过给ViewModel的属性加头标签来进行Model后端验证,这里拿RegisterViewModel举例

咱们能够给限定属性是必须的

复制代码
public class RegisterViewModel
{
    [Required]//必须的
    [DataType(DataType.EmailAddress)]//内容检查是否为邮箱
    public string Email { get; set; }

    [Required]//必须的
    [DataType(DataType.Password)]//内容检查是否为密码
    public string Password { get; set; }

    [Required]//必须的
    [DataType(DataType.Password)]//内容检查是否为密码
    public string ConfirmedPassword { get; set; }
}
复制代码

这样以前咱们在在登录的时候也用的是RegisterViewModel就不行了,咱们要在ViewModel文件夹下新建一个LoginViewModel供登录使用

复制代码
public class LoginViewModel
{
    [Required]//必须的
    [DataType(DataType.EmailAddress)]//内容检查是否为邮箱
    public string Email { get; set; }

    [Required]//必须的
    [DataType(DataType.Password)]//内容检查是否为密码
    public string Password { get; set; }
}
复制代码

接下来咱们须要修改Login.cshtml,在表单中添加<span asp-validation-for="XXXXXX" class="text-danger"></span>用来给表单元素显示错误信息

而后咱们修改Login的HttpPost方法,用ModelState.IsValid进行验证

这时候咱们什么数据都不填,服务端返回验证后显示:

同理Register方法也是这样进行修改

 

咱们如今的密码验证很弱,是由于以前在Startup.cs中咱们修改了密码的部分规则,如今将规则改成以下

咱们能够将全部的错误提示在同一个地方,须要用asp-validation-summary,咱们以Register.cshtml为例

什么都不填运行效果

因为咱们的验证比较严格,会出现注册是失败的状况,因此咱们要修改后台的注册方法,在注册失败的时候讲错误返回给前台页面,咱们能够写一个通用的添加验证错误方法

复制代码
//添加验证错误
private void AddError(IdentityResult result)
{
    //遍历全部的验证错误
    foreach (var error in result.Errors)
    {
        //返回error到model
        ModelState.AddModelError(string.Empty, error.Description);
    }
}
复制代码

而后在注册验证失败的时候调用此方法将错误缘由显示出来

运行效果

Model前端验证 

客户端的验证主要要加入jquery的组件

  • jquery.validate.js
  • jquery.validate.unobtrusive.js

以Login.cshtml为例,咱们只须要加入如下代码就好了

@section Scripts
{
    @await Html.PartialAsync("_ValidationScriptsPartial")
}

由于_Layout.cshtml中已经默认为咱们加载了js

相关文章
相关标签/搜索