当我们在开发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“。
创建一些测试数据。
public ActionResult Index()
{
List<Product> products = new List<Product>()
{
new Product {ProductID=,ProductName="Product A",Price=,Count=,Description="Description A"},
new Product {ProductID=,ProductName="Product B",Price=,Count=,Description="Description B"},
new Product {ProductID=,ProductName="Product C",Price=,Count=,Description="Description C"},
new Product {ProductID=,ProductName="Product D",Price=,Count=,Description="Description D"},
new Product {ProductID=,ProductName="Product E",Price=,Count=,Description="Description E"}
}; return View(products);
}
创建View
然后我们在Views -> Product目录下创建一个View，命名为Index，并绑定显示Controller中的Product对象列表。
@model IEnumerable<JqueryAjaxApplication.Models.Product>
@{
Layout = null;
} <!DOCTYPE html> <html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
<h2 style="padding-left:5px;">Product List</h2>
<table cellpadding="" cellspacing="" >
<tr style="background-color: #7FBA00;">
<th>Product ID</th>
<th>Product Name</th>
<th>Price</th>
<th>Count</th>
<th>Description</th>
</tr>
@foreach (var product in Model)
{
<tr style="background-color: #7FBA00; color: white;">
<td>@product.ProductID</td>
<td>@product.ProductName</td>
<td>@product.Price</td>
<td>@product.Count</td>
<td>@product.Description</td>
</tr>
}
</table>
</div>
</body>
</html>
我们看到上面使用Controller里输出，View里绑定的方式来实现列表数据的展现，接下来我们进入主题，来看看Ajax是如何实现加载列表数据等的。
首先我们需要创建一个Partial View用来展现数据。
编写代码如下：
@using JqueryAjaxApplication.Models
@model IEnumerable<Product> <div>
<table cellpadding="" cellspacing="">
<tr style="background-color: #7FBA00;">
<th>Product ID</th>
<th>Product Name</th>
<th>Price</th>
<th>Count</th>
<th>Description</th>
</tr>
@foreach (Product product in Model)
{
<tr style="background-color: #7FBA00; color: white;">
<td>@product.ProductID</td>
<td>@product.ProductName</td>
<td>@product.Price</td>
<td>@product.Count</td>
<td>@product.Description</td>
</tr>
}
</table>
</div>
相应的Controller的代码调整如下：
public ActionResult Index()
{
return View();
} public PartialViewResult Products()
{
return PartialView(products);
} List<Product> products = new List<Product>()
{
new Product {ProductID=,ProductName="Product A",Price=,Count=,Description="Description A"},
new Product {ProductID=,ProductName="Product B",Price=,Count=,Description="Description B"},
new Product {ProductID=,ProductName="Product C",Price=,Count=,Description="Description C"},
new Product {ProductID=,ProductName="Product D",Price=,Count=,Description="Description D"},
new Product {ProductID=,ProductName="Product E",Price=,Count=,Description="Description E"}
};
使用JQuery和Ajax进行数据操作
获取Product列表
下面我们修改Index View，使用Ajax调用实现点击Button按钮获取Product列表的功能。
@{
Layout = null;
} <!DOCTYPE html> <html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
</head>
<body>
<div>
<div style="padding-left:5px;">
<input id="btnAjax" name="btnAjax" type="button" value="Get Products" />
</div>
<div id="products"></div>
</div> <script>
$('#btnAjax').click(function () {
$.ajax({
url: '/Product/Products',
contentType: 'application/html; charset=utf-8',
type: 'GET',
dataType: 'html'
})
.success(function (result) {
$('#products').html(result);
})
.error(function (data) {
alert(data);
})
});
</script>
</body>
点击按钮前：
点击按钮后：
获取单个Product信息
Product列表数据成功加载，接着我们还想能够查看获取单条Product数据，并且能够修改Product信息，下面我们就简单实践一下。
首先，在列表数据视图里的每条数据最右边加上一个Edit链接，修改Products Partial View代码如下：
@using JqueryAjaxApplication.Models
@model IEnumerable<Product> <div>
<table cellpadding="" cellspacing="">
<tr style="background-color: #7FBA00;">
<th>Product ID</th>
<th>Product Name</th>
<th>Price</th>
<th>Count</th>
<th>Description</th>
<th></th>
</tr>
@foreach (Product product in Model)
{
<tr style="background-color: #7FBA00; color: white;">
<td>@product.ProductID</td>
<td>@product.ProductName</td>
<td>@product.Price</td>
<td>@product.Count</td>
<td>@product.Description</td>
<td><a href="#" rel="external nofollow" onclick="EditProduct(@product.ProductID)">Edit</a></td>
</tr>
}
</table>
</div>
同时，我们在Index页面上还需要为Product的每个字段创建一个textbox,用来显示我们获取到的Product信息。并且可以修改字段信息，保存修改，修改Index页面如下：
<div>
<div style="padding-left:5px;">
<input id="btnAjax" name="btnAjax" type="button" value="Get Products" />
</div>
<div style="padding: 5px; font-weight: bold;">Product List</div>
<div id="products"></div>
<div id="editBlock" style="padding-top:10px;display:none;">
<div style="font-weight:bold;">Edit Product</div>
<table>
<tr><td>Product ID:</td><td><input id="txtProductID" name="txtProductID" type="text" disabled /></td></tr>
<tr><td> Product Name:</td><td><input id="txtProductName" name="txtProductName" type="text" /></td></tr>
<tr><td>Count:</td><td><input id="txtCount" name="txtCount" type="text" /></td></tr>
<tr><td> Price:</td><td><input id="txtPrice" name="txtPrice" type="text" /></td></tr>
<tr><td> Description:</td><td><input id="txtDescription" name="txtDescription" type="text" /></td></tr>
</table>
<div style="padding-top:5px;">
<div id="message" style="color:green;"></div>
<input id="btnSave" name="btnSave" type="button" value="Save" />
</div>
</div>
</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中。
public PartialViewResult EditProduct(Product product)
{
foreach (var p in products)
{
if (p.ProductID == product.ProductID)
{
p.ProductName = product.ProductName;
p.Count = product.Count;
p.Price = product.Price;
p.Description = product.Description;
}
} return PartialView("Products", products);
}
最后，我们添加Save按钮的click事件，ajax调用上面我们创建的EditProduct Action。
$('#btnSave').click(function () {
var product = {
ProductID: $('#txtProductID').val(), ProductName: $('#txtProductName').val(),
Count: $('#txtCount').val(), Price: $('#txtPrice').val(),
Description: $('#txtDescription').val()
};
$.ajax({
url: '/Product/EditProduct',
contentType: 'application/html; charset=utf-8',
data: product,
type: 'GET',
dataType:'html'
})
.success(function (result) {
$('#products').html(result);
})
.error(function (data) {
alert(data);
})
});
好了，我们再次运行程序，点击Product Name为”Product A“记录的Edit链接。
接着，我们修改以上信息，将Count改为10，Price改为1200000, Description改为Description AAA，并点击Save按钮。
好了，本篇就先到此，希望对你有所帮助，谢谢！
