第九章设计用户界面之设计实现界面行为

拼搏现实的明天。 2021-11-23 07:16 378阅读 0赞

**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") }

![161931-20151215175434474-834955944.png][]

③ **控制器**：控制器基类的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; }

还需要修改配置文件以允许服务端远程验证

**　2.2 使用Javascript和DOM控制程序行为**

通过访问DOM，Javascript可以展现出强大的控制UI的能力。

**2.3 使用原型继承(prototypal inheritance)扩展对象**

Javascript是一种基于原型的解释型脚本语言。与面向对象语言的最明显区别是，Javascript没有类，只有对象。

可以基于现有对象创建一系列的原型对象，从而实现对象的扩展功能。

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

</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，可以开发出动态的、快速响应的、流畅的程序。

转载于:https://www.cnblogs.com/stone\_lv/p/5049003.html

[161931-20151215175434474-834955944.png]: /images/20211122/4207fbd3b3694e8392783400392837a5.png