为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扩展方法等

本文作者:
« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3