当我们在开发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 products = new List () 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 IEnumerable2 @{ 3 Layout = null; 4 } 5 6 7 8 9 10 11 Index 12 13 141536 37Product List
1617
3518 24 @foreach (var product in Model)25 {26Product ID 19Product Name 20Price 21Count 22Description 2327 33 }34@product.ProductID 28@product.ProductName 29@product.Price 30@product.Count 31@product.Description 32
我们看到上面使用Controller里输出，View里绑定的方式来实现列表数据的展现，接下来我们进入主题，来看看Ajax是如何实现加载列表数据等的。
首先我们需要创建一个Partial View用来展现数据。
编写代码如下：
1 @using JqueryAjaxApplication.Models 2 @model IEnumerable3 4 56
247 13 @foreach (Product product in Model)14 {15Product ID 8Product Name 9Price 10Count 11Description 1216 22 }23@product.ProductID 17@product.ProductName 18@product.Price 19@product.Count 20@product.Description 21
相应的Controller的代码调整如下：
1 public ActionResult Index() 2 { 3 return View(); 4 } 5 6 public PartialViewResult Products() 7 { 8 return PartialView(products); 9 }10 11 List products = new List ()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 6 7 8 9 10 Index 11 12 13 14 15 16 17 18 19 20 21 37 点击按钮前：
点击按钮后：
获取单个Product信息
Product列表数据成功加载，接着我们还想能够查看获取单条Product数据，并且能够修改Product信息，下面我们就简单实践一下。
首先，在列表数据视图里的每条数据最右边加上一个Edit链接，修改Products Partial View代码如下：
1 @using JqueryAjaxApplication.Models 2 @model IEnumerable3 4 56
267 14 @foreach (Product product in Model)15 {16Product ID 8Product Name 9Price 10Count 11Description 1213 17 24 }25@product.ProductID 18@product.ProductName 19@product.Price 20@product.Count 21@product.Description 22Edit 23
同时，我们在Index页面上还需要为Product的每个字段创建一个textbox,用来显示我们获取到的Product信息。并且可以修改字段信息，保存修改，修改Index页面如下：
123 45Product List6 7 21
在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按钮。
好了，本篇就先到此，希望对你有所帮助，谢谢！