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浏览器(操作 ...
随机推荐
- NewTonJson.Net的使用
1.引用“Newtonsoft.Json” 4.0 版本 2.基础类 using System; using System.Collections.Generic; using System.Linq ...
- VS2013 opencv2.4.8
[转]http://my.phirobot.com/blog/2014-02-opencv_configuration_in_vs.html vs2010+opencv2.4.0:http://www ...
- C# new和override的区别
浅析C# new和override的区别 C#中new和override是继承中经常用到的两个关键字,但是往往有时候容易把这两个关键字的作用搞混淆. new C# new关键字表示隐藏,是指加上new ...
- [项目回顾]基于Redis的在线用户列表解决方案
迁移:基于Redis的在线用户列表解决方案 前言: 由于项目需求,需要在集群环境下实现在线用户列表的功能,并依靠在线列表实现用户单一登陆(同一账户只能一处登陆)功能: 在单机环境下,在线列表的实现方案 ...
- UITableView 之 取消选中
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath { [table ...
- ubuntu 安装chrome浏览器
对于一个一直用chrome的人来说,真的很不习惯用firefox,虽然firebug很好用.. 好吧,心情不佳,直接上命令: 下载命令(有墙,下不下来,多试几次): wget https://dl.g ...
- [bzoj2120][数颜色] (暴力 or 分块)
Description 墨墨购买了一套N支彩色画笔(其中有些颜色可能相同),摆成一排,你需要回答墨墨的提问.墨墨会像你发布如下指令: 1. Q L R代表询问你从第L支画笔到第R支画笔中共有几种不同颜 ...
- 在向服务器发送请求时发生传输级错误。 (provider: TCP 提供程序, error: 0 - 远程主机强迫关闭了一个现有的连接。)
用VS2005+SQLSERVER2008开发C/S的程序,程序上线运行一段时间之后发现在某些功能偶尔出现如下的错误: 在向服务器发送请求时发生传输级错误. (provider: TCP 提供程序, ...
- windows svn利用钩子实现代码同步到web目录
思路: 找 到SVN Server中的仓库(Repositories)文件夹的位置,在相应的项目文件夹中找到hooks文件夹.在该文件夹中添加一个post- commit文件:当有commit动作发 ...
- CentOS 7 部署、连接 数据库mariadb
1.安装mariadb yum -y install mariadb* 2.开启/停止 systemctl start mariadb #启动MariaDB systemctl stop maria ...