开发者社区> 街角盒饭> 正文

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

简介: ReturnUrl实现 我们要实现returnUrl,我们需要在注册(Register)方法中接收传进的returnUrl并给它默认值null,然后将它保存在ViewData里面 然后我们定义一个内部方法来判断跳转returnUrl //内部跳转 private IActionR...
+关注继续查看

ReturnUrl实现

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

然后我们定义一个内部方法来判断跳转returnUrl

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

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

然后我们需要在Register的HttpPost方法中,在注册成功后进行跳转到returnUrl

接下来我们修改Register.cshtml

完整Register.cshtml代码:

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

@using MvcCookieAuthSample.ViewModels;
@model RegisterViewModel;

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

<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>

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

 

然后我们需要在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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
十分钟上线-基于函数计算开发 Restful web api & asp.net core web app
.NET Core是一个开源通用的开发框架,支持跨平台, 阿里云函数计算推出了 dotnetcore2.1 runtime, 使用 C# 编写 serverless 函数, 除了很好地支持通常意义上的函数外, 还可以基于函数计算开发 asp.
4799 0
基于ASP.Net Core 开发的纯BS结构的RoadFlow工作流平台
RoadFlow是一款集成工作流引擎的ASP.NET CORE MVC快速开发框架
3236 0
【转】VC++/MFC(VC6)开发技术精品学习资料下载汇总 (2011.3.10更新)
from:http://club.topsage.com/thread-361504-1-1.html   Visual C++ (VC) / MFC 电子书下载:Visual C++ 2008 入门经典 (中文版) 下载Windows核心编程 第5版 (Windows via C/C++, 5...
2547 0
Asp.net MVC 3 开发一个简单的企业网站系统
最近我想把我学过的一些东西进行一下整合,来验证我最近学习的效果,所以我决定做一个简单的可以实现基本功能的Asp.net MVC 3 的企业网站系统,因为我的美术功底比较差,所以界面做出来可能会很丑陋。 现在我列一下可能会用到的技术以及可能采取的方式:如果有需要,还会继续添加 首先就是 Asp.net MVC 3框架,这时我研究了很长时间的一个框架结构。
912 0
前端内存优化的探索与实践
标注是地图最基本的元素之一,标明了地图每个位置或线路的名称。在地图 JSAPI 中,标注的展示效果及性能也是需要重点解决的问题。
516 0
前后端分离之Spring&Vue单页面开发(2)
前言     需求: 最近本人在学习SpringBoot,希望自己能搭一个简单的Demo应用出来,但是搭到前端的时候遇到了困惑,因为网络上大部分教程前端都是应用模板引擎thymeleaf生成的,它给我的感觉就是一个进化版的JSP,但是很明显这种开发方式已经有些落后了。
3939 0
+关注
街角盒饭
你一定要做到可以取代任何人,然后再考虑做到任何人都不可以取代你。
43
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载