MVC4 AngularJS Removing # From Urls In Areas Applications

Question

Before Posting This Question I Searched And Tried Out Many Examples As Well.

For My Problem There Was A Similar POST But It is Not Working Too.

Here Is The Structure Of MY Whole APPLICATION:

Here Is The Structure Of ADMIN AREA :

Project Has Two Applications Now One For Client And Another For Admin : Admin Is Managed Through Areas

I Have Used Angular 1.3.5 And It is Used Inside The Areas.

The Landing Page Is Index Page of Home Controller Path :- Areas/Admin/Views/Home/Index.cshtml

Layout is _Layout Path : Areas/Admin/Views/Shared/_Layout.cshtml

RouteConfig.cs File Of Inside App_Start Folder :

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

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

AdminAreaRegistration.cs

namespace StockManagment.Areas.Admin
{
    public class AdminAreaRegistration : AreaRegistration
    {
        public override string AreaName
        {
            get
            {
                return "Admin";
            }
        }

        public override void RegisterArea(AreaRegistrationContext context)
        {
            context.MapRoute(
                "Admin_default",
                "Admin/{controller}/{action}/{id}",
                new { action = "Index", id = UrlParameter.Optional },
                new [] {"StockManagment.Areas.Admin.Controllers"}
            );
        }
    }
}

HTML5MODE For Removing # Form URL

myApp.config(["$locationProvider", function ($locationProvider) {
    $locationProvider.html5Mode(true);
}]);

Base Tag In _Layout Page:

<base href="/">

Web.config Code Of Admin Areas

<rewrite>
  <rules>
    <rule name="Main Rule" stopProcessing="true">
      <match url=".*" />
      <conditions logicalGrouping="MatchAll">
        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
        <add input="{REQUEST_FILENAME}" matchType="IsDirectory"   negate="true" />
      </conditions>
      <action type="Rewrite" url="/" />
    </rule>
  </rules>
</rewrite>

When I Try To Access Admin Side Using This URL: http://localhost:8917/Admin/Home/Index

It Loads The Website At : localhost:8917/

And If I Refresh The Page It Loads The Original Content i.e The Client Side Home Page.

Where Am I Going Wrong In This ?

Thanks In Advance...

Edit 1 :

i removed the rewrite code in web.config i used it because i saw it in another post

before using

myApp.config(["$locationProvider", function ($locationProvider) {
    $locationProvider.html5Mode(true);
}]);

and

<base href="@Request.Url.AbsolutePath" />

to access admin side home page the url was :- http://localhost:8917/Admin/Home/Index#/

after adding the above code it is :- http://localhost:8917/Admin/Home/

accessing categories page

categories before code :- http://localhost:8917/Admin/Home/Index#/Categories

categories after code :- http://localhost:8917/Admin/Home/Categories

when i refresh it gives error

Server Error in '/' Application. The resource cannot be found. Description: HTTP 404. The resource you are looking for (or one of its dependencies) could have been removed, had its name changed, or is temporarily unavailable. Please review the following URL and make sure that it is spelled correctly.

Requested URL: /Admin/Home/Categories

I think it is because of the base url, try using content.url - stackoverflow.com/questions/23998867/… or base href="@Request.Url.AbsolutePath"/> — Ziv Weissman
– Ziv Weissman, Commented Jun 13, 2016 at 14:24
@ZivWeissman it works and removes the # from url but when i refresh it gives error — 3gth
– 3gth, Commented Jun 13, 2016 at 15:30
I got this to work by creating an Action in my controller for that URL which redirects to the main view like this return View("../Home/Index"); and then put / instead of @Request.Url.AbsolutePath in the base element. Hope it helps. — kbaccouche
– kbaccouche, Commented Sep 20, 2016 at 12:53

MIP1983 · Accepted Answer · 2016-06-13 14:32:04Z

0

I'm not sure why you're using the rewrite rule, I can imagine this would interfere with the routing you are trying to do with MVC. I would suggest removing the url rewrite rule from the web.config.

If you want a collection of routes to map to the Index action in the admin area (so that various urls go to your angular SPA), use a wildcard MVC route.

e.g.

// Route override to work with Angularjs and HTML5 routing
    context.MapRoute(
        name: "Application1Override",
        url: "Application1/{*.}",
        defaults: new { controller = "Application1", action = "Index" }
    );

answered Jun 13, 2016 at 14:32

MIP1983

1,3841 gold badge15 silver badges26 bronze badges

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

6 Comments

3gth Over a year ago

i tried you way in the admin area registration it is not working it gives error too

3gth Over a year ago

admin is an area in the application where i am using angularjs it has its own controllers models and views and routing way when using base href and html5mode it loads the admin area on the root side where client should load and when refreshing it load original client content

MIP1983 Over a year ago

Taking angular out of the equation for a second, can you confirm if your wildcard route works in MVC. Do all routes to Admin/* take you to your index page (with the angular part disabled for now)?

MIP1983 Over a year ago

Also, I personally find attribute routing a bit easier than centrally defining routes, i.e. [Route("admin/{*catchall}"].

3gth Over a year ago

i am not sure what you mean to say by disabling angular if meant to comment the html5mode and base tag and use the context map route well i tried it and its not working for me

|

3gth · Accepted Answer · 2016-06-13 18:25:46Z

In your initial problem you had

<base href="/" />

which tells angular that the basic routing is "/", so it will change the href to the base ("/") when you reload the page, MVC will take you to "/" which is your root action.

When you are changing to -

<base href="@Request.Url.AbsolutePath" />

angular will know the base of this page is your current {action}/{controller}

Now you have another problem with the routing:

namespace StockManagment.Areas.Admin
{
    public class AdminAreaRegistration : AreaRegistration
    {
        public override string AreaName
        {
            get
            {
                return "Admin";
            }
        }

    public override void RegisterArea(AreaRegistrationContext context)
    {
        context.MapRoute(
            "Admin_default",
            "Admin/{controller}/{action}/{id}", // your current url= /Admin/Home/Categories -- which means id = Categories
            new { action = "Index", id = UrlParameter.Optional },
            new [] {"StockManagment.Areas.Admin.Controllers"}
        );
    }
}}

If you don't need ID you can use this code:

public override void RegisterArea(AreaRegistrationContext context)
    {
        context.MapRoute(
            "Admin_default",
            "Admin/{controller}/{action}/{*angular}",
            new { action = "Index",
            new [] {"StockManagment.Areas.Admin.Controllers"}
        );
    }

Collectives™ on Stack Overflow

MVC4 AngularJS Removing # From Urls In Areas Applications

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related