How can I use Angular views inside of an ASP.Net MVC 4 application?

Question

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.

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

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?

Michał Dudak · Accepted Answer · 2014-03-13 20:42:59Z

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.)

answered Mar 13, 2014 at 20:42

Michał Dudak

5,0682 gold badges23 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

drewwyatt Over a year ago

What should ASP.Net's route look like then? url: "{action}/*" (is that a valid route)? Also - thanks for the answer!

Michał Dudak Over a year ago

I think {action}/{*pathInfo} should work. {*whatever} will catch any number of segments after {action}. In your case I'd create a route for contact/{*pathInfo} pattern

trevorc · Accepted Answer · 2014-03-13 20:51:24Z

1

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

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.

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.

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

answered Mar 13, 2014 at 20:51

trevorc

3,0316 gold badges34 silver badges50 bronze badges

2 Comments

drewwyatt Over a year ago

I appreciate your answer! This doesn't fit my exact use case here (because of the reload) but this will definitely be helpful in the future and is a super nice way to organize this. Thanks!

trevorc Over a year ago

One other note on the benefit of using razor for angular partials. You can create angularjs html helpers for your forms and client side validation. As I am sure you have discovered typing out an angular form element and accompanying validation fields can be quite a chore. Razor helpers cut that time in half and allows you to use validation frameworks like FluentValidation.

Collectives™ on Stack Overflow

How can I use Angular views inside of an ASP.Net MVC 4 application?

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related