JQuery和Ajax在ASP.NET MVC中的基本应用
当我们在开发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="#" 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按钮。
好了，本篇就先到此，希望对你有所帮助，谢谢！
JQuery和Ajax在ASP.NET MVC中的基本应用的更多相关文章
- Asp.net mvc中的Ajax处理
在Asp.net MVC中的使用Ajax, 可以使用通用的Jquery提供的ajax方法,也可以使用MVC中的AjaxHelper. 这篇文章不对具体如何使用做详细说明,只对于在使用Ajax中的一些需 ...
- ASP.NET MVC 学习笔记-4.ASP.NET MVC中Ajax的应用
Ajax的全名为:Asynchronous Javascript And XML(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术.Ajax技术首先向Web服务器发送 ...
- ASP.NET MVC 学习笔记-7.自定义配置信息 ASP.NET MVC 学习笔记-6.异步控制器 ASP.NET MVC 学习笔记-5.Controller与View的数据传递 ASP.NET MVC 学习笔记-4.ASP.NET MVC中Ajax的应用 ASP.NET MVC 学习笔记-3.面向对象设计原则
ASP.NET MVC 学习笔记-7.自定义配置信息 ASP.NET程序中的web.config文件中,在appSettings这个配置节中能够保存一些配置,比如, 1 <appSettin ...
- asp.net mvc中使用jquery H5省市县三级地区选择控件
地区选择是项目开发中常用的操作,本文讲的控件是在手机端使用的选择控件,不仅可以用于实现地区选择,只要是3个级别的选择都可以实现,比如专业选择.行业选择.职位选择等.效果如下图所示: 附:本实例asp. ...
- ASP.NET MVC中使用ASP.NET AJAX异步访问WebService
使用过ASP.NET AJAX的朋友都知道,怎么通过ASP.NET AJAX在客户端访问WebService,其实在ASP.NET MVC中使用ASP.NET AJAX异步访问WebService 也 ...
- ASP.NET MVC中jQuery与angularjs混合应用传参并绑定数据
要求是这样子的,在一个列表页中,用户点击详细铵钮,带记录的主键值至另一页.在另一外页中,获取记录数据,然后显示此记录数据在网页上. 先用动图演示: 昨天有分享为ng-click传递参数 <ang ...
- 在 ASP.NET MVC 中充分利用 WebGrid (microsoft 官方示例)
在 ASP.NET MVC 中充分利用 WebGrid https://msdn.microsoft.com/zh-cn/magazine/hh288075.aspx Stuart Leeks 下载代 ...
- 序列化json对象，通过ajax传入asp.net mvc后台
序列化json对象,通过ajax传入asp.net mvc后台 序列化json对象,通过ajax传入asp.net mvc后台 今天遇到一个问题,准备把组织好的json对象通过jquery.aja ...
- 【ASP.NET MVC系列】浅谈jqGrid 在ASP.NET MVC中增删改查
ASP.NET MVC系列文章 [01]浅谈Google Chrome浏览器(理论篇) [02]浅谈Google Chrome浏览器(操作篇)(上) [03]浅谈Google Chrome浏览器(操作 ...
随机推荐
- github的SSH配置如下
Git是分布式的代码管理工具,远程的代码管理是基于SSH的,所以要使用远程的Git则需要SSH的配置. github的SSH配置如下: 一 . 设置Git的user name和email: $ git ...
- android开发学习——day3
关于android开发的详细过程了解 Android App程序的四种重要组成类型:1.Activity 2.Service 3.Content Provider 4.Broadcast Receiv ...
- django学习——url的name
html中的地址可以用写死的,也可以用生成的,如:<a href="{% url 'app-url' param1 param2 ... %}">link</a& ...
- eclipse中集成svn maven开发手册---合并主干
如图,代码提交分支之后 右键,项目,切换到主干版本 切换回主干版本后: 更新主干版本 合并 选择merge a range of revisions,点击next 录入要合并的分支版本的路径.此处的s ...
- js控制div显示与隐藏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Hybird应用开发实践（一）使用原生/cordova混合项目
最近准备尝试hybird开发原生应用,因为公司的项目本来就是原生开发的,所以准备选择cordova作为webview嵌入原生项目的开发方式.这里就以mac上整合ios项目为例. 1. 创建cordov ...
- eclipse开发velocity实例（初学）
开发环境 Eclipse Java EE IDE for Web Developers.(Version: Helios Service Release 1) jdk1.6.0_07 ...
- 用c3m自动生成的化学机理文件导入mfix里需要注意的一些问题
1. 首先是类似这种写法: Species_g(1) = "CH4" Species_Alias_g(1) = "CH4" 可能会报错,写在一行可能就好了,如: ...
- 一步一步Asp.Net MVC系列_权限管理设计
http://www.cnblogs.com/mysweet/archive/2012/07/26/2610793.html
- Cocos2d-x 详解坐标系统
这篇博文将介绍一下在cocos2dx中的一些坐标系统概念: 一. (1) OpenGL坐标系 Cocos2D-x以OpenGL和OpenGL ES为基础,所以自然支持OpenGL坐标系.该坐标系原点在 ...