本节深入探讨Asp.NetMVC中用户授权认证及客户端验证的实现方法，包括错误值保留、验证错误处理、登录注销功能等，旨在快速提升开发者对MVC框架的理解与实践能力。
本文参考自：http://www.codeproject.com/Articles/996832/Learn-MVC-Project-in-Days-Day
转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。
小编应各位的要求，快马加鞭，马不停蹄的终于：七天学会 Asp.Net MVC 第四篇出炉，在第四天的学习中，我们主要了学习如何在MVC中如何实现认证授权等问题，本节主要讲了验证错误时的错误值，客户端验证，授权认证及登录注销功能的实现。
系列文章
七天学会ASP.NET MVC (一)——深入理解ASP.NET MVC
七天学会ASP.NET MVC (二)——ASP.NET MVC 数据传递
七天学会ASP.NET MVC (三)——ASP.Net MVC 数据处理
七天学会ASP.NET MVC (五)——Layout页面使用和用户角色管理
七天学会ASP.NET MVC (六)——线程问题、异常处理、自定义URL
目录
实验15 ——有关错误验证的保留值。
实验16——添加客户端验证
实验17——添加授权认证
实验18——在View中显示用户名
实验19——实现注销操作
实验20——实现登录页面验证
实验21——实现登录页面客户端验证
总结
实验15——有关错误验证的保留值
在上一节的实验13，我们介绍了服务器端的身份验证，实验14中添加了客户端验证的支持，希望每位读者都能够把实验14理解透彻，逐行代码查看，保证每行代码都理解了，这样才有助于理解我们接下来的实验。
实验15中将学习如何在验证失败时，填充值。
1. 创建 CreateEmployeeViewModel 类。
在ViewModel文件夹下，新建类：
public class CreateEmployeeViewModel
{
public string FirstName { get; set; }
public string LastName { get; set; }
public string Salary { get; set; }
}
2. 修改 SaveEmployee 方法
为了重新生成，重用Model Binder创建的 Employee 对象，修改 SaveEmployee 方法。
1: public ActionResult SaveEmployee(Employee e, string BtnSubmit)
2: {
3: switch (BtnSubmit)
4: {
5: case "Save Employee":
6: if (ModelState.IsValid)
7: {
8: EmployeeBusinessLayer empBal = new EmployeeBusinessLayer();
9: empBal.SaveEmployee(e);
10: return RedirectToAction("Index");
11: }
12: else
13: {
14: CreateEmployeeViewModel vm = new CreateEmployeeViewModel();
15: vm.FirstName = e.FirstName;
16: vm.LastName = e.LastName;
17: if (e.Salary.HasValue)
18: {
19: vm.Salary = e.Salary.ToString();
20: }
21: else
22: {
23: vm.Salary = ModelState["Salary"].Value.AttemptedValue;
24: }
25: return View("CreateEmployee", vm); // Day 4 Change - Passing e here
26: }
27: case "Cancel":
28: return RedirectToAction("Index");
29: }
30: return new EmptyResult();
31: }
3. 填充View的值
3.1 将View设置为强类型的View
在 CreateEmployee View文件开始添加以下代码：
1: @using WebApplication1.ViewModels
2: @model CreateEmployeeViewModel
3.2 在响应控件中显示Model值
1: ...
2:
3: ...
4:
5: ...
6:
7: <input type="text" id="TxtFName" name="FirstName" value="@Model.FirstName" />
8:
9: ...
10:
11: ...
12:
13: ...
14:
15: <input type="text" id="TxtLName" name="LastName" value="@Model.LastName" />
16:
17: ...
18:
19: ...
20:
21: ...
22:
23: <input type="text" id="TxtSalary" name="Salary" value="@Model.Salary" />
24:
25: ...
26:
27: ...
28:
29: ...
4. 运行点击Add New链接
浏览器提示错误。我们在实验讲述完之后，再来解释为什么会出现错误。
5. 修改AddNew方法
1: public ActionResult AddNew()
2: {
3: return View("CreateEmployee”, new CreateEmployeeViewModel());
4: }
6. 运行测试
测试1
- 点击 “Add New”跳转到 AddNew 页面。
- 设置名字为空
- 输入工资值 56
- 点击“Save Employee”按钮。
会出现验证失败，但是数字 56 仍然显示在 Salary 文本框中。
测试2
如图所示，姓名仍然保留在文本框中，却未保留工资，接下来我们来讨论上述问题的解决办法。
关于实验15
是否是真的将值保留？
不是，是从post数据中重新获取的。
为什么需要在初始化请求时，在Add New 方法中传递 new CreateEmployeeViewModel()？
View中，试着将Model中的数据重新显示在文本框中。
如：
<input id="TxtSalary" name="Salary" type="text" value="@Model.Salary" />如上所示，可以访问当前Model的“First Name”属性，如果Model 为空，会抛出类无法实例化的异常“Object reference not set to an instance of the class”。
当点击”Add New“超链接时，请求会通过Add New方法处理，在该Action 方法中，可以不传递任何数据。即就是，View中的Model属性为空。因此会抛出“Object reference not set to an instance of the class”异常。为了解决此问题，所以会在初始化请求时，传”new CreateEmployeeViewModel()“。
上述的这些功能，有什么方法可以自动生成？
使用HTML 帮助类就可以实现。在实验16中我们会讲解HTML 帮助类。
实验16——添加客户端验证
首先了解，需要验证什么？
1. FirstName 不能为空
2. LastName字符长度不能大于5
3. Salary不能为空，且应该为数字类型
4. FirstName 不能包含@字符
接下来，实现客户端验证功能
1. 创建JavaScript 验证文件
在Script文件下，新建JavaScript文件，命名为“Validations.js”
2. 创建验证函数
在“Validations.js”文件中创建验证函数：
1: function IsFirstNameEmpty() {
2: if (document.getElementById('TxtFName').value == "") {
3: return 'First Name should not be empty';
4: }
5: else { return ""; }
6: }
7:
8: function IsFirstNameInValid() {
9: if (document.getElementById('TxtFName').value.indexOf("@") != -1) {
10: return 'First Name should not contain @';
11: }
12: else { return ""; }
13: }
14: function IsLastNameInValid() {
15: if (document.getElementById('TxtLName').value.length>=5) {
16: return 'Last Name should not contain more than 5 character';
17: }
18: else { return ""; }
19: }
20: function IsSalaryEmpty() {
21: if (document.getElementById('TxtSalary').value=="") {
22: return 'Salary should not be empty';
23: }
24: else { return ""; }
25: }
26: function IsSalaryInValid() {
27: if (isNaN(document.getElementById('TxtSalary').value)) {
28: return 'Enter valid salary';
29: }
30: else { return ""; }
31: }
32: function IsValid() {
33:
34: var FirstNameEmptyMessage = IsFirstNameEmpty();
35: var FirstNameInValidMessage = IsFirstNameInValid();
36: var LastNameInValidMessage = IsLastNameInValid();
37: var SalaryEmptyMessage = IsSalaryEmpty();
38: var SalaryInvalidMessage = IsSalaryInValid();
39:
40: var FinalErrorMessage = "Errors:";
41: if (FirstNameEmptyMessage != "")
42: FinalErrorMessage += "\n" + FirstNameEmptyMessage;
43: if (FirstNameInValidMessage != "")
44: FinalErrorMessage += "\n" + FirstNameInValidMessage;
45: if (LastNameInValidMessage != "")
46: FinalErrorMessage += "\n" + LastNameInValidMessage;
47: if (SalaryEmptyMessage != "")
48: FinalErrorMessage += "\n" + SalaryEmptyMessage;
49: if (SalaryInvalidMessage != "")
50: FinalErrorMessage += "\n" + SalaryInvalidMessage;
51:
52: if (FinalErrorMessage != "Errors:") {
53: alert(FinalErrorMessage);
54: return false;
55: }
56: else {
57: return true;
58: }
59: }
3. 在 “CreateEmployee”View 中添加 Validations.js文件引用：
1: <script src="~/Scripts/Validations.js"></script>
4. 在点击 SaveEmployee按钮时，调用验证函数，如下：
<input type="submit" name="BtnSubmit" value="Save Employee" onclick="IsValid();"/>
5. 运行测试
点击 Add New 链接，跳转到 ”Add New“页面
测试1
测试2
关于实验16
为什么在点击”SaveEmployee “按钮时，需要返回关键字？
如之前实验9讨论的，当点击提交按钮时，是给服务器发送请求，验证失败时对服务器请求没有意义。通过添加”return false“代码，可以取消默认的服务器请求。
在 IsValid函数将返回false，表示验证失败来实现预期的功能。
除了提示用户，是否可以在当前页面显示错误信息？
是可以得，只需要为每个错误创建span 标签，默认设置为不可见，当提交按钮点击时，如果验证失败，使用JavaScript修改错误的可见性。
自动获取客户端验证还有什么方法？
是，当使用Html 帮助类，可根据服务端验证来获取自动客户端验证，在以后会详细讨论。
服务器端验证还有没有必须使用？
在一些JavaScript脚本代码无法使用时，服务器端可以替代使用。
实验 17 添加授权认证
在实验17中，会改进GetView方法，使其变得更加安全，只有合法的用户才能够访问该方法。
在本系列的第一讲中，我们了解了Asp.Net和MVC的意义，知道MVC是Asp.net的一部分,MVC继承了ASP.NET的所有特征，包含表单认证。
先来了解ASP.NET是如何进行Form认证的。
- 终端用户在浏览器的帮助下，发送Form认证请求。
- 浏览器会发送存储在客户端的所有相关的用户数据。
- 当服务器端接收到请求时，服务器会检测请求，查看是否存在 “Authentication Cookie”的Cookie。
- 如果查找到认证Cookie，服务器会识别用户，验证用户是否合法。
- 如果为找到“Authentication Cookie”，服务器会将用户作为匿名（未认证）用户处理，在这种情况下，如果请求的资源标记着 protected/secured，用户将会重定位到登录页面。
1. 创建 AuthenticationController 和 Login 行为方法
右击controller文件夹，选择添加新Controller，新建并命名为”Authentication“即Controller的全称为”AuthenticationController“。
新建Login action方法：
1: public class AuthenticationController : Controller
2: {
3: // GET: Authentication
4: public ActionResult Login()
5: {
6: return View();
7: }
8: }
扫一扫
931
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
