如何在智能告警平台CA触发测试告警
808
2022-09-13
7 天玩转 ASP.NET MVC — 第 4 天(7月是什么星座)
目录
0. 前言
欢迎来到第四天的 MVC 系列学习中。如果你直接开始学习今天的课程,我强烈建议你先完成之前的学习内容再来到这里。
1. Lab 15 — 认证错误的保留值
在 Lab 13 中,我们介绍了服务器端的认证,并且在 Lab 14 中,我们通过添加自定义认证的方式将其提示到一个新的层级。
我强烈建议你再回顾一下 Lab 14。再次执行应用,并且能够很好地理解代码以及输出。
在 Lab 15 中,我们将学习如何在认证失败时填充值。
第一步:创建 CreateEmployeeViewModel
在 ViewModel 文件夹下创建一个新的类。
public class CreateEmployeeViewModel { public string FirstName { get; set; } public string LastName { get; set; } public string Salary { get; set; }}
第二步:改变 SaveEmployee 行为方法
我们将重新使用 Model Binder 创建的 Employee 对象来重新生成。改变 SaveEmployee 行为方法如下。
public ActionResult SaveEmployee(Employee e, string BtnSubmit) { switch (BtnSubmit) { case "Save Employee": if (ModelState.IsValid) { EmployeeBusinessLayer empBal = new EmployeeBusinessLayer(); empBal.SaveEmployee(e); return RedirectToAction("Index"); } else { CreateEmployeeViewModel vm = new CreateEmployeeViewModel(); vm.FirstName = e.FirstName; vm.LastName = e.LastName; if (e.Salary.HasValue) { vm.Salary = e.Salary.ToString(); } else { vm.Salary = ModelState["Salary"].Value.AttemptedValue; } return View("CreateEmployee", vm); // Day 4 Change - Passing e here } case "Cancel": return RedirectToAction("Index"); } return new EmptyResult();}
第三步:在视图中重新填值
将 View 成为一个强类型视图
在 CreateEmployee 视图的顶部,放置如下代码。
@using WebApplication1.ViewModels@model CreateEmployeeViewModel
在相应控件中呈现从 Model 中获取的值
...... ...... ...... ......
第四步:执行并测试
上述的错误将会在实验结束后探讨。现在让我们来实现解决方案。
第五步:改变 AddNew 行为方法
public ActionResult AddNew() { return View("CreateEmployee”, new CreateEmployeeViewModel());}
第六步:执行并测试
按下 F5,并执行应用。
Test
步骤如下。
这样会使得两个认证是失败的。
正如你所看见的那样,值56 仍然保留在 Salary 文本框内。
Test 2
正如你所看见的,FirstName 和 LastName 文本框内的值仍然有所保留。但是奇怪的是,Salary 并没有保留值。我们将会在实验的最后探讨原因并给出解决方案。
Lab 15 的 Q&A
我们真的将值保留了吗?
答案是否定的。实际上,我们重填的值是从 Posted 数据中获取的。
为什么在初始的请求中,在「AddNew」行为方法中需要传输「new CreateEmployeeViewModel()」?
在视图中,我们尝试将模型中的值重新填充到文本框内。例如:
正如你所看见的,在代码区域,我们访问当前模型的 FirstName 属性。如果 Model 为 Null,那么将会抛出「Object reference not set to an instance of the class」的异常。
我们可以通过自动的方式来达到上述同样的功能效果吗?
答案是肯定的。我们可以运用 HTML Helper 类来解决。我们将会在接下来的实验中探讨这个问题。
2. Lab 16 — 添加客户端认证
首先我们列举所需要的所有认证。
FirstName 不应为空。LastName 的长度不能超出5。Salary 不应为空。Salary 应该为一个正确的数字。FirstName 应该不能包含「@」符号。
让我们来实现它吧。
创建一个 JavaScript 文件,命名为「Validations.js」,并且把它放到 Scripts 文件夹内。
第二步:创建认证函数
在「Validations.js」文件内,创建一个认证函数。
function IsFirstNameEmpty() { if (document.getElementById('TxtFName').value == "") { return 'First Name should not be empty'; } else { return ""; }}function IsFirstNameInValid() { if (document.getElementById('TxtFName').value.indexOf("@") != -1) { return 'First Name should not contain @'; } else { return ""; }}function IsLastNameInValid() { if (document.getElementById('TxtLName').value.length>=5) { return 'Last Name should not contain more than 5 character'; } else { return ""; }}function IsSalaryEmpty() { if (document.getElementById('TxtSalary').value=="") { return 'Salary should not be empty'; } else { return ""; }}function IsSalaryInValid() { if (isNaN(document.getElementById('TxtSalary').value)) { return 'Enter valid salary'; } else { return ""; }}function IsValid() { var FirstNameEmptyMessage = IsFirstNameEmpty(); var FirstNameInValidMessage = IsFirstNameInValid(); var LastNameInValidMessage = IsLastNameInValid(); var SalaryEmptyMessage = IsSalaryEmpty(); var SalaryInvalidMessage = IsSalaryInValid(); var FinalErrorMessage = "Errors:"; if (FirstNameEmptyMessage != "") FinalErrorMessage += "\n" + FirstNameEmptyMessage; if (FirstNameInValidMessage != "") FinalErrorMessage += "\n" + FirstNameInValidMessage; if (LastNameInValidMessage != "") FinalErrorMessage += "\n" + LastNameInValidMessage; if (SalaryEmptyMessage != "") FinalErrorMessage += "\n" + SalaryEmptyMessage; if (SalaryInvalidMessage != "") FinalErrorMessage += "\n" + SalaryInvalidMessage; if (FinalErrorMessage != "Errors:") { alert(FinalErrorMessage); return false; } else { return true; }}
第三步:在 View 中包含认证文件
在「CreateEmployee」视图的顶部,将「Validations.js」文件引入。
第三步:执行并测试
按下 F5,执行应用。
8. Lab 21 的 Q&A
客户端的认证是如何实现的?
正如你所看见的,不费多少力气就实现了客户端的认证。在 Login 视图中,HTML 元素通过 HTML Helper 类产生。Helper 函数能够根据数据注释属性来生成带有属性附加的 HTML 标记。
例如:
@Html.TextBoxFor(x=>x.UserName)@Html.ValidationMessageFor(x=>x.UserName)
上述的代码产生如下的 HTML 代码。
这些自定义的 HTML 属性将会被「JQuery Unobtrusive Validation」文件使用,因此在客户端自动实现认证。
自动的客户端认证是 HTML Helper 类的第二个优势。
Unobtrusive JavaScript 的意思是什么?
下面是 Wikipedia 所述。译文为:
Unobtrusive JavaScript 是一个在 Web 页面中常用的 JavaScript 方法。尽管它没有被正式定义,但是它的几个基本的准则可以被大概理解:
从 Web 页面的结构或者内容中分离的功能("Behaviour Layer"),并且展示。传统的 JavaScript 编程中,最佳避免问题的实践。(例如浏览器的不一致性和缺乏伸缩性)逐步增强支持用户可能不先进的 JavaScript 功能。
让我以外行来定义一下。
「以一种方式来写你的 JavaScript,这种 JavaScript 不能与 HTML 强联系。JavaScript 可能访问 DOM 元素,JavaScript 可能操作 DOM 元素,但是并不和它们直接联系。」
在上述例子中,JQuery Unobtrusive JavaScript 简单地运用一些输入元素属性和实现客户端认证。
我们可以运用这些 JavaScript 来认证,而不是采用 HTML Helper 类吗?
答案是肯定的,对于这种方式,我们需要手动地向元素附件属性。
哪个更推崇,是 HTML Helper 函数还是纯 HTML?
我个人更倾向于纯 HTML,因为 HTML Helper 函数又一次用到了「Full Control over HTML」,而这个弊端我们曾讨论过。
9. 总结
现在我们已经完成了第四天的学习。在第五天中,我们将会有更进一步的学习,会更有乐趣。
发表评论
暂时没有评论,来抢沙发吧~