AngularJs routing with Asp.Net Mvc

Question

I'm trying to build a SPA with Asp.Net MVC. for this I'm using angularJs routing . This is my project hierarchy. enter image description here

My Layout.cshtl code

<html lang="en" ng-app="ProjectTrackingModule">
 <head>
   <script src="~/Scripts/jquery-2.1.0.min.js"></script>
   <script src="~/Scripts/angular.min.js"></script>
   <script src="~/Scripts/angular-route.min.js"></script>
   <script src="~/Scripts/app.js"></script>
</head>
<body>
<a href="#Home">Home</a>
<a href="#Projects">Projects</a>
   <div ng‐view style="margin‐left: 10%; margin‐right: 10%;">
    </div>
//... footer
</body>
</html>

My app.Js code is as follow:

var app = angular.module('ProjectTrackingModule', ['ngRoute', 'ui.bootstrap']);
app.config(function ($routeProvider) {
    $routeProvider
        .when("/Home", {
        templateUrl: "/Views/Home/Home.cshtml",
        controller:"HomeController"
    })
    .when("/Projects", {
        templateUrl: "/Views/ProjectManagement/ProjectDetails.cshtml",
    controller: "ProjectsController"
    })
    .otherwise({redirectTo:"/Home"})
});

I want to load my Home.Cshtml partial view inside ng-view. But when I run my application, It only showing Home partial view.

also when I click on Project, then it should render ProjectDetails.cshtml inside ng-view.

code inside ProjectDetails.cshtml

<div ng-controller="ProjectsController">
    <h2>ProjectDetails</h2>
</div>

does not make sense, don't compare angular routing with mvc routing :( — Ramesh Rajendran, Apr 27 '15 at 18:56
@RameshRajendran: How to use routing with mvc. I mean when i click on Home `anchor link` then it should show Home partial view. — Amit Kumar, Apr 27 '15 at 18:57

score 4 · Answer 1 · edited May 23 '17 at 12:17

I think you have some misonceptions about Angularjs routing concepts.

MVC Routing :

ASP.NET routing enables you to use URLs that do not have to map to specific files in a Web site. Because the URL does not have to map to a file, you can use URLs that are descriptive of the user's action and therefore are more easily understood by users.

Angular Routing :

Angular.js routing using MVC framework does not use MVC routing.

Comparable parts are:

Model ===== ng-module 
controller ===== ng-controller
view ===== ng-view

So you can't call the MVC Controller in your angularjs route config. Does this make sense?

Also please think about some of the differences between cshtml and html.

Angular routing and MVC routing are totally different because:

Angular routing is use client side
MVC routing is used server side

The above texts are for your understanding only.

I think this discussion will help you :

How to use ASP.NET MVC and AngularJS routing?

Update :

The href is wrong in Anchor tag.

Its should be href="#/Home", not href="#Home"

So please change your code

 <a href="#/Home">Home</a>
    <a href="#/Projects">Projects</a>

I have changed my code. but nothing is happening. when I'm clicking on Project, it doesn't loading `ProjectDetails.cshtml` — Amit Kumar, Apr 27 '15 at 19:35

score 2 · Answer 2 · answered Apr 28 '15 at 06:32

Lets understand the routing in angular first. lets say your url says

www.example.com/Home/Index -- this points to your MVC HomeController and Index ActionMethod. Now what mvc does, it returns you the first View only.

say you have an anchor Load the New View. Clicking this will result in a new Url www.example.com/Home/Index#/angular-route. This url will still hit the same MVC HomeController and ActionMethod. But you have an additional route in angular

`var app = angular.module('ProjectTrackingModule', ['ngRoute', 'ui.bootstrap']);
 app.config(function ($routeProvider) {
    $routeProvider
        .when("/angular-route", {
        templateUrl: "/Html/GetHtml?type=angular-route",
        controller:"AngularController"
    })   
    .otherwise({redirectTo:"/Home"})
});`

Here in the code section templateUrl: "/Html/GetHtml?type=angular-route",

Html is MVC Controller and GetHtml is ActionMethod. This ActionMethod returns you the new view that you want according to the angular route, that's why we are sending a parameter type too to help us decide.

controller:"AngularController" says that angular will call its controller after the page is returned from you mvc controller. It's Angular's Controller and it has nothing to do with your MVC controller.

you declare angular controller like this:

 app.controller('AngularController',function($scope){
        alert("my js controller is called");
    });

Hope this helps you to find a solution.

score 2 · Answer 3 · answered Nov 02 '15 at 02:40

Have a simple example can apply to your project. Example our MVC application has four pages as Home, Contact, About and User, we want to create a angularjs template for each pages, so how we do routing for it? how to make angularjs controller for it?

Basic code as following:

Routing:

    $routeProvider
    .when('/', { // For Home Page
        templateUrl: '/AngularTemplates/Home.html',
        controller: 'HomeController'
     })
    .when('/Home/Contact', { // For Contact page
        templateUrl: '/AngularTemplates/Contact.html',
        controller: 'ContactController'
    })
    .when('/Home/About', { // For About page
        templateUrl: '/AngularTemplates/About.html',
        controller: 'AboutController'
    })
    .when('/Home/User/:userid', { // For User page with userid parameter
       templateUrl: '/AngularTemplates/User.html',
       controller: 'UserController'
    })
    .otherwise({   // This is when any route not matched => error
       controller: 'ErrorController'
    })
}]);

Controller:

var app = angular.module('MyApp'); app.controller('UserController', ['$scope', '$routeParams', function ($scope, $routeParams) {
$scope.Message = "This is User  Page with query string id value = " + $routeParams.userid;}]); ...

Full article with download code for it at Angularjs routing asp.net mvc example

you are not creating `.cshtml`. But in my case, I have .cshtml page . and In this case AngularJs routing won't work . — Amit Kumar, Nov 02 '15 at 03:48
In my example Views to be .cshtml and template of view to be html file. In html file i implement via angularjs. I used ng-view to load template to .cshtml. Please download source code Github. — Lewis Hai, Nov 02 '15 at 03:53
You cannot use path to a .cshtml file in your template url of your angular route. See at http://stackoverflow.com/questions/25785579/is-angular-routing-template-url-support-for-cshtml-file-in-asp-net-mvc-5-projec — Lewis Hai, Nov 02 '15 at 06:27
This answer does not at all address the op question. Op clearly stated the desire to use cshtml, which cannot be done with this example. — Ron, Feb 23 '18 at 04:51

score 0 · Answer 4 · answered Apr 19 '16 at 01:14

You cannot directly point on the .cshtml file but you can point to a templateUrl that points to an MVC route.

Considering you are using the default MVC route {controller}/{action}/{id?}, for example:

var app = angular.module('ProjectTrackingModule', ['ngRoute', 'ui.bootstrap']);
app.config(function ($routeProvider) {
    $routeProvider
        .when("/Home", {
        templateUrl: "/Home/Home", //points to an mvc route controller=Home, action=Home
        controller:"HomeController"
    })
    .otherwise({redirectTo:"/Home"})
});

But in order for it to work the MVC Action should be in the controller also.

public class HomeController : Controller
{
    [HttpGet]
    public ActionResult Home()
    {
        return View();
    }
}

also your anchor tags points to an incorrect href, it should have the hashbang (#)

<a href="/#/Home">Home</a>
<a href="/#/Projects">Projects</a>

score 0 · Answer 5 · answered Nov 28 '16 at 05:19

Simple way to do it would be like follows:

MyAngularApp.js

var myAngularApp = angular.module('MyAngularApp', ['ngRoute']);
myAngularApp.config(function ($routeProvider) {
    $routeProvider
        .when("/myprojects", {
            templateUrl: "MyAspMvcCtrl/GetTemplate?id=myprojects",  
            controller:"MyAngularController"
        })
       ...
    .otherwise({redirectTo:"/myprojects"})
});

myAngularApp.controller("MyAngularController", function ($scope) {
    ...
    // Do something
    $scope.mydata = {
        id = 1234,
        msg = "Hello"
    };
});

ASP.Net MVC Controller

public class MyAspMvcCtrlController : Controller
{
    [HttpGet]
    public ActionResult GetTemplate(string id)
    {
       switch (id.ToLower())
       {
           case "myprojects":
               return PartialView("~/Views/ProjectManagement/ProjectDetails.cshtml");
           default:
               throw new Exception("Unknown template request");
       }
    }
}

Layout.cshtml

<html ng-app="myAngularApp">
...
<body>
    ...
    <div ...>
        ...
        <a href="#/myprojects">My Projects</a>
        ...
    </div>

    <div ng-view></div>
    ...
</body>
</html>

ProjectDetails.cshtml

<div ...>
    <h3>ID: {{mydata.id}}</h3>
    <p>Message: {{mydata.msg}}</p>
</div>

score 0 · Answer 6 · edited Nov 03 '19 at 19:29

AngularJs Routing Does not working with cshtml files !!

if you want to use angularjs routing with mvc view (cshtml) file use both routing: angular routing + mvc routing

your routing code should be like this:

.when("/Home", {
        templateUrl: "/Home/Home",
        controller:"HomeController"
});

where First Home is Controller Name and Second Home is The Action Name at the Mvc Controller.

AngularJs routing with Asp.Net Mvc

6 Answers6

MVC Routing :

Angular Routing :

Update :

Linked