当我们在开发 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 IEnumerable
- 2 @{
- 3 Layout = null;
- 4 }
- 5
- 6
- 7
- 8
- 9
- 10 "viewport" content="width=device-width" />
- 11
- 12
- 13
- 14
- 15 "padding-left:5px;">Product List
- 16 "5" cellspacing="5" >
- 17 "background-color: #7FBA00;">
- 18 Product ID
- 19 Product Name
- 20 Price
- 21 Count
- 22 Description
- 23
- 24 @foreach (var product in Model)
- 25 {
- 26 "background-color: #7FBA00; color: white;">
- 27 @product.ProductID
- 28 @product.ProductName
- 29 @product.Price
- 30 @product.Count
- 31 @product.Description
- 32
- 33 }
- 34
- 35
- 36
- 37
我们看到上面使用 Controller 里输出,View 里绑定的方式来实现列表数据的展现,接下来我们进入主题,来看看 Ajax 是如何实现加载列表数据等的。
首先我们需要创建一个 Partial View 用来展现数据。
编写代码如下:
- 1 @using JqueryAjaxApplication.Models
- 2 @model IEnumerable
- 3
- 4
- 5 "5" cellspacing="5">
- 6 "background-color: #7FBA00;">
- 7 Product ID
- 8 Product Name
- 9 Price
- 10 Count
- 11 Description
- 12
- 13 @foreach (Product product in Model)
- 14 {
- 15 "background-color: #7FBA00; color: white;">
- 16 @product.ProductID
- 17 @product.ProductName
- 18 @product.Price
- 19 @product.Count
- 20 @product.Description
- 21
- 22 }
- 23
- 24
相应的 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 "viewport" content="width=device-width" />
- 10
- 11 "~/Scripts/jquery-1.10.2.min.js" type="text/javascript">
- 12
- 13
- 14
- 15 "padding-left:5px;">
- 16 "btnAjax" name="btnAjax" type="button" value="Get Products" />
- 17
- 18 "products">
- 19
- 20
- 21 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
- 37
点击按钮前:
点击按钮后:
获取单个 Product 信息
Product 列表数据成功加载,接着我们还想能够查看获取单条 Product 数据,并且能够修改 Product 信息,下面我们就简单实践一下。
首先,在列表数据视图里的每条数据最右边加上一个 Edit 链接,修改 Products Partial View 代码如下:
- 1 @using JqueryAjaxApplication.Models
- 2 @model IEnumerable
- 3
- 4
- 5 "5" cellspacing="5">
- 6 "background-color: #7FBA00;">
- 7 Product ID
- 8 Product Name
- 9 Price
- 10 Count
- 11 Description
- 12
- 13
- 14 @foreach (Product product in Model)
- 15 {
- 16 "background-color: #7FBA00; color: white;">
- 17 @product.ProductID
- 18 @product.ProductName
- 19 @product.Price
- 20 @product.Count
- 21 @product.Description
- 22 <td><a href="#" onclick="EditProduct(@product.ProductID)">Edit</a></td>
- 23
- 24 }
- 25
- 26
同时,我们在 Index 页面上还需要为 Product 的每个字段创建一个 textbox, 用来显示我们获取到的 Product 信息。并且可以修改字段信息,保存修改,修改 Index 页面如下:
- 1
- 2 "padding-left:5px;">
- 3 "btnAjax" name="btnAjax" type="button" value="Get Products" />
- 4
- 5 "padding: 5px; font-weight: bold;">Product List
- 6 "products">
- 7 "editBlock" style="padding-top:10px;display:none;">
- 8 "font-weight:bold;">Edit Product
- 9
- 10 Product ID:"txtProductID" name="txtProductID" type="text" disabled />
- 11 Product Name:"txtProductName" name="txtProductName" type="text" />
- 12 Count:"txtCount" name="txtCount" type="text" />
- 13 Price:"txtPrice" name="txtPrice" type="text" />
- 14 Description:"txtDescription" name="txtDescription" type="text" />
- 15
- 16 "padding-top:5px;">
- 17 "message" style="color:green;">
- 18 "btnSave" name="btnSave" type="button" value="Save" />
- 19
- 20
- 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 按钮。
好了,本篇就先到此,希望对你有所帮助,谢谢!
来源: http://www.cnblogs.com/mejoy/p/6382746.html