AngularJS html5Mode与ASP.NET MVC路由共存
前言
很久之前便听说AngularJS,非常酷,最近也比较火,我也在持续关注这个技术,只是没有认真投入学习。前不久公司找我们部门做一个OA系统(想省下几万大洋的费用),第一时间便想到AngularJS,非常适合OA这种单页应用,再配合Twitter的Bootstrap,能在短时间内做出一套漂亮的系统。当然,很大程度上还是想用实践来加强自己对新技术的学习,难得公司有这么个好机会!不过,本文的重点不是一步步开发学习,所以此处省去1万字....
一、问题
AngularJS能如此火有很多原因:双向绑定、减少DOM操作、AJAX等等。AngularJS的路由机制正是实现页面无刷新切换的重点,使用hash(#)在页面内加载模板,而不是跳转到新的页面。如果你不是一个强迫证患者,那么一切都无所谓了,但是我终于还是受不了URL中的那个#号,那么问题来了,怎么能去掉它???
二、解决思路
AngularJS团队不可能考虑不到这个问题,于是有了一个轻轻松松的方法便可以搞定一切,一两句代码而已:$locationProvider.html5Mode(true),AngularJS 1.3版本需要在首页加入<base href="/" />标签。这样似乎没什么问题,URL中的烦人的#号没了,点击页面内链接切换也还是AJAX,可是如果你尝试刷新页面或者复制URL到浏览器中回车的时候,新的问题又来了,报错!其实不应该惊讶,因为后端用的是ASP.NET MVC,刷新页面会先匹配ASP.NET MVC的路由机制,如果找不到URL中对应的Controller和Action自然报错。于是很自然的想到重写ASP.NET MVC的路由,使它能认识我URL中“不存在”的控制器。
重写路由要注意几个问题:
1.几乎所有路由都需要重定向到/Default/Index,因为这是我的首页,其余页面模板都是在这里的ng-view里动态加载的
2.登录功能的路由不需要重写,因为这是一个单独页面,不会嵌套在/Default/Index中
3.还需要忽略favicon.ico的路由请求,否则网站每次刷新都会有一次多余的请求被定位到/Default/Index中
4.把其它Controller中的Actoin当作数据请求源(请求数据使用web api方式会更好),定义一个新的路由规则,比如:app/{controller}/{action}/{id}
代码如下:
a).SingleRoute.cs是自定义的路由重定向类,实现所有路由都重写向到/Default/Index中
public class SingleRoute : RouteBase
{
public override RouteData GetRouteData(HttpContextBase httpContext)
{
var data = new RouteData(this, new MvcRouteHandler());
data.Values.Add("controller", "Default");
data.Values.Add("action", "Index");
return data;
} public override VirtualPathData GetVirtualPath(RequestContext requestContext, RouteValueDictionary values)
{
return null;
}
}
b).RouteConfig.RegisterRoutes代码修改
public class RouteConfig
{
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
//取消网站图标的路由请求
routes.IgnoreRoute("favicon.ico");
//AJAX请求数据路由
routes.MapRoute(
name: "DefaultApp",
url: "app/{controller}/{action}/{id}",
defaults: new { controller = "Default", action = "Index", id = UrlParameter.Optional }
);
//登录路由单独执行
routes.MapRoute(
name: "Login",
url: "login/{action}/{id}",
defaults: new { controller = "Login", action = "Index", id = UrlParameter.Optional }
);
//其余所有路由都跳转到default/index
routes.Add(new SingleRoute());//单页规则
}
}
三、总结
问题已解决,记录并学习
AngularJS html5Mode与ASP.NET MVC路由共存的更多相关文章
- AngularJS html5Mode与ASP.NET MVC路由
AngularJS html5Mode与ASP.NET MVC路由共存 前言 很久之前便听说AngularJS,非常酷,最近也比较火,我也在持续关注这个技术,只是没有认真投入学习.前不久公司找我们部门 ...
- ASP.NET MVC 路由(一)
ASP.NET MVC路由(一) 前言 从这一章开始,我们即将进入MVC的世界,在学习MVC的过程中在网上搜索了一下,资料还是蛮多的,只不过对于我这样的初学者来看还是有点难度,自己就想看到有一篇引导性 ...
- ASP.NET MVC 路由(二)
ASP.NET MVC路由(二) 前言 在上一篇中,提及了Route.RouteCollection对象的一些信息,以及它们的结构所对应的关系.按照处理流程走下来还有遗留的疑问没有解决这个篇幅就来讲 ...
- ASP.NET MVC 路由(三)
ASP.NET MVC路由(三) 前言 通过前两篇的学习会对路由系统会有一个初步的了解,并且对路由系统中的Url规则有个简单的了解,在大家的脑海中也有个印象了,那么路由系统在ASP.NETMVC中所处 ...
- ASP.NET MVC 路由(四)
ASP.NET MVC路由(四) 前言 在前面的篇幅中我们讲解路由系统在MVC中的运行过程以及粗略的原理,想必看过前面篇幅的朋友应该对路由有个概念性的了解了,本篇来讲解区域,在读完本篇后不会肯定的让你 ...
- ASP.NET MVC 路由(五)
ASP.NET MVC 路由(五) 前言 前面的篇幅讲解了MVC中的路由系统,只是大概的一个实现流程,让大家更清晰路由系统在MVC中所做的以及所在的位置,通过模糊的概念描述.思维导图没法让您看到路由的 ...
- Asp.Net MVC 路由 - Asp.Net 编程 - 张子阳
http://cache.baiducontent.com/c?m=9d78d513d98316fa03acd2294d01d6165909c7256b96c4523f8a9c12d522195646 ...
- Asp.Net MVC路由调试好帮手RouteDebugger
Asp.Net MVC路由调试好帮手RouteDebugger 1.获取方式 第一种方法: 在程序包控制台中执行命令 PM> Install-Package routedebugger 安装成功 ...
- ASP.NET MVC路由(5)
ASP.NET MVC路由(五) 前言 前面的篇幅讲解了MVC中的路由系统,只是大概的一个实现流程,让大家更清晰路由系统在MVC中所做的以及所在的位置,通过模糊的概念描述.思维导图没法让您看到路由的实 ...
随机推荐
- play framework2.5.
play framework2 的学习笔记 https://github.com/playframework/playframework https://github.com/playframewor ...
- 【原创】leetCodeOj --- Jump Game II 解题报告
原题地址: https://oj.leetcode.com/problems/jump-game-ii/ 题目内容: Given an array of non-negative integers, ...
- iOS_11_tableViewCell使用alertView变更数据
最后效果图: Girl.h // // Girl.h // 11_tableView的使用_红楼梦 // // Created by beyond on 14-7-26. // Copyright ( ...
- MySQL与逻辑模块
启动MySQL 1.初始化模块运行&&存储引擎初始化运行 2.1中运行完毕后 ---->连接管理模块接手 3.连接管理模块启动处理client连接请求的监听程序(tcp/ip 网 ...
- yum简介(转)
yum是什么yum = Yellow dog Updater, Modified 主要功能是更方便的添加/删除/更新RPM包. 它能自动解决包的倚赖性问题. 它能便于管理大量系统的更新问题yum特点可 ...
- 密码 hdu
Time Limit : 2000/1000ms (Java/Other) Memory Limit : 65536/32768K (Java/Other) Total Submission(s) ...
- decimal ? 含义
例如: decimal ? je = zfje; 意思是 将 JE赋值为 ZFJE , 并且允许 JE 为 NULL 值 这时JE为引用类型
- hdu3182 状态压缩水题
题意是这种 给你n个汉堡 每一个汉堡有它的价值 做每一个汉堡都得花费相应的能量 如今告诉你最大能量 让你求获得的最大的价值(有些汉堡必须有还有一些汉堡做好为前提) 给你的 ...
- iOS发展- backBarButtonItem 颜色/文字修改
iOS7之后. 默认返回button字体颜色为蓝色, 在父母的陈列柜VC(老界面)的title 假设做出改变, 通过下面的方法可以: 1. 更改字体颜色 (1) 在plist里面, 加View con ...
- 输入n个数和输出调整后的n个数
输入n个数和输出调整后的n个数 Time Limit: 1 Sec Memory Limit: 128 MB Submit: 148 Solved: 118 [Submit][Status][We ...