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浏览器(操作 ...
随机推荐
- jQuery API 中文文档
Reference: http://www.css88.com/jqapi-1.9/jQuery.proxy/
- JAVA8 HashMap 新特性
1. 链表解决冲突的方式: java中处理Hash散列后的冲突使用的是链表法: java8之前只是使用的简单Entry链表存储键值对.java8后,在Entry队列的长度大于8之后,会自动 ...
- 在Eclipse中配置tomcat
为了在Eclipse中进行struts2的测试,才发现自己机器上的Eclipse没有集成Tomcat,在网上找了半天,不是这个插件没有下载地址,就是那个有好多注意事项或者版本问题. 结果,自己到tom ...
- access 随机选取数据
access随机读取数时 用order by rnd(id) 发现每次获取的数据顺序都是一致的,必须要加上随机数才可以,如下: Random r = new Random(); ...
- 思迅/泰格/科脉/收银软件/商超软件数据库修复解决断电造成损坏的mdb\dat文件SQL数据库 置疑 修复 恢复
拥有专业管理软件数据库修复技术工程师,专业提供管家婆.美萍.思迅.科脉等管理软件技术服务,电脑维修\重装系统技 术服务.无法登陆打不开等出错问题处理(连接失败,请输入正确的服务器名,SQL Serve ...
- Android开发：View的几种布局及实践
引言 View的布局显示方式有下面几种:线性布局(Linear Layout).相对布局(Relative Layout).表格布局(Table Layout).网格视图(Grid View).标签布 ...
- 【HDU 5808】 Price List Strike Back （整体二分+动态规划）
Price List Strike Back There are nn shops numbered with successive integers from 11 to nn in Bytelan ...
- Linux CentOS 安装 httpd
1.查看并安装服务器是否安装编译器 make gcc gcc-c++ 查看:rpm -q gcc-c++ 2.查看SELinux 和 iptables 的状态 3.在根目录新建文件夹 lamp 4.使 ...
- MySQL生产库全库备份脚本
创建一个单独的备份用户backup,不要用root 创建备份目录 :mkdir -p /databackup/fullbackup mysql> grant SELECT,RELOAD,SHOW ...
- 集群环境下JSP中获取客户端IP地址的方法
String ip = request.getHeader("X-Forwarded-For");if (ip == null || ip.length() == 0 || &qu ...