當(dāng)我們在開發(fā)Web應(yīng)用程序中使用JQuery和Ajax異步調(diào)用來實(shí)現(xiàn)很多功能時(shí)，不僅提高了程序的性能，而且給用戶一個更好的交互式界面操作體驗(yàn)。接下來我們依舊用簡單的實(shí)例來學(xué)習(xí)下它們的應(yīng)用。
創(chuàng)建一個ASP.NET MVC Web Application
在Visual Studio中創(chuàng)建ASP.NET Web Application應(yīng)用程序，在向?qū)У南乱粋€窗口中選擇空的模板。
創(chuàng)建Model
接著我們在Models文件夾下創(chuàng)建一個Product類，用來傳遞數(shù)據(jù)。
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; }
}
創(chuàng)建Controller
Model創(chuàng)建好之后，接著在Controllers文件下創(chuàng)建一個Controller, 命名為"ProductController"。
創(chuàng)建一些測試數(shù)據(jù)。
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 }
創(chuàng)建View
然后我們在Views -> Product目錄下創(chuàng)建一個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里綁定的方式來實(shí)現(xiàn)列表數(shù)據(jù)的展現(xiàn)，接下來我們進(jìn)入主題，來看看Ajax是如何實(shí)現(xiàn)加載列表數(shù)據(jù)等的。
首先我們需要創(chuàng)建一個Partial View用來展現(xiàn)數(shù)據(jù)。
編寫代碼如下：
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>
相應(yīng)的Controller的代碼調(diào)整如下：
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進(jìn)行數(shù)據(jù)操作
獲取Product列表
下面我們修改Index View，使用Ajax調(diào)用實(shí)現(xiàn)點(diǎn)擊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>
點(diǎn)擊按鈕前：
點(diǎn)擊按鈕后：
獲取單個Product信息
Product列表數(shù)據(jù)成功加載，接著我們還想能夠查看獲取單條Product數(shù)據(jù)，并且能夠修改Product信息，下面我們就簡單實(shí)踐一下。
首先，在列表數(shù)據(jù)視圖里的每條數(shù)據(jù)最右邊加上一個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>
同時(shí)，我們在Index頁面上還需要為Product的每個字段創(chuàng)建一個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);
}相應(yīng)的添加獲取單條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);
})
}
此時(shí)運(yùn)行程序
加載Product列表
點(diǎn)擊任意一條記錄的Edit鏈接，這里我們點(diǎn)擊第一條記錄。
保存編輯Product信息
我們看到第一條記錄的各個字段值顯示到了對應(yīng)的textbox中，接著我們來實(shí)現(xiàn)修改Product的內(nèi)容，點(diǎn)Save按鈕能保存成功，并顯示到Product列表中。
在Controller里添加修改Product信息的Action，我們將修改后的結(jié)果返回給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 =延伸閱讀
- 知識和經(jīng)驗(yàn)的重要性 2023-04-15
- 第一次在團(tuán)隊(duì)中擔(dān)當(dāng)組織者 2023-04-15
- 嚴(yán)謹(jǐn)和負(fù)責(zé) 2023-04-15
- 命名過程中的趣事 2022-07-12
- 在有限中追求無限的可能 2022-06-26
- 可貴的勞動成果和堅(jiān)實(shí)的同學(xué)情誼 2021-06-01
- 潛移默化中提高自己的編程能力 2021-05-19
- 堅(jiān)持和蛻變 2020-06-11
- 我和萬碼學(xué)堂一起走過的美好時(shí)光 2020-06-11
- 我和萬碼學(xué)堂一起走過的美好時(shí)光——張*祥 2020-01-15
知識和經(jīng)驗(yàn)的重要性