第九章 设计用户界面 之 设计实现界面行为
1. 概述
本章内容包括： 实现客户端验证、使用Javascript和DOM控制程序行为、使用原型继承(prototypal inheritance)扩展对象、使用Ajax实现页面局部刷新、使用JQuery实现UI操作。
2. 主要内容
2.1 实现客户端验证
① 模型： 在MVC程序中，模型 负责管理应用程序的数据和行为。模型也可以用来验证进入程序的数据。
data annotation是可以放置到每一个属性上的规则，用来实现数据验证。
using System; using System.Data.Entity; using System.ComponentModel.DataAnnotations; namespace ArticleApp.Models { public class Article { public int ID { get; set; } [Required] [StringLength(50,MinimumLength=5)] public string Title { get; set; } [RegularExpression[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}")]
AuthorEmail { get; set;} [DataType(DataType.Date)] [Range(300, 3000)] public int NumberOfAuthors { get; set; } [Required] public DateTime CreateDate { get; set; } [Required] public string Description { get; set; } [Range(1, 250)] [DataType(DataType.Currency)] [Required] public decimal Price { get; set; } } public class ArticleDBContext : DbContext { public DbSet<Article> Articles { get; set; } } }
② 视图：在MVC程序中，视图用来管理信息的显示。
模型层定义的数据验证规则会传递到视图层，然后可以使用客户端的Javascript来验证。
@model MvcApplication1.Models.Article @{ ViewBag.Title = "Create"; } <h2>Create</h2> @using (Html.BeginForm()) { @Html.ValidationSummary(true) <fieldset>
<legend>Articles</legend>
<div class="editor-label"> @Html.LabelFor(model => model.Title) </div>
<div class="editor-field"> @Html.EditorFor(model => model.Title) @Html.ValidationMessageFor(model => model.Title) </div>
<div class="editor-label"> @Html.LabelFor(model => model.CreateDate) </div>
<div class="editor-field"> @Html.EditorFor(model => model.CreateDate) @Html.ValidationMessageFor(model => model.CreateDate) </div>
<div class="editor-label"> @Html.LabelFor(model => model.Description) </div>
<div class="editor-field"> @Html.EditorFor(model => model.Description) @Html.ValidationMessageFor(model => model.Description) </div>
<div class="editor-label"> @Html.LabelFor(model => model.Price) </div>
<div class="editor-field"> @Html.EditorFor(model => model.Price) @Html.ValidationMessageFor(model => model.Price) </div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset> } <div> @Html.ActionLink("Back to List", "Index") </div> @section Scripts { @Scripts.Render("~/bundles/jqueryval") }
③ 控制器：控制器基类的ModelState属性，包含一些model特性的方法，比较常用的是IsValid属性。
[HttpPost] public ActionResult Create(Article article) { if (ModelState.IsValid) { db.Articles.Add(article); db.SaveChanges(); return RedirectToAction("Index"); } return View(article); }
④ 远程验证
由服务端的action来执行验证操作。
public JsonResult IsUserAvailable(string username) { if (!WebSecurity.UserExists(username)) { return Json(true, JsonRequestBehavior.AllowGet); //AllowGet表示如果用户接受这个返回值，则验证不会重复执行。 } string suggestedUID = String.Format(CultureInfo.InvariantCulture, "{0} is not available.", username); for (int i = 1; i < 100; i++) { string altCandidate = username + i.ToString(); if (!WebSecurity.UserExists(altCandidate)) { suggestedUID = String.Format(CultureInfo.InvariantCulture, "{0} is not available. Try {1}.", username, altCandidate); break; } } return Json(suggestedUID, JsonRequestBehavior.AllowGet); }
为了确保UI能调用到验证action，需要在模型层添加System.Web.Mvc.Remote 属性。
[Required] [StringLength(6, MinimumLength = 3)] [Remote("IsUserAvailable", "Validation")] [RegularExpression(@"(\S)+", ErrorMessage = "White space is not allowed.")] [Editable(true)] public string UserName { get; set; }
还需要修改配置文件以允许服务端远程验证
<appSettings>
<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>
2.2 使用Javascript和DOM控制程序行为
通过访问DOM，Javascript可以展现出强大的控制UI的能力。
<script type="text/javascript">
function changeText(){ document.getElementById('controlled').innerHTML = 'This is modified text'; } </script>
<p id="controlled">This is sample text.</p>
<input type='button' onclick='changeText()' value='Change Text'/>
2.3 使用原型继承(prototypal inheritance)扩展对象
Javascript是一种基于原型的解释型脚本语言。与面向对象语言的最明显区别是，Javascript没有类，只有对象。
可以基于现有对象创建一系列的原型对象，从而实现对象的扩展功能。
var Contact = function(pageTitle) { this.pageTitle = pageTitle; this.bindEvents(); // binding events as soon as the object is instantiated
this.additionalEvents(); // additional events such as DOM manipulation etc
}; var Contact.prototype.bindEvents = function() { $('ul.menu').on('click', 'li.email, $.proxy(this.toggleEmail, this)); }; var Contact.prototype.toggleEmail = function(e) { //Toggle the email feature on the page };
<script src="/path_to_script_from_above/contact.js"></script>
<script>
new Contact("Contact Us"); </script>
2.4 使用Ajax实现页面局部刷新
System.Web.MVC.Ajax命名空间中提供了一些方法来简化Ajax开发。
@model MvcApplication1.Models.Article @{ ViewBag.Title = "Create"; } <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"
/>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script> $(function() { $(".ReleaseDate").datepicker(); }); </script>
<h2>Create</h2> @using (Ajax.BeginForm("PerformAction", new AjaxOptions { OnSuccess = "OnSuccess", OnFailure = "OnFailure" })) { <fieldset>
<legend>Article</legend>
<div class="editor-label"> @Html.LabelFor(model => model.Title) </div>
<div class="editor-field"> @Html.EditorFor(model => model.Title) @Html.ValidationMessageFor(model => model.Title)
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset> } <p id="errorMessage"/>
<script type="text/javascript">
function OnSuccess(response) { //do something
} function OnFailure(response) { //show failure
document.getElementById('errorMessage').innerHTML = 'THERE WAS AN ERROR'; } </script>
<div> @Html.ActionLink("Back to List", "Index") </div> @section Scripts { @Scripts.Render("~/bundles/jqueryval") }
2.5 使用JQuery实现UI操作
JQuery在 操作DOM、动画、事件处理等方面都提供了易用的功能。还包括浏览器兼容性方面。
3. 总结
① 客户端验证是Javascript和ASP.NET MVC支持的重要特性。用于在客户端检测是否有非法的数据进入程序。
② 第三方Javascript库，包括JQuery，在MVC程序的UI设计中很有用。通过访问DOM，Javascript可以完全控制UI的各个方面，且不需要服务端的交互。
③ JQuery不单单是提供了一些UI控件，在动画、事件处理方面也有很好的支持。并且兼容大部分的主流浏览器。
④ Javascript中，可以通过prototype来扩展现有对象的功能。
⑤ 合理使用Ajax，可以开发出动态的、快速响应的、流畅的程序。