當我們在開發Web應用程序中使用JQuery和Ajax異步調用來實現很多功能時，不僅提高了程序的性能，而且給用戶一個更好的交互式界面操作體驗。接下來我們依舊用簡單的實例來學習下它們的應用。
創建一個ASP.NET MVC Web Application
在Visual Studio中創建ASP.NET Web Application應用程序，在向導的下一個窗口中選擇空的模板。
創建Model
接着我們在Models文件夾下創建一個Product類，用來傳遞數據。
public class Product { public int ProductID { get; set; } public string ProductName { get; set; } public decimal Price { get; set; } public int Count { get; set; } public string Description { get; set; } }
創建Controller
Model創建好之后，接着在Controllers文件下創建一個Controller, 命名為"ProductController"。
創建一些測試數據。
1 public ActionResult Index() 2 { 3 List<Product> products = new List<Product>() 4 { 5 new Product {ProductID=1,ProductName="Product A",Price=1000000,Count=5,Description="Description A"}, 6 new Product {ProductID=2,ProductName="Product B",Price=200000,Count=2,Description="Description B"}, 7 new Product {ProductID=3,ProductName="Product C",Price=500000,Count=8,Description="Description C"}, 8 new Product {ProductID=4,ProductName="Product D",Price=80000,Count=10,Description="Description D"}, 9 new Product {ProductID=5,ProductName="Product E",Price=300000,Count=3,Description="Description E"} 10 }; 11 12 return View(products); 13 }
創建View
然后我們在Views -> Product目錄下創建一個View，命名為Index，並綁定顯示Controller中的Product對象列表。
1 @model IEnumerable<JqueryAjaxApplication.Models.Product> 2 @{ 3 Layout = null; 4 } 5 6 <!DOCTYPE html> 7 8 <html> 9 <head> 10 <meta name="viewport" content="width=device-width" /> 11 <title>Index</title> 12 </head> 13 <body> 14 <div> 15 <h2 style="padding-left:5px;">Product List</h2> 16 <table cellpadding="5" cellspacing="5" > 17 <tr style="background-color: #7FBA00;"> 18 <th>Product ID</th> 19 <th>Product Name</th> 20 <th>Price</th> 21 <th>Count</th> 22 <th>Description</th> 23 </tr> 24 @foreach (var product in Model) 25 { 26 <tr style="background-color: #7FBA00; color: white;"> 27 <td>@product.ProductID</td> 28 <td>@product.ProductName</td> 29 <td>@product.Price</td> 30 <td>@product.Count</td> 31 <td>@product.Description</td> 32 </tr> 33 } 34 </table> 35 </div> 36 </body> 37 </html>
我們看到上面使用Controller里輸出，View里綁定的方式來實現列表數據的展現，接下來我們進入主題，來看看Ajax是如何實現加載列表數據等的。
首先我們需要創建一個Partial View用來展現數據。
編寫代碼如下：
1 @using JqueryAjaxApplication.Models 2 @model IEnumerable<Product> 3 4 <div> 5 <table cellpadding="5" cellspacing="5"> 6 <tr style="background-color: #7FBA00;"> 7 <th>Product ID</th> 8 <th>Product Name</th> 9 <th>Price</th> 10 <th>Count</th> 11 <th>Description</th> 12 </tr> 13 @foreach (Product product in Model) 14 { 15 <tr style="background-color: #7FBA00; color: white;"> 16 <td>@product.ProductID</td> 17 <td>@product.ProductName</td> 18 <td>@product.Price</td> 19 <td>@product.Count</td> 20 <td>@product.Description</td> 21 </tr> 22 } 23 </table> 24 </div>
相應的Controller的代碼調整如下：
1 public ActionResult Index() 2 { 3 return View(); 4 } 5 6 public PartialViewResult Products() 7 { 8 return PartialView(products); 9 } 10 11 List<Product> products = new List<Product>() 12 { 13 new Product {ProductID=1,ProductName="Product A",Price=1000000,Count=5,Description="Description A"}, 14 new Product {ProductID=2,ProductName="Product B",Price=200000,Count=2,Description="Description B"}, 15 new Product {ProductID=3,ProductName="Product C",Price=500000,Count=8,Description="Description C"}, 16 new Product {ProductID=4,ProductName="Product D",Price=80000,Count=10,Description="Description D"}, 17 new Product {ProductID=5,ProductName="Product E",Price=300000,Count=3,Description="Description E"} 18 };
使用JQuery和Ajax進行數據操作
獲取Product列表
下面我們修改Index View，使用Ajax調用實現點擊Button按鈕獲取Product列表的功能。
1 @{ 2 Layout = null; 3 } 4 5 <!DOCTYPE html> 6 7 <html> 8 <head> 9 <meta name="viewport" content="width=device-width" /> 10 <title>Index</title> 11 <script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script> 12 </head> 13 <body> 14 <div> 15 <div style="padding-left:5px;"> 16 <input id="btnAjax" name="btnAjax" type="button" value="Get Products" /> 17 </div> 18 <div id="products"></div> 19 </div> 20 21 <script> 22 $('#btnAjax').click(function () { 23 $.ajax({ 24 url: '/Product/Products', 25 contentType: 'application/html; charset=utf-8', 26 type: 'GET', 27 dataType: 'html' 28 }) 29 .success(function (result) { 30 $('#products').html(result); 31 }) 32 .error(function (data) { 33 alert(data); 34 }) 35 }); 36 </script> 37 </body>
點擊按鈕前：
點擊按鈕后：
獲取單個Product信息
Product列表數據成功加載，接着我們還想能夠查看獲取單條Product數據，並且能夠修改Product信息，下面我們就簡單實踐一下。
首先，在列表數據視圖里的每條數據最右邊加上一個Edit鏈接，修改Products Partial View代碼如下：
1 @using JqueryAjaxApplication.Models 2 @model IEnumerable<Product> 3 4 <div> 5 <table cellpadding="5" cellspacing="5"> 6 <tr style="background-color: #7FBA00;"> 7 <th>Product ID</th> 8 <th>Product Name</th> 9 <th>Price</th> 10 <th>Count</th> 11 <th>Description</th> 12 <th></th> 13 </tr> 14 @foreach (Product product in Model) 15 { 16 <tr style="background-color: #7FBA00; color: white;"> 17 <td>@product.ProductID</td> 18 <td>@product.ProductName</td> 19 <td>@product.Price</td> 20 <td>@product.Count</td> 21 <td>@product.Description</td> 22 <td><a href="#" onclick="EditProduct(@product.ProductID)">Edit</a></td> 23 </tr> 24 } 25 </table> 26 </div>
同時，我們在Index頁面上還需要為Product的每個字段創建一個textbox,用來顯示我們獲取到的Product信息。並且可以修改字段信息，保存修改，修改Index頁面如下：
1 <div> 2 <div style="padding-left:5px;"> 3 <input id="btnAjax" name="btnAjax" type="button" value="Get Products" /> 4 </div> 5 <div style="padding: 5px; font-weight: bold;">Product List</div> 6 <div id="products"></div> 7 <div id="editBlock" style="padding-top:10px;display:none;"> 8 <div style="font-weight:bold;">Edit Product</div> 9 <table> 10 <tr><td>Product ID:</td><td><input id="txtProductID" name="txtProductID" type="text" disabled /></td></tr> 11 <tr><td> Product Name:</td><td><input id="txtProductName" name="txtProductName" type="text" /></td></tr> 12 <tr><td>Count:</td><td><input id="txtCount" name="txtCount" type="text" /></td></tr> 13 <tr><td> Price:</td><td><input id="txtPrice" name="txtPrice" type="text" /></td></tr> 14 <tr><td> Description:</td><td><input id="txtDescription" name="txtDescription" type="text" /></td></tr> 15 </table> 16 <div style="padding-top:5px;"> 17 <div id="message" style="color:green;"></div> 18 <input id="btnSave" name="btnSave" type="button" value="Save" /> 19 </div> 20 </div> 21 </div>
在Controller里添加獲取單條Product信息的Action如下：
public JsonResult GetProduct(int productId) { return Json(products.FirstOrDefault(p => p.ProductID == productId), JsonRequestBehavior.AllowGet); }
相應的添加獲取單條Product的ajax方法如下：
function EditProduct(productId) { $("#editBlock").show(); $.ajax({ url: '/Product/GetProduct?productId='+productId, contentType: 'application/html; charset=utf-8', type: 'GET' }) .success(function (result) { if (result != null) { $("#txtProductID").val(result.ProductID); $("#txtProductName").val(result.ProductName); $("#txtCount").val(result.Count); $("#txtPrice").val(result.Price); $("#txtDescription").val(result.Description); } }) .error(function (data) { alert(data); }) }
此時運行程序
加載Product列表
點擊任意一條記錄的Edit鏈接，這里我們點擊第一條記錄。
保存編輯Product信息
我們看到第一條記錄的各個字段值顯示到了對應的textbox中，接着我們來實現修改Product的內容，點Save按鈕能保存成功，並顯示到Product列表中。
在Controller里添加修改Product信息的Action，我們將修改后的結果返回給Products Partial View中。
1 public PartialViewResult EditProduct(Product product) 2 { 3 foreach (var p in products) 4 { 5 if (p.ProductID == product.ProductID) 6 { 7 p.ProductName = product.ProductName; 8 p.Count = product.Count; 9 p.Price = product.Price; 10 p.Description = product.Description; 11 } 12 } 13 14 return PartialView("Products", products); 15 }
最后，我們添加Save按鈕的click事件，ajax調用上面我們創建的EditProduct Action。
1 $('#btnSave').click(function () { 2 var product = { 3 ProductID: $('#txtProductID').val(), ProductName: $('#txtProductName').val(), 4 Count: $('#txtCount').val(), Price: $('#txtPrice').val(), 5 Description: $('#txtDescription').val() 6 }; 7 $.ajax({ 8 url: '/Product/EditProduct', 9 contentType: 'application/html; charset=utf-8', 10 data: product, 11 type: 'GET', 12 dataType:'html' 13 }) 14 .success(function (result) { 15 $('#products').html(result); 16 }) 17 .error(function (data) { 18 alert(data); 19 }) 20 });
好了，我們再次運行程序，點擊Product Name為"Product A"記錄的Edit鏈接。
接着，我們修改以上信息，將Count改為10，Price改為1200000, Description改為Description AAA，並點擊Save按鈕。
好了，本篇就先到此，希望對你有所幫助，謝謝！