为ASP.NET MVC框架添加AJAX支持上

一、引言

　　本文中，我们将向你展示如何在基于ASP.NET MVC框架构建的ASP.NET应用程序中添加一些基本的Ajax特征(例如局部更新及行为组件等概念)。

　　【说明】本文向你提供了有关于ASP.NET MVC框架的完整应用源码及测试示例。在本文方案中，共有两个工程：一个是TaskList（Web应用程序），另一个是AjaxMVC（一个提供了扩展的Ajax支持的类库）。请注意，类库AjaxMVC中提供的函数实现了一些基本的Ajax功能，例如不依赖于页面回寄的局部更新以及关联到DOM元素的类似于ASP.NET AJAX框架中行为（Behavior）的扩展。实际上，最新的ASP.NET MVC框架版本（Preview 4）中就已经提供了现成的Ajax支持功能。所以，你可以把这里提供的功能作为早期ASP.NET MVC框架版本的试验品学习。

　　二、构建简单任务列表示例程序
为了简化问题的表面而专注于讨论本文的主题，本文中提供了一个基本的任务列表案例应用程序。尽管此程序非常简单，但是它却让我们专注于讨论我们更感兴趣的Ajax特征。下面给出了本文示例应用程序的一个运行时刻快照。

　　有关MVC框架的经典入门级教程，请读者参考Scott Guthrie的博客（http://weblogs.asp.net/scottgu/archive/2007/11/13/asp-net-mvc-framework-part-1.aspx）。我们不想在此重复这些内容，但是就像Scott Guthrie提供的产品目录应用程序一样，本文中提供的这个TaskList应用程序使用一个控制器来处理来自客户端的请求，使用一组类形成模型，用于描述一个任务项的集合，还有一组视图用于生成用户接口。

　　首先，在开始为示例添加一些Ajax功能之前，我们来分析本文示例应用程序的基本组成

（一）模型

　　我们先来分析一下本示例的模型部分，主要由下面两部分组成：

　　public class Task {
　　public int ID { get; }
　　public bool IsComplete { get; set; }
　　public string Name { get; set; }
　　}
　　public interface ITaskDB {
　　Task AddTask(string name);
　　void CompleteTask(Task task);
　　Task GetTask(int taskID);
　　ICollection<Task> GetTasks();
　　void RemoveTask(Task task);
　　}

　　这里的代码没有多少意思。但要注意的是，在本例中，为了简化问题起见，我直接使用了一个内存中的数据集来模拟任务列表数据（而没有使用数据库示例）。

　　另外，需要一提的是，这里使用了接口（ITaskDB）的方法，以方便添加测试代码（后面讨论）。

　　（二）控制器

　　本示例中提供了一个简单的控制器TaskListController。控制器中定义了几个Action方法。下面列出了其中的两个方法：

　　public class TaskListController : Controller {
　　private ITaskDB _taskDB;
　　public TaskListController() : this(GlobalTaskDB) { }
　　public TaskListController(ITaskDB taskDB)
　　{
　　_taskDB = taskDB;
　　}
　　//示例URL: /TaskList或者/TaskList/List
　　[ControllerAction]
　　public void List() {
　　Dictionary<string, object> viewData = new Dictionary<string, object>();
　　viewData["Tasks"] = _taskDB.GetTasks();
　　RenderView("List", viewData);
　　}
　　//示例URL: /TaskList/Add
　　[ControllerAction]
　　public void Add(string name) {
　　Task newTask = null;
　　if (String.IsNullOrEmpty(name) == false) {
　　newTask = _taskDB.AddTask(name);
　　}
　　if (newTask != null) {
　　RedirectToAction("List");
　　}
　　else {
　　Dictionary<string, object> viewData = new Dictionary<string, object>();
　　viewData["Tasks"] = _taskDB.GetTasks();
　　viewData["ShowAddTaskError"] = true;
　　RenderView("List", viewData);
　　}
　　}
　　//其他的Action方法：例如DeleteTask, CompleteTask
　　}
（三）视图

　　接下来，让我们讨论本示例的视图部分。本示例的视图页面是List.aspx，定义于示例程序的/Views/TaskList文件夹下。下面给出了一些令人感兴趣的标记代码：

　<div id="taskList">
　　<% foreach (Task task in Tasks) { %>
　　<div>
　　<div id="taskItem<%= task.ID %>" class="taskPanel">
　　<form method="post" action="<% Url.Action("CompleteTask") %>">
　　<input type="hidden" name="taskID" value="<%= task.ID %>" />
　　<input type="submit" name="completeTask" value="Done!" />
　　<input type="submit" name="deleteTask" value="Delete" />
　　<span><%= Html.Encode(task.Name) %></span>
　　</form>
　　</div>
　　</div>
　　<% } %>
　　</div>
　　<form method="post" action="<%= Url.Action("Add") %>">
　　<input type="text" name="name" />
　　<input type="submit" name="addTask" value="Add Task" />
　　</form>

　　（四）单元测试

　　最后，我们来看一下本示例中的单元测试部分的编码。在本例中，测试用例定义于一个单独的Test工程。下面给出了本示例控制器中定义的Add方法相关的一组测试
　public void TestAddEmptyName() {
　　TestTaskDB taskDB = new TestTaskDB();
　　taskDB.AddTask("Test Task 1");
　　taskDB.AddTask("Test Task 2");
　　TestTaskListController controller = new TestTaskListController(taskDB);
　　controller.Add(null);
　　Assert.AreEqual("List", controller.RenderedView);
　　Assert.AreEqual(true, controller.GetRenderedViewData("ShowAddTaskError"));
　　Assert.AreEqual(2, taskDB.Count);
　　}
　　[TestMethod]
　　public void TestAddValidName() {
　　TestTaskDB taskDB = new TestTaskDB();
　　taskDB.AddTask("Test Task 1");
　　taskDB.AddTask("Test Task 2");
　　TestTaskListController controller = new TestTaskListController(taskDB);
　　controller.Add("New Task");
　　Assert.AreEqual("List", controller.RedirectedView);
　　Assert.AreEqual(3, taskDB.Count);
　　}

　　好，至此我已经较完整地向你介绍了本文中编写的简单的TaskList应用程序。接下来，让我们讨论如何在这个示例中添加一些Ajax支持功能。下面列出了我们计划要添加的一些功能：

　　1. 在任务列表中添加新任务（位于列表的最后）而不必进行完整的页面回送；

　　2. 编辑和删除任务，同样不必进行完整的页面回送；

　　3. 在文本框中添加水印效果。

　　为了实现上面的既定目标和最大限度地把新添加的功能与原有ASP.NET MVC框架融合到一起，我们使用了System.Web.Mvc命名空间中新增加的一些类，例如Ajax扩展方法等