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

Answer 1

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" }
    );

Answer 2

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"}
        );
    }