思洋互动网站建设学前班

三、通过JQuery消费服务

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

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

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>