ASP.NET Web API和JQ创建简单Web应用

开发 前端
这是一个只涉及到简单CRUD操作的Web应用,业务逻辑以Web API的形式定义并以服务的形式发布出来,前台通过jQuery处理用户交互并调用后台服务。

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

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

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

image

#p#

二、通过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.    }  

和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.        );  

按照注册的路由规则和Action方法名称与HTTP方法的默认影射机制,我们可以直接在浏览器中分别访问地址“/api/contact”和“/api/contact/001”得到所有联系人列表和ID为“001”的联系人信息。得到的结果如下图所示。

image

#p#

三、通过JQuery消费服务

我们通过ASP.NET MVC来构建Web应用,默认的HomeController定义如下,默认的Index操作仅仅是将默认的View呈现出来而已。

  1. public class HomeController : Controller  
  2. {  
  3.     public ActionResult Index()  
  4.     {  
  5.         return View();  
  6.     }  

View中对用户操作的相应和对后台服务的调用都通过JQuery来完成,整个View的定义如下所示。

  1. <script type="text/javascript">  
  2.         $(function () {  
  3.             loadAllContacts();  
  4.            }  
  5.          )  
  6.        
  7.         function loadAllContacts() {  
  8.             $.ajax({  
  9.                 url     : "api/contact",  
  10.                type    : "GET",  
  11.                dataType: "json",  
  12.                success : function (data) { renderContactList(data) }  
  13.               }  
  14.            );          
  15.        }      
  16.        function renderContactList(contacts) {  
  17.            var html = "<table>";  
  18.            html += "<tr><th>First Name</th><th>Last Name</th><th>Phone No.</th><th>Email Address</th><th></th></tr>";  
  19.            for (i = 0; i < contacts.length; i++) {  
  20.                html += "<tr><td>" + contacts[i].FirstName + "</td><td>" 
  21.                     + contacts[i].LastName + "</td><td>" + contacts[i].PhoneNo + "</td><td>" 
  22.                     + "<input type=\"text\" class=\"textbox long\" id=\"" + contacts[i].Id + "\" value =\"" + contacts[i].EmailAddress + "\"/>" + "</td><td>" 
  23.                     + "<a href=\"#\" onclick = \"updateContact('" + contacts[i].Id + "')\">Update</a> &nbsp;&nbsp;&nbsp;&nbsp;" 
  24.                     + "<a href=\"#\" onclick = \"deleteContact('" + contacts[i].Id + "')\">Delete</a>" + "</td></tr>";  
  25.            }  
  26.            html += "<tr><td>" + "<input id=\"firstName\" type=\"text\" class=\"textbox\"/>" + "</td><td>" 
  27.                + "<input id=\"lastName\" type=\"text\" class=\"textbox\"/>" + "</td><td>" 
  28.                + "<input id=\"phoneNo\" type=\"text\" class=\"textbox\"/>" + "</td><td>" 
  29.                + "<input id=\"emailAddress\" type=\"text\" class=\"textbox long\"/>" + "</td><td>"   
  30.                + "<a href=\"#\" id=\"add\" onclick=\"addContact();\">Create</a> " + "</td></tr>";  
  31.            html += "</table>";  
  32.            $("#contacts").html(html);  
  33.            $("table tr:odd").addClass("oddRow");  
  34.        }      
  35.        function deleteContact(id) {  
  36.            $.ajax({  
  37.                url     : "api/contact/" + id,  
  38.                type    : "DELETE",  
  39.                success : function () { loadAllContacts();}  
  40.            });  
  41.        }  
  42.       
  43.        function updateContact(id) {  
  44.            var emailAddress = $("#" +id).attr("value");  
  45.            $.ajax({  
  46.                url     : "api/contact/" + id,  
  47.                type    : "GET",  
  48.                success : function (contact) {  
  49.                    contact.EmailAddress = emailAddress;  
  50.                    update(contact);  
  51.                }  
  52.            });  
  53.        }      
  54.        function update(contact) {  
  55.            $.ajax({  
  56.                url         : "api/contact/",  
  57.                type        : "POST",  
  58.                data        : contact,  
  59.                contentType : "application/json",  
  60.                success     : function () { loadAllContacts(); }  
  61.            });  
  62.        }  
  63.       
  64.        function addContact() {  
  65.            var contact = new Object();  
  66.            contact.FirstName       = $("#firstName").attr("value");  
  67.            contact.LastName        = $("#lastName").attr("value");  
  68.            contact.PhoneNo         = $("#phoneNo").attr("value");  
  69.            contact.EmailAddress    = $("#emailAddress").attr("value");  
  70.            $.ajax({  
  71.                url         : "api/contact/",  
  72.                type        : "PUT",  
  73.                data        : contact,  
  74.                contentType : "application/json",  
  75.                success     : function () { loadAllContacts(); }  
  76.            });  
  77.        }  
  78. </script>  
  79.     <div id="contacts"></div>  
 

原文链接:http://www.cnblogs.com/artech/archive/2012/05/14/web-api-demo.html

责任编辑:张伟 来源: Artech的博客
相关推荐

2009-07-23 15:18:30

创建XML Web服务ASP.NET

2009-07-29 10:30:53

Web应用程序ASP.NET

2009-07-27 13:39:06

Web窗体页ASP.NET

2009-07-24 11:25:53

Web应用程序工程ASP.NET MVC

2009-07-29 17:16:47

2009-07-28 15:53:43

ASP.NET Web

2009-07-21 15:23:55

预编译Web应用程序ASP.NET

2009-07-24 10:41:00

ASP.NET Web

2009-08-03 17:35:07

ASP.NET WebASP.NET编程工具

2009-07-28 10:43:23

Web服务器ASP.NET

2014-07-31 09:28:09

ASP.NETWeb API

2010-06-23 08:56:58

ASP.NET MVC

2009-07-29 09:38:06

Web开发ASP.NET

2009-07-24 16:05:05

调用Web ServiASP.NET

2009-07-28 16:29:06

XML Web服务ASP.NET构造

2009-07-28 17:34:28

ASP.NET XML

2009-12-25 10:36:10

ASP.NET 和 X

2009-07-28 14:54:47

web.config文ASP.NET应用程序

2009-07-29 11:25:40

2012-09-18 11:02:10

ASP.NETC#Web Forms
点赞
收藏

51CTO技术栈公众号