Ajax技术就是利用Javascript和XML技术实现这样的效果， 可以向Web服务器发送异步请求， 返回更新部分页面的数据， 而不需要全部更新整个页面。 Ajax请求两种类型的内容， 一种是服务端生成的HTML代码，直接嵌入到页面元素中， 另外一种是原始的序列化数据。经过解析后， 客户端Javascript可用来生成HTML代码，或直接更新页面。

什么是部分渲染，有一个页面ajax_content.html 内容是：

  1. <h2>This is the Ajax content !</h2>

待插入页面的内容如下

  1. <html>
  1. <body>
  1. <h1> Partial Rendering Demo</h1>
  1. <div id="container" />
  1. </body>
  1. </html>

例如以上代码， <div id=”container”/>元素标记要插入的元素， 可以使用

  1. $("#container").load('ajax_context.html')

向服务器发送异步请求， 把返回的内容插入#container元素， 调用返回后，DOM将会动态更新元素的内容：

  1. <html>
  1. <body>
  1. <h1> Partial Rendering Demo</h1>
  1. <div id="container" >
  1.   <h2>This is the AJAX content!</h2>
  1. </div>
  1. </body>
  1. </html>

渲染部分视图

MVC把部分渲染当成其他请求一样看待--请求被路由到特定的控制器，控制器执行特定的操作逻辑代码。不同的是，部分渲染需要调用Controller.Partial()帮助方法来返回PartialViewResult对象。这个和ViewResult类似， PartialViewResult只渲染视图内容，不渲染外围布局和母版页内容。

请看下列代码：

  1.         public ActionResult Auction(long id)
  1.         {
  1.             var db = new DataContext();
  1.             var auction = db.Auctions.Find(id);
  1.             return View("Auction", auction);
  1.         }
  1.         public ActionResult PartialAuction(long id)
  1.         {
  1.             var db = new EbuyDataContext();
  1.             var auction = db.Auctions.Find(id);
  1.             return PartialView("Auction", auction);
  1.         }


再看下面视图部分的内容

Views\Auctions文件夹有两个文件， 其中Auction.cshtml的内容是

  1. @model Ebuy.Website.Models.Auction
  1.  
  1. <div class="title">@Model.Title</div>
  1. <div class="overview">
  1. <p>
  1. <strong>Current Price: </strong>
  1. <span class="current-price">@Model.CurrentPrice</span>
  1. </p>
  1. </div>
  1. <h3>Description</h3>
  1. <div class="description">
  1. @Model.Description
  1. </div>

这个是要填入Auctions.cshtml 中的部分视图。在其中可以使用Html.Partial()方法来渲染。

  1. @model IEnumerable<Aution>
  1.  
  1. <h1>Auctions</h1>
  1. <section class="auctions">
  1.  
  1. @foreach(var auction in Model) {
  1. <section class="auction">
  1.   @Html.Partial("Auction", auction)//第一个参数是指向Auction.cshtml，第二个参数是部分视图的Model
  1. </section>
  1. }
  1. </section>

上面是第一种部分视图，即插入HTML代码的方法，第二种从服务端获取原始数据，在客户端动态构建HTML代码，直接操作DOM对象的方法， 后者必须有两个条件， 服务端可以产生序列化的数据，客户端知道如何把该数据转为HTML代码，因为比较繁琐，就不写了。

书中还说到，怎样实现一个自定义的ActionFilterAttribute， MultipleResponseFormatsAttribute， 根据，是Ajax部分视图请求，Json数据请求，还是正常请求，返回不同的ActionResult操作结果， 以便在多个控制器操作上重用逻辑。

  1. public class AuctionsController : Controller
  1. {
  1.     public ActionResult Auction(long id)
  1.     {
  1.         var db = new DataContext();
  1.         var auction = db.Auctions.Find(id);
  1.         // Respond to AJAX requests
  1.         if (Request.IsAjaxRequest())return PartialView("Auction", auction);
  1.         // Respond to JSON requests
  1.         if (Request.IsJsonRequest())return Json(auction);
  1.         // Default to a "normal" view with layout
  1.         return View("Auction", auction);
  1.     }
  1. }


这里实现一个MultipleResponseFormatsAttribute，

  1. using System;using System.Web.Mvc;
  1. public class MultipleResponseFormatsAttribute : ActionFilterAttribute
  1. {
  1.        public override void OnActionExecuted(ActionExecutedContext filterContext)
  1.    {
  1.            var request = filterContext.HttpContext.Request;var viewResult = filterContext.Result as ViewResult;
  1.           if (viewResult == null)    return;
  1.           if (request.IsAjaxRequest())
  1.          {
  1.               // Replace result with PartialViewResult
  1.               filterContext.Result = new PartialViewResult{TempData = viewResult.TempData,ViewData = viewResult.ViewData,ViewName = viewResult.ViewName,};
  1.          }
  1.          else if (Request.IsJsonRequest())
  1.          {
  1.              // Replace result with JsonResult
  1.              filterContext.Result = new JsonResult{Data = viewResult.Model};
  1.          }
  1.      }
  1. }

 

Asp.net MVC4 Step By Step（4）-使用Ajax的更多相关文章

  1. Asp.Net MVC4 + Oracle + EasyUI 学习 第二章

    Asp.Net MVC4 + Oracle + EasyUI 第二章 --使用Ajax提升网站性能 本文链接:http://www.cnblogs.com/likeli/p/4236723.html ...

  2. Asp.net MVC4 Step By Step（5）-使用Web API

    Web API是ASP.net MVC4新增的一个特色, 应用于处理Ajax请求, 他同时使用了Web标准规范, 比如Http, Json,和XML,以及一系列构建REST数据服务的参考原则, 和AS ...

  3. [转]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 ...

  4. 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 ...

  5. 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> ...

  6. 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 ...

  7. SignalR + KnockoutJS + ASP.NET MVC4 实现井字游戏

    1.1.1 摘要 今天,我们将使用SignalR + KnockoutJS + ASP.NET MVC实现一个实时HTML5的井字棋游戏. 首先,网络游戏平台一定要让用户登陆进来,所以需要一个登陆模块 ...

  8. asp.net mvc4 登录界面

    说明:开发环境 asp.net mvc4 c#语言 1.项目目录结构 2.Login控制器中 public ActionResult Index() { return View(); } 对应Inde ...

  9. EF框架step by step(7)—Code First DataAnnotations(1)

    Data annotation特性是在.NET 3.5中引进的,给ASP.NET web应用中的类提供了一种添加验证的方式.Code First允许你使用代码来建立实体框架模型,同时允许用Data a ...

  10. e2e 自动化集成测试 架构 实例 WebStorm Node.js Mocha WebDriverIO Selenium Step by step （二） 图片验证码的识别

    上一篇文章讲了“e2e 自动化集成测试 架构 京东 商品搜索 实例 WebStorm Node.js Mocha WebDriverIO Selenium Step by step 一 京东 商品搜索 ...

随机推荐

  1. jquery动态生成二维码添加自定义logo

    动态生成二维码中间带logo. jquery.qrcode.js 动态生成二维码api很简单. 引入jquer(版本任意),引入jquery.qrcode.js 不需要中间带logo这样就可以了.带l ...

  2. Linux下的find命令

    Linux下find命令在目录结构中搜索文件,并执行指定的操作.Linux下find命令提供了相当多的查找条件,功能很强大.即使系统中含有网络文件系统,find命令在该文件系统中同样有效.在运行一个非 ...

  3. 6.4.1 标准库 os、os.path 与 shutil 简介

    os模块除了提供使用操作系统功能和访问文件系统的简便方法之外,还提供了大量文件与文件夹操作的方法,如下表所示. 方法 功能说明 access(path,mode) 按照 mode 指定的权限访问文件 ...

  4. BZOJ 4327 [JSOI2012]玄武密码 (AC自动机)

    题目链接: https://www.lydsy.com/JudgeOnline/problem.php?id=4327 题解: 做法挺显然,建出AC自动机之后在上面跑,标记所有走过的点,然后再进行递推 ...

  5. DOM对象属性(property)与HTML标签特性(attribute)

    HTML中property与attribute是极易混淆的两个概念.大多数时候这两个单词都翻译为"属性",为了区分二者,一般将property翻译为"属性",a ...

  6. OceanBase架构浅析（一）

    简介 OceanBase是阿里集团研发的可扩展的关系数据库,实现了数千亿条记录.数百TB数据上的跨行跨表事务,截止到2012年8月,支持了收藏夹.直通车报表.天猫评价等OLTP和OLAP在线业务,线上 ...

  7. 基于zookeeper和强一致性复制实现MySQL分布式数据库集群

    http://qikan.cqvip.com/article/detail.aspx?id=667750898&from=zk_search

  8. Ubuntu下调整时区时间

    Ubuntu下调整时区时间 学习了:http://blog.csdn.net/jintiaozhuang/article/details/38583031 进行了tzselect错误的修复 学习了:h ...

  9. [Cocos2d-x v3.x]Mac OX 创建新的Cocos2d-x 3.0 项目

    文章内容来自于: http://cocos2d-x.org/wiki/How_to_Start_A_New_Cocos2D-X_Game Mac OS X 10.9 Software Requirem ...

  10. [ACM] ZOJ 3819 Average Score (水题）

    Average Score Time Limit: 2 Seconds      Memory Limit: 65536 KB Bob is a freshman in Marjar Universi ...