通过ASP.NET Web API + JQuery创建一个简单的Web应用

通过ASP.NET Web API + JQuery创建一个简单的Web应用2012-10-03 cnblogs Artech看了dudu的《HttpClient + ASP.NET Web API, WCF之外的另一个选择》一文，想起多很久之前体现ASP.NET Web API而创建的一个Demo。这是一个只涉及到简单CRUD操作的Web应用，业务逻辑以Web API的形式定义并以服务的形式发布出来，前台通过jQuery处理用户交互并调用后台服务。

一、一个简单的基于CRUD的Web应用

这个简单的Demo应用用于模拟“联系人管理”。当页面加载的时候，所有的联系人列表被列出来。在同一个页面中，我们可以添加一个新的联系人，也可以修改和删除现有联系人信息。整个应用唯一的页面在浏览器中的呈现效果如下图所示。

二、通过ASP.NET Web API提供服务

我们来简单介绍作为Web API形式发布的联系人管理服务的定义，先来看看用于表示联系人的Contact类型的定义。

 1: public class Contact
 2: {
 3: public string Id { get; set; }
 4: public string FirstName { get; set; }
 5: public string LastName { get; set; }
 6: public string PhoneNo { get; set; }
 7: public string EmailAddress { get; set; }
 8: }

“联系人服务”以具有如下定义的ContactController的形式定义，它是ApiController的子类。简单起见，我们采用静态字段作为对联系人信息的存储。ContactController定义了Get、Put、Post和Delete用于进行对联系人的获取、添加、修改和删除操作。我想对Web API不了解的人会感概，为了什么采用常用的四个HTTP方法作为操作的名称，因为它们在默认的情况下就可以映射为HTTP请求的方法。

 1: public class ContactController : ApiController
 2: {
 3: private static List<Contact> contacts = new List<Contact>
 4: {
 5: new Contact{ Id="001", FirstName = "San", LastName="Zhang", PhoneNo="123", EmailAddress="zhangsan@gmail.com"},
 6: new Contact{ Id="002",FirstName = "Si", LastName="Li", PhoneNo="456", EmailAddress="lisi@gmail.com"}
 7: };
 8:
 9: public IEnumerable<Contact> Get（）
10: {
11: return contacts;
12: }
13: 
14: public Contact Get（string id）
15: {
16: return contacts.FirstOrDefault（c => c.Id == id）;
17: }
18: 
19: public void Put（Contact contact）
20: {
21: if （string.IsNullOrEmpty（contact.Id））
22: {
23: contact.Id = Guid.NewGuid（）.ToString（）;
24: }
25: contacts.Add（contact）;
26: }
27: 
28: public void Post（Contact contact）
29: {
30: Delete（contact.Id）;
31: contacts.Add（contact）;
32: }
33: 
34: public void Delete（string id）
35: {
36: Contact contact = contacts.FirstOrDefault（c => c.Id == id）;
37: contacts.Remove（contact）;
38: }
39: }

和ASP.NET MVC Web应用一样，我们同样采用URL路由机制来实现请求地址与目标Controller和Action的映射，而针对API默认注册的路有如下所示。

 1: public class MvcApplication : System.Web.HttpApplication
 2: {
 3: //...
 4: public static void RegisterRoutes（RouteCollection routes）
 5: {
 6://...
 7: routes.MapHttpRoute（
 8: name: "DefaultApi",
 9: routeTemplate: "api/{controller}/{id}",
10: defaults: new { id = RouteParameter.Optional }
11: ）;
12: }