Asp.net MVC4 Step By Step（4）-使用Ajax
Ajax技术就是利用Javascript和XML技术实现这样的效果， 可以向Web服务器发送异步请求， 返回更新部分页面的数据， 而不需要全部更新整个页面。 Ajax请求两种类型的内容， 一种是服务端生成的HTML代码，直接嵌入到页面元素中， 另外一种是原始的序列化数据。经过解析后， 客户端Javascript可用来生成HTML代码，或直接更新页面。
什么是部分渲染，有一个页面ajax_content.html 内容是：
<h2>This is the Ajax content !</h2>
待插入页面的内容如下
<html>
<body>
<h1> Partial Rendering Demo</h1>
<div id="container" />
</body>
</html>
例如以上代码， <div id=”container”/>元素标记要插入的元素， 可以使用
$("#container").load('ajax_context.html')
向服务器发送异步请求， 把返回的内容插入#container元素， 调用返回后，DOM将会动态更新元素的内容：
<html>
<body>
<h1> Partial Rendering Demo</h1>
<div id="container" >
<h2>This is the AJAX content!</h2>
</div>
</body>
</html>
渲染部分视图
MVC把部分渲染当成其他请求一样看待--请求被路由到特定的控制器，控制器执行特定的操作逻辑代码。不同的是，部分渲染需要调用Controller.Partial()帮助方法来返回PartialViewResult对象。这个和ViewResult类似， PartialViewResult只渲染视图内容，不渲染外围布局和母版页内容。
请看下列代码：
public ActionResult Auction(long id)
{
var db = new DataContext();
var auction = db.Auctions.Find(id);
return View("Auction", auction);
}
public ActionResult PartialAuction(long id)
{
var db = new EbuyDataContext();
var auction = db.Auctions.Find(id);
return PartialView("Auction", auction);
}
再看下面视图部分的内容
Views\Auctions文件夹有两个文件， 其中Auction.cshtml的内容是
@model Ebuy.Website.Models.Auction
<div class="title">@Model.Title</div>
<div class="overview">
<p>
<strong>Current Price: </strong>
<span class="current-price">@Model.CurrentPrice</span>
</p>
</div>
<h3>Description</h3>
<div class="description">
@Model.Description
</div>
这个是要填入Auctions.cshtml 中的部分视图。在其中可以使用Html.Partial()方法来渲染。
@model IEnumerable<Aution>
<h1>Auctions</h1>
<section class="auctions">
@foreach(var auction in Model) {
<section class="auction">
@Html.Partial("Auction", auction)//第一个参数是指向Auction.cshtml，第二个参数是部分视图的Model
</section>
}
</section>
上面是第一种部分视图，即插入HTML代码的方法，第二种从服务端获取原始数据，在客户端动态构建HTML代码，直接操作DOM对象的方法， 后者必须有两个条件， 服务端可以产生序列化的数据，客户端知道如何把该数据转为HTML代码，因为比较繁琐，就不写了。
书中还说到，怎样实现一个自定义的ActionFilterAttribute， MultipleResponseFormatsAttribute， 根据，是Ajax部分视图请求，Json数据请求，还是正常请求，返回不同的ActionResult操作结果， 以便在多个控制器操作上重用逻辑。
public class AuctionsController : Controller
{
public ActionResult Auction(long id)
{
var db = new DataContext();
var auction = db.Auctions.Find(id);
// Respond to AJAX requests
if (Request.IsAjaxRequest())return PartialView("Auction", auction);
// Respond to JSON requests
if (Request.IsJsonRequest())return Json(auction);
// Default to a "normal" view with layout
return View("Auction", auction);
}
}
这里实现一个MultipleResponseFormatsAttribute，
using System;using System.Web.Mvc;
public class MultipleResponseFormatsAttribute : ActionFilterAttribute
{
public override void OnActionExecuted(ActionExecutedContext filterContext)
{
var request = filterContext.HttpContext.Request;var viewResult = filterContext.Result as ViewResult;
if (viewResult == null) return;
if (request.IsAjaxRequest())
{
// Replace result with PartialViewResult
filterContext.Result = new PartialViewResult{TempData = viewResult.TempData,ViewData = viewResult.ViewData,ViewName = viewResult.ViewName,};
}
else if (Request.IsJsonRequest())
{
// Replace result with JsonResult
filterContext.Result = new JsonResult{Data = viewResult.Model};
}
}
}
Asp.net MVC4 Step By Step（4）-使用Ajax的更多相关文章
- Asp.Net MVC4 + Oracle + EasyUI 学习 第二章
Asp.Net MVC4 + Oracle + EasyUI 第二章 --使用Ajax提升网站性能 本文链接:http://www.cnblogs.com/likeli/p/4236723.html ...
- Asp.net MVC4 Step By Step（5）-使用Web API
Web API是ASP.net MVC4新增的一个特色, 应用于处理Ajax请求, 他同时使用了Web标准规范, 比如Http, Json,和XML,以及一系列构建REST数据服务的参考原则, 和AS ...
- [转]Bootstrap 3.0.0 with ASP.NET Web Forms – Step by Step – Without NuGet Package
本文转自:http://www.mytecbits.com/microsoft/dot-net/bootstrap-3-0-0-with-asp-net-web-forms In my earlier ...
- Asp.Net Core 5 REST API - Step by Step
翻译自 Mohamad Lawand 2021年1月19日的文章 <Asp.Net Core 5 Rest API Step by Step> [1] 在本文中,我们将创建一个简单的 As ...
- Asp.Net Core 5 REST API 使用 JWT 身份验证 - Step by Step
翻译自 Mohamad Lawand 2021年1月22日的文章 <Asp Net Core 5 Rest API Authentication with JWT Step by Step> ...
- Asp Net Core 5 REST API 使用 RefreshToken 刷新 JWT - Step by Step
翻译自 Mohamad Lawand 2021年1月25日的文章 <Refresh JWT with Refresh Tokens in Asp Net Core 5 Rest API Step ...
- SignalR + KnockoutJS + ASP.NET MVC4 实现井字游戏
1.1.1 摘要 今天,我们将使用SignalR + KnockoutJS + ASP.NET MVC实现一个实时HTML5的井字棋游戏. 首先,网络游戏平台一定要让用户登陆进来,所以需要一个登陆模块 ...
- asp.net mvc4 登录界面
说明:开发环境 asp.net mvc4 c#语言 1.项目目录结构 2.Login控制器中 public ActionResult Index() { return View(); } 对应Inde ...
- EF框架step by step(7)—Code First DataAnnotations(1)
Data annotation特性是在.NET 3.5中引进的,给ASP.NET web应用中的类提供了一种添加验证的方式.Code First允许你使用代码来建立实体框架模型,同时允许用Data a ...
- e2e 自动化集成测试 架构 实例 WebStorm Node.js Mocha WebDriverIO Selenium Step by step （二） 图片验证码的识别
上一篇文章讲了“e2e 自动化集成测试 架构 京东 商品搜索 实例 WebStorm Node.js Mocha WebDriverIO Selenium Step by step 一 京东 商品搜索 ...
随机推荐
- java ArrayList去重复值
public static List removeDuplicateWithOrder(List list) { Set set = new HashSet(); List newList = new ...
- do{}while(0)
有时会在源码中或在写代码时在宏定义中用到do...while(0). 采用这种方式进行宏定义, 主要是为了防止出现以下错误 : do{}while(0) 空的宏定义避免出现warnning. #def ...
- 基本数据类型：布尔型(bool)和空值None
一.布尔型(bool) 布尔类型很简单,就两个值 ,一个True(真),一个False(假), 主要用记逻辑判断: 一件事情成立就是True,不成立就是False,也可以将bool值归类为数字, 是因 ...
- 平衡树前置——BST
上一节:平衡树——序 BST(Binary Search Tree)二叉排序树,其定义为:二叉排序树或者是空树,或者是满足如下性质的二叉树: ①若它的左子树非空,则左子树上所有结点的值均小于根结点的值 ...
- 编译器错误消息: CS0016: 未能写入输出文件“c:\Windows\Microsoft.NET\Framework64\v4.0.30319\Temporary ASP.NET Files\root\64b7b75e\4dfbfca6\App_Web_company.master.4611739e.l3t-kpke.dll”--“拒绝访问。 ”
报错 原因:IIS没有权限操作TEMP文件夹 最后重新启动站点
- oracle 增量导出/导入
一. 导出/导入(Export/Import) ---- 利用Export可将数据从数据库中提取出来,利用Import则可将提取出来的数据送回Oracle数据库中去. ---- 1. ...
- [Usaco2010 Dec]Exercise 奶牛健美操
[Usaco2010 Dec]Exercise 奶牛健美操 题目 Farmer John为了保持奶牛们的健康,让可怜的奶牛们不停在牧场之间 的小路上奔跑.这些奶牛的路径集合可以被表示成一个点集和一些连 ...
- noip模拟赛 fateice-shop
题目背景 紫女,韩国歌舞坊(实为刺客组织)紫兰轩之主,千娇百媚,美艳无方.武艺高强且极有谋略胆识,精通奇石药物,冶炼之术及制毒用毒之术独步天下,真实姓名与来历无人知晓,只因总是身着一袭紫衣,所以众人以 ...
- hdu 4862KM&最小费用最大流
/*最小K路径覆盖的模型,用费用流或者KM算法解决, 构造二部图,X部有N*M个节点,源点向X部每个节点连一条边, 流量1,费用0,Y部有N*M个节点,每个节点向汇点连一条边,流量1, 费用0,如果X ...
- C/C++中的64位整数
C/C++中的64位整数(__int64 and long long) 在做ACM题时,经常都会遇到一些比较大的整数.而常用的内置整数类型常常显得太小了:其中long 和 int 范围是[-2^31, ...