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

发布时间：2020-12-16 09:05:14 所属栏目：asp.Net 来源：网络整理

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

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

目录
一、一个简单的基于CRUD
二、通过ASP.NET Web API提供服务
三、通过JQuery消费服务

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

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

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

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

   1: public class Contact

   3:     string Id { get; set; }

   5:     string LastName { get; set; }

   7:     string EmailAddress { get; set; }

    private static List<Contact> contacts = new List<Contact>


       5:         new Contact{ Id="001",FirstName = "San",LastName="Zhang",PhoneNo="123",EmailAddress="zhangsan@gmail.com"},


       7:     };


       9:     public IEnumerable<Contact> Get()


      11:         return contacts;


      13:? 


      15:     {


      17:     }


      19:     void Put(Contact contact)


      21:         if (string.IsNullOrEmpty(contact.Id))


      23:             contact.Id = Guid.NewGuid().ToString();


      25:         contacts.Add(contact);


      27:? 


      29:     {


      31:         contacts.Add(contact);


      33:? 


      36:         Contact contact = contacts.FirstOrDefault(c => c.Id == id);


      38:     }


    class MvcApplication : System.Web.HttpApplication


    static void RegisterRoutes(RouteCollection routes)


       6:          //...


       8:             name: "DefaultApi",


      11:         );


    class HomeController : Controller


    return View();


       7: }

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

1:?

   3:         loadAllContacts();

   5:      )

function loadAllContacts() {

   9:             url     : "api/contact",

  11:             dataType: "json",1)" id="lnum12">  12:             success : function (data) { renderContactList(data) }

  14:         );

  16:?

  18:         var html = "<table>";

  20:         for (i = 0; i < contacts.length; i++) {

  22:                  + contacts[i].LastName + "</td><td>" + contacts[i].PhoneNo + "</td><td>"

 + contacts[i].Id + "')">Update</a> &nbsp;&nbsp;&nbsp;&nbsp;"

 + contacts[i].Id + "')">Delete</a>" + "</td></tr>";

  27:         html += "<tr><td>" + "<input id="firstName" type="text" class="textbox"/>" +   28:             + "<input id="lastName" type="text" class="textbox"/>" +   29:             + "<input id="phoneNo" type="text" class="textbox"/>" +   30:             + "<input id="emailAddress" type="text" class="textbox long"/>" + "</td><td>"

  33:         $("#contacts").html(html);

  35:     }

  37:     function deleteContact(id) {

  39:             url     : "api/contact/" + id,1)" id="lnum40">  40:             type    : "DELETE",1)" id="lnum41">  41:             success : function () { loadAllContacts();}

  43:     }

  45:     function updateContact(id) {

  47:         $.ajax({

  51:                 contact.EmailAddress = emailAddress;

  53:             }

  55:     }

  57:     function update(contact) {

  59:             url         : "api/contact/",1)" id="lnum60">  60:             type        : "POST",1)" id="lnum61">  61:             data        : contact,1)" id="lnum62">  62:             contentType : "application/json",1)" id="lnum63">  63:             success     : function () { loadAllContacts(); }

  65:     }

  67:     function addContact() {

  69:         contact.FirstName       = $("#firstName").attr("value");

  74:             url         :   75:             type        : "PUT",1)" id="lnum76">  76:             data        : contact,1)" id="lnum77">  77:             contentType :   78:             success     : function () { loadAllContacts(); }

  80:     }

</script>