Angularjs route html5Mode direct url in .net MVC

Question

I've seen a couple of similar questions/answers, but I still seem to be missing something. Everything works fine until I refresh the page or go to a URL directly.

I can either get a 404 or create the same url in mvc, but then it serves up the partial only on refresh and doesn't include the layout page.

There were a couple that suggested changing the MVC routing to:

routes.MapRoute(
    name: "Application",
    url: "{*url}",
    defaults: new { controller = "Home", action = "Index" }
);

When that is implemented, it means I can't access any other URL on the site normally and unless I am missing something, basically everything has to be put into a rest api or write a custom route for every url. Neither sounds very good.

So how can I have an html5 url (no hash tags in valid browsers) with angularjs and be able to browse to eg. Home/About or Home then click a link to About and have them show up the same with the same base layout page?

i think this is what you're looking for stackoverflow.com/questions/25730797/… — Teliren
– Teliren, Commented Oct 16, 2015 at 2:47
That looks like it's saying the same thing. Re-route all requests. Not wanting to use API calls for everything seems more challenging than I would have figured. Was thinking of writing a filter in MVC to re-route all non ajax requests, but maybe there is a better way. — VirtualLife
– VirtualLife, Commented Oct 16, 2015 at 15:17

VirtualLife · Accepted Answer · 2015-10-17 15:27:09Z

0

This may not be the best answer, so if anyone has any better ideas, please comment, otherwise maybe this will help someone else.

I realized that the MVC Ajax directive didn't detect angular calls, so I couldn't automate that side.

So in angular I did something like

.when('/Home/Contact', {
    templateUrl: '/Home/NgContact'

In my MVC controller I have 2 actionresults:

public ActionResult NgContact(){
    ViewBag.IsFromNg = 1;
    return Contact();
 }
 public ActionResult Contact() {
    return View("Contact"); //have to type in name, may look for NgContact.cshtml
 }

Finally on any views these may call I put:

@if (ViewBag.IsFromNg == 1){ Layout = null; }

So there is a little repetition with each Actionresult having 2 copies, 1 for a full page load and 1 for any calls angular makes, but only 3 extra lines each.

answered Oct 17, 2015 at 15:27

VirtualLife

4025 silver badges17 bronze badges

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

Collectives™ on Stack Overflow

Angularjs route html5Mode direct url in .net MVC

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related