Asp.Net MVC4 + Oracle + EasyUI + Bootstrap 第二章

 

Asp.Net MVC4 + Oracle + EasyUI + Bootstrap 第二章

--使用Ajax提升网站性能

本文链接:http://www.cnblogs.com/likeli/p/4236723.html

文章集合:http://www.cnblogs.com/likeli/category/651581.html

1、  MVC的渲染部分视图

  向服务器请求HTML标签来更新网页的内容,这种方法就叫“部分渲染”,这是属于Ajax的基本过程。

  部分渲染技术包括了发送异步请求给服务器,服务器返回包含HTML代码的数据插入到指定的页面区域。这种方法十分的高效而且简单。

  在Asp.Net MVC中,会把部分渲染当做普通的请求一样对待:请求被路由解析到特定的控制器,控制器执行特定的操作逻辑。

普通渲染和渲染部分视图的区别:通常的渲染方法是使用controller.View()帮助方法返回ViewResult;而部分渲染需要调用Controller.Partial()帮助方法来返回PartialViewResult对象。这与ViewResult类似,PartialViewResult只渲染包含视图的内容,不会渲染外围布局。

  1)控制器调用Controller.View()方法:

1 return View("Auction",auction);

  最终是整页渲染。

  2)控制器调用Controller.PartialVIew()方法:

1 return PartialView("Auction",acution);

部分渲染除了将VIew()换成PartialView()方法,其他的一样。唯一的区别就是PartialViewResult只渲染HTML标签内容,不包含外围布局和母版页的内容。其他包括Razor语法,HTML、URL帮助类都一样使用。

不过要注意:因为部分视图不包含外围布局,所以CSS或者Javascript外部文件一定要直接在部分视图中引用。

  这部分类容,可以使用Jquery的load()方法快速实现。

1 function showAuctino(id)
2 {
3 $("#content").load("/Auction/PartialAuction/"+id);
4 }

  上面的代码若是用URLHelper则可以这样写:'@Url("PartialAuction","Auction")' + id

2、  JavaScript渲染

  其实从上面的部分视图渲染可以看出,这种渲染方式非常的浪费资源,很明显的,有些内容完全不用在服务端创建和传回,js足矣完成。

  但是使用客户端渲染有两个必须的条件:

  1)服务端可以产生序列化的数据

  2)客户端知道怎么把这些序列化的数据转换成标准的HTML代码

  这里使用Ajax请求数据,Asp.Net MVC提供了对原生Json的支持,使用JsonResult操作结果对象。因此,我们可以直接使用Controller.Json()方法来创建包含可序列化对象的JsonResult。

1 return Json(action,JsonRequestBehavior.AllowGet);

  那么这个控制器返回的应答消息就包含了序列化的Json格式数据。

上面代码中的第二个参数是必须的,因为默认情况下,MVC是不允许get方式HTTP请求Json数据的。这样就可以避免Json劫持风险。因此,这里需要设置允许Get请求Json。

但是最好的做法还是用属性标记限制只让POST方法提交请求,来避免此类安全漏洞。

1 [HttpPost]
2 public ActionResult JsonAuction(int id)
3 {
4 ...
5 return Json(acution);
6 }

3、  客户端模板

  到这里,Json数据已经请求回来了,那么,我们就需要在客户端进行处理了,这里使用客户端模板,也就是模板引擎来渲染。当然要是不复杂的内容,你完全可以自己拼接字符串来输出的。

  这里我使用的是贤心的laytpl模板渲染引擎(http://sentsin.com/layui/laytpl/):

 1 //第一步:编写模版。你可以使用一个script标签存放模板,如:
2 <script id="demo" type="text/x-template">
3 <h1>{{ d.title }}</h1>
4 <ul>
5 {{# for(var i = 0, len = d.list.length; i < len; i++){ }}
6 <li>
7 <span>姓名:{{ d.list[i].name }}</span>
8 <span>城市:{{ d.list[i].city }}</span>
9 </li>
10 {{# } }}
11 </ul>
12 </script>
13
14 //第二步:建立视图。用于呈现渲染结果。
15 <div id="view"></div>
16
17 //第三步:渲染模版
18 function updateAuctionInfo(id)
19 {
20 $.ajax({
21 url:"/Auction/JsonAuction/" + id,
22 sucction:function(result){
23 var gettpl = document.getElementById('demo').innerHTML;
24 laytpl(gettpl).render(result, function(html){
25 document.getElementById('view').innerHTML = html;
26 }
27 })
28 }

  那么到这里,以上代码就完成了一个Ajax的性能提升功能,不过这里还是可以改进的。我们继续...

作为MVC框架,很重要的一点就是“分离关注点”,正常情况下,MVC的应用逻辑是不应该绑定到视图中的。在上面写的例子代码中,存在这一个情况,给同一个视图输出的内容中,我们使用了PartialView、View,我们是做的同一个动作--输出HTML标签内容,唯一不一样的就是返回的内容不一样。

  因此,我们可以想办法减去这些重复的逻辑代码,幸运的是,MVC提供了Request.IsAjaxRequest()扩展方法,这个方法可以帮我们来验证当前的请求是否是Ajax。那么灵感来了。

 1 Public ActionResult Auction(int id)
2 {
3 //获取数据源
4 ...
5 if(Request.IsAjaxRequest())
6 {
7 return PartialView("Auction",auction);
8 }
9 else
10 {
11 return View("Auction",auction);
12 }
13 }

  那么,这样修改之后,Auction控制器就可以同时响应两种请求了:HTTP get 和Ajax,而逻辑代码不变。

4、  处理Json

  这里,我的需求又有点儿变化,我在请求的时候,想要能够请求完整HTML代码,也想能够请求Json数据。咋办?

  这点MVC没办法,并没有提供像上面验证Ajax的方法类似的,用来验证是否请求Json的方法。不过,这点儿其实也难不倒聪明的程序猿。在Ajax请求的时候,外加一个参数,指定请求内容为Json就行了。例:/Auctions/Auction/1?IsJson=Json

  查看源码,发现AjaxRequestExtensions是静态类,不能继承。

  那么,将这个自己定义的验证是否请求Json的方法扩展一下:

1     public static class JsonRquestExtensions
2 {
3 public static bool IsJsonRquest(this HttpRequestBase request)
4 {
5 return string.Equals(request["IsJson"], "Json");
6 }
7 }
1     if (Request.IsJsonRquest())
2 {
3 return Json(auction);
4 }
5 else
6 {
7 return View("Auctino", auction);
8 }

  这样就行了,再整合一下之前写的内容:

 1       if (Request.IsJsonRquest())
2 { //Json请求
3 return Json(auction);
4 }
5 else if (Request.IsAjaxRquest())
6 { //Ajax请求
7 return PartialView("Auxtion", auction);
8 }
9 else
10 { //默认使用布局的请求
11 return View("Auctino", auction);
12 }

  通过上面的一连串逻辑判断,让一个控制器Action完成了部分视图渲染和判断Json请求返回数据的判断逻辑。

  说到这里,又要引入一个新的东西了:过滤器。具体的说应该是操作过滤器

  原谅我再次无耻的盗图一张(虽然图是我自己画的),此图引用了《Asp.Net MVC5框架揭秘》的图,这里说明了这个过滤器的执行过程。

  操作过滤器涉及到ActionFilter类型的使用。如上图所示,所有的ActionFilter类型都实现了IActionFilter接口,这个接口的两个方法OnActionExecution和OnActionExecuted会分别在目标Action方法执行前后被调用。如图:

  既然有在Action方法执行前调用,那么我们就可以在这里做文章了。

  重写一下OnActionExecuted方法,将Ajax、Json等请求方式判断逻辑加入其中。

  那么,这样就构建了一个操作过滤器,这个操作过滤器的作用就是在多个控制器上重用统一的逻辑规则

5、  最后

  好叻,到这里使用Ajax提升网站性能和交互就基本完成了,当然实际操作中并不是这么简单的,此处仅做入门。

  举个例子,假如是复杂的Json的话,那就需要做很多工作了。下一章继续来弄这个,基本上说说复杂Json如何操作、如何提高Json的收发效率、跨域的Ajax请求等。

6、  参考文献

  《Asp.Net MVC5 框架揭秘》、《Asp.Net MVC4 Web编程》

sp.Net MVC4 + Oracle + EasyUI + Bootstrap2的更多相关文章

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

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

  2. Asp.Net MVC4 + Oracle + EasyUI 学习 第一章

    Asp.Net MVC4 + Oracle + EasyUI  第一章 --操作数据和验证 本文链接:http://www.cnblogs.com/likeli/p/4234238.html 文章集合 ...

  3. Asp.Net MVC4 + Oracle + EasyUI 学习 序章

    Asp.Net MVC4 + Oracle + EasyUI  序章 -- 新建微软实例 本文链接:http://www.cnblogs.com/likeli/p/4233387.html 1.  简 ...

  4. Asp.Net MVC4 + Oracle + EasyUI + Bootstrap

    Asp.Net MVC4 + Oracle + EasyUI + Bootstrap --操作数据和验证 本文链接:http://www.cnblogs.com/likeli/p/4234238.ht ...

  5. Asp.Net MVC4 + Oracle + EasyUI + Bootstrap 1

    Asp.Net MVC4 + Oracle + EasyUI + Bootstrap 序章 Asp.Net MVC4 + Oracle + EasyUI + Bootstrap 序章 -- 新建微软实 ...

  6. 我的权限系统设计实现MVC4 + WebAPI + EasyUI + Knockout(四)授权代码维护

    一.前言 权限系统设计中,授权代码是用来控制数据访问权限的.授权代码说白了只是一树型结构的数据,没有什么其它的业务意义.那么这个页面的功能也就非常简单授权代码维护:新增.修改.删除授权代码数据. 二. ...

  7. 我的权限系统设计实现MVC4 + WebAPI + EasyUI + Knockout(三)图形化机构树

    一.前言 组织机构是国内管理系统中很重要的一个概念,以前我们基本都是采用数据列表的形式展现,最多只是采用树形列表展现.虽然够用,但是如果能做成图形化当然是最好不过了.这里我不用任何图形控件,就用最原始 ...

  8. 我的权限系统设计实现MVC4 + WebAPI + EasyUI + Knockout(二)菜单导航

    一.前言 上篇博客中已经总体的说了一下权限系统的思路和表结构设计,那接下来我们就要进入正文了,先从菜单导航这个功能开始. 二.实现 这个页面基本不用什么需求分析了,大家都很明白,不过在这个页面要多维护 ...

  9. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(1)-前言与目录(持续更新中...)

    转自:http://www.cnblogs.com/ymnets/p/3424309.html 曾几何时我想写一个系列的文章,但是由于工作很忙,一直没有时间更新博客.博客园园龄都1年了,却一直都是空空 ...

随机推荐

  1. jstack:将Process Explorer中看到的进程ID做16进制转换,到ThreadDump中加上0x 前缀即能找到对应线程(转)

    原文链接:http://www.iteye.com/topic/1133941 症状: 使用Eclipse win 64位版本,indigo及kepler都重现了,使用tomcat 6.0.39,jd ...

  2. 随着MapReduce job实现去加重,多种输出文件夹

    总结以往的工作中遇到的一个问题. 背景: 操作和维护与scribe从apacheserver一再被推到日志记录,所以在这里ETL处理正在进行的重.有根据业务的输出类型是用于多文件夹一个需求.方便挂分区 ...

  3. SQL开发中容易忽视的一些小地方(五)

    原文:SQL开发中容易忽视的一些小地方(五) 背景: 索引分类:众所周知,索引分为聚集索引和非聚集索引. 索引优点:加速数据查询. 问题:然而我们真的清楚索引的应用吗?你写的查询语句是否能充分应用上索 ...

  4. Install shipyard

    2台机器,192.168.1.153,192.168.1.154 安装Shipyard 1. 154作为集群主节点,在154机器上执行命令 curl -sSL https://shipyard-pro ...

  5. JS前端正则表达式学习笔记(转)

    1.正则表达式的创建: 方法一:以字面量形式来创建 格式为/pattern/flags;其中pattern(模式)为任何简单或者复杂的表达式,可以包括字符类,限定符,分组,向前查找以及反向引用.每个正 ...

  6. 考试easy该,学习如何做?

    我的两个学生(场和任)都讲了他们周末參加的一个认证考试不考大题考小题的事情.由感而发: 话说不用大题考,大概是不敢用大题考. 老师的教.和学生的学中.存在的一些问题得不到解决,整体讲,学生的学习效果没 ...

  7. PowerDesigner教程

    PowerDesigner是一款功能很强大的建模工具软件,足以与Rose比肩,相同是当今最著名的建模软件之中的一个.Rose是专攻UML对象模型的建模工具,之后才向数据库建模发展,而PowerDesi ...

  8. Android:ViewPager详细解释(异步网络负载图片,有图片缓存,)并与导航点

    android 应用.准则欢迎页面. 和图像旋转木马特征, 或者没有很多其他的内容显示在一个页面.以被划分成多个页面,在这一刻viewpager这是非常容易使用. 首先看下效果: 以下是一个样例.带异 ...

  9. Android pm命令用法

    Sam综观有关PackageManager时,无意中发现Android 下提供一个pm命令,通常放在/system/bin/下. 这个命令与Package有关.且很有用.所以研究之. 0. Usage ...

  10. MySQL 架构

    原文:MySQL 架构 MySQL架构和结构分析 官方架构图: MySQL DB 各模块架构图如下: MySQL安装方式 MySQL初始化 简介:什么是事务: 事务: ACID :  事务确保了银行不 ...