在ASP.net MVC中利用ajax配合razor进行局部加载
在asp.net mvc中, razor引擎的作用是渲染出静态页面。(我这里指的静态页面,是指对浏览器而言,第一次从服务器下载以后页面。)
而ajax的作用是浏览器端的页面通过js向服务端再次发出请求从而从服务端获取数据展示在页面。
我们一般的编程模式是ajax只输出json风格的数据,再由客户端通过某种方式动态展示到页面上,比如通过jquery的模板插件,或第三方的控件。
这种方式无疑是高效的。对服务器压力也较小。
但是它的缺点就是我们无法利用现有的强大的razor引擎,用它丰富的Html帮助类,精确地控制数据展示的方式,维护各种链接。因为它是工作在服务器端的,在初始页面第一次从服务器端下载完以后,它的使命就完成了。
那么有没有办法让ajax和razor这两种截然不同的技术有机地结合在一起呢?
最近本人在做一个项目时发现,只需要简单的写一个jquery的扩展,就可以实现上述目的。
先看下效果:
1. 当我们在vs2013下,新建一个asp.net mvc应用程序, 会出现一个初始站点,我们就在这个初始站点上做文章,
2. 把其中的“关于”和“联系方式”两个页面,不导航到新页面,直接在主页原有的大屏幕介绍底下(如图所示局部加载区)打开:
为实现这个效果,原有的服务器端的Controller中的逻辑不需要做任何的改变。也不需要对视图做任何的改变。
改变的只是一个模板页_Layout.cshtml。
原有的_Layout.cshtml的源代码变成这样:
<!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>@ViewBag.Title - 我的 ASP.NET 应用程序</title>@Styles.Render("~/Content/css")@Scripts.Render("~/bundles/modernizr")</head> <body><div class="navbar navbar-inverse navbar-fixed-top"><div class="container"><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>@Html.ActionLink("应用程序名称", "Index", "Home", null, new { @class = "navbar-brand" })</div><div class="navbar-collapse collapse"><ul class="nav navbar-nav"><li>@Html.ActionLink("主页", "Index", "Home")</li><li>@Html.ActionLink("关于", "About", "Home")</li><li>@Html.ActionLink("联系方式", "Contact", "Home")</li></ul>@Html.Partial("_LoginPartial")</div></div></div><div class="container body-content"> <div id="partial">@RenderBody()@RenderSection("innerScripts", required: false)</div> <hr /><footer><p>© @DateTime.Now.Year - 我的 ASP.NET 应用程序</p></footer></div>@Scripts.Render("~/bundles/jquery")@Scripts.Render("~/bundles/bootstrap")<script type="text/javascript" src="~/Scripts/loadpartial.js"></script><script type="text/javascript">$.loadPartial({ link: '.nav a', container: '#partial' });</script> }</body> </html>
其中红色加粗是加的代码。 注意到有一个loadpartial.js文件。这就是对jquery作的一个小扩展。
调用方法是: $.loadPartial({ link: '.nav a', container: '#partial' });
link代表一批链接的选择器,container代表页面加载到的容器。
注意: 所有加载的页面到容器内时,不会加载和主页重复的内容,如导航,版权声明(如果那样就太失败了).只会加载自己的#partial中的内容。
如果加载的页面在加载时有js要执行,可以写在innerScripts这个区域中。
另外,如果加载进的页面本身也有超链接,它依然会限制在这个框框内,more, 如果页面有表单,表单的提交也会限制在这个框框内;
更有,如果你的后台程序出了BUG,比如404或500错误,它也会忠实地把错误信息像普通页面一样显示在框框中。
看起来的感觉就像是一个内框架,但并不会破坏原有页面的dom结构。
是不是很神奇?
而这个神奇只是jquery的功劳,我只是对它写了几十行的小扩展:
好了,上核心loadpartial.js文件的代码:
/* Parital Load (C) Copy right bwangel 2014 */ jQuery.extend({/*局部加载页options{link : 超链接的选择器container: 要将页面加载到的容的选择器updateNow: 是否立即将容器中的现有链接进行处理}*/loadPartial: function (options) {var defaults = { link: '.nav a', container: '#razorContainer', updateNow: true };defaults = $.extend(defaults, options);razorContainer = $(defaults.container);$(defaults.link).each(alink);if (defaults.updateNow) alinkInContainer();//var razorUrl = "";function alink(idx, link) {if ($(link).attr("onclick")) return;if (link.href.indexOf('###') >= 0) return;var addr1 = link.href.split('#');var addr2 = location.href.split('#');if (addr1[0] == addr2[0]) return; //说明是锚点跳转 $(link).click(function (e) {e.preventDefault();if ($(link).attr("action")) {ConfirmDelete(link);} else {getRazor(link.href, null, 'get');}});}function alinkInContainer() {razorContainer.find('a').each(alink);razorContainer.find('form').submit(function (e) {e.preventDefault();getRazor(this.action, $(this).serialize(), "post");});}function getRazor(url, d, m) {$.ajax({url: url,data: d,cache: false,type: m,success: function (data) {var r = $("<div>").append($.parseHTML(data, true)).find('#partial');razorContainer.html(r);alinkInContainer();},error: function (response, status, xhr) {razorContainer.html(response.responseText);}});}} });
关于此文的完整代码,请在https://git.oschina.net/bwangel/LoadPartDemo下载
转载于:https://www.cnblogs.com/bwangel/p/using-jquery-ajax-to-asp-net-razor.html
在ASP.net MVC中利用ajax配合razor进行局部加载相关推荐
- ASP.NET MVC中使用AJAX(XMLHttpRequest、Microsoft AJAX Library......)
AJAX的好处就是不会堵塞页面,可以提高用户体验,可以减少数据传输尺寸,提高应用程序的性能.目前,AJAX技术可以说是已经成为WEB开发的标准技术. AJAX技术是纯客户端技术,任何客户端框架(如:M ...
- Asp.net mvc中的Ajax处理
在Asp.net MVC中的使用Ajax, 可以使用通用的Jquery提供的ajax方法,也可以使用MVC中的AjaxHelper. 这篇文章不对具体如何使用做详细说明,只对于在使用Ajax中的一些需 ...
- ensure函数_webpack中利用require.ensure()实现按需加载
webpack中的require.ensure()可以实现按需加载资源包括js,css等,它会给里面require的文件单独打包,不和主文件打包在一起,webpack会自动配置名字,如0.js,1.j ...
- html action能跨域么,ASP.NET MVC 中设置跨域
原标题:ASP.NET MVC 中设置跨域 来源:GetPower cnblogs.com/gdpw/p/9236661.html 程序员共读整理发布,转载请联系作者获得授权ASP.NET MVC中设 ...
- ASP.NET MVC如何使用Ajax的辅助方法
前言:前面我们已经简单的介绍过了MVC如何Jquery,因为我们如果使用Ajax的话必须要了解Jquery,这篇博客我们将大致了解一下ASP.NET MVC如何使用Ajax的辅助方法,此博客是我的读书 ...
- 通过源代码研究ASP.NET MVC中的Controller和View(二)
通过源代码研究ASP.NET MVC中的Controller和View(一) 在开始之前,先来温习下上一篇文章中的结论(推论): IView是所有HTML视图的抽象 ActionResult是Cont ...
- 在asp.net mvc中使用PartialView返回部分HTML段
问题链接: MVC怎样实现异步调用输出HTML页面 该问题是个常见的 case, 故写篇文章用于提示新人. 在asp.net mvc中返回View时使用的是ViewResult,它继承自ViewRes ...
- 如何在 ASP.NET MVC 中集成 AngularJS
介绍 当涉及到计算机软件的开发时,我想运用所有的最新技术.例如,前端使用最新的 JavaScript 技术,服务器端使用最新的基于 REST 的 Web API 服务.另外,还有最新的数据库技术.最新 ...
- ASP.NET MVC中controller和view相互传值的方式
ASP.NET MVC中Controller向view传值的方式: ViewBag.ViewData.TempData 单个值的传递 Json 匿名类型 ExpandoObject Cookie Vi ...
- [转载]Asp.net MVC中Controller返回值类型
Asp.net MVC中Controller返回值类型 在mvc中所有的controller类都必须使用"Controller"后缀来命名 并且对Action也有一定的要求: 必须 ...
最新文章
- java中的int、Integer 和 new Integer()的区分和比较
- 怎样才算熟悉python-怎样才算学会Python
- 树莓派学习笔记(7):利用bypy实现树莓派NAS同步百度云
- jenkins详细设置(二)
- hdu 1026 Ignatius and the Princess I(优先队列+bfs+记录路径)
- (算法)Word Break
- 资本冬天已至,开发者却可以着眼未来
- Java中String类中compareTo( )方法
- 双十一我们在作战室干什么?零点刚过,我偷偷提交了几行代码!
- 时隔六年,FreeDOS终于更新,是否还能与Windows一战?
- 重庆市南川隆化职业学校计算机,重庆市第十三届中等职业学校职业技能大赛“web前端开发”赛项在南川隆化职中举行...
- Java011-多线程
- Python-序列常用方法 + * += extend append方法区别
- 极限编程的12个实践原则
- flowable 监听器中无法获取 oauth 上下文对象
- JavaScript中的倒叙和排序
- [玩转北京] 北京最值得你一看的博物馆大全
- angular ngRoute
- 新浪微博和腾讯微博图标
- 【雕爷学编程】Arduino动手做(42)---PM2.5粉尘传感器