如何在ASP.Net MVC 4应用程序中使用Angular视图？

I would like to use Angular.JS to implement multiple contact forms, but am not sure how to keep angular's routing from interfering with ASP.Net's routing.

我想使用Angular.JS来实现多个联系表单,但我不确定如何防止angular的路由干扰ASP.Net的路由。

My ASP.Net MVC 4 routes look like this (this is the default project with minor alterations):

我的ASP.Net MVC 4路由看起来像这样(这是一个带有微小改动的默认项目):

namespace Angular_Test
{
    public class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
                name: "Default",
                url: "{action}",
                defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
            );
        }
    }
}

I would like my contact page's (located at /contact) ng-view div to default to something like (say) form.html, and have a handful of links that would load in form2.html, form3.html, etc. But would pointing those links to something like /contact/form2 totally screw with ASP.Net's routes? How should I go about implementing this?

我希望我的联系页面(位于/联系人)ng-view div默认为类似(例如)form.html,并且有一些链接可以加载到form2.html,form3.html等。但是将这些链接指向像/ contact / form2这样的东西完全搞砸ASP.Net的路线?我应该怎么做呢?

2 个解决方案

#1

You have to ensure that all URLs mapped to Angular views are handled by the same route on the server (i.e. server should return /contact if it gets a request to either /contact, /contact/form1, /contact/form2, etc.)

您必须确保映射到Angular视图的所有URL都由服务器上的相同路由处理(即,如果服务器收到/ contact,/ contact / form1,/ contact / form2等请求,则应返回/联系)

#2

I prefix my angular view routes with '/partials'. It looks like this.

我使用'/ partials'作为角度视图路线的前缀。看起来像这样。

routes.MapRoute(
     "DefaultPartials",
     "partials/{controller}/{action}/{id}",
     new { id = UrlParameter.Optional});

Now keep in mind that this approach will cause a partial view to go through the entire page life cycle but I use razor partials for localization of my page text so this is ok for my usage.

现在请记住,这种方法会导致部分视图遍历整个页面生命周期,但我使用razor partials来定位我的页面文本,所以这对我的使用是可以的。

Then I use areas in my application to spit out JSON data from Web API controllers for angular to consume. Keeps things nice and tidy. Hope this helps.

然后我使用我的应用程序中的区域从Web API控制器中吐出JSON数据以使角度消耗。让事情变得美好而整洁。希望这可以帮助。

I almost forgot. You will want to put the partials route just before the standard default route in RouteConfig.cs.

我差点忘了。您需要将部分路由放在RouteConfig.cs中的标准默认路由之前。

#1