AngularJS html5Mode与ASP.NET MVC路由

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());//单页规则
    }
}

三、总结

问题已解决，记录并学习