Does Angular routing template url support *.cshtml files in ASP.Net MVC 5 Project?

Solution 1:

Yes, you can.

Adding a similar answer to Yasser's, but using ngRoute:

1) Instead of referencing your partial HTML, you need to reference a Controller/Action to your ASP.NET MVC app.

.when('/order', {
    templateUrl: '/Order/Create',
    controller: 'ngOrderController' // Angular Controller
})

2) Your ASP.NET MVC will return a .cshtml view:

public class OrderController : Controller
{
    public ActionResult Create()
    {
        var model = new MyModel();
        model.Test= "xyz";

        return View("MyView", model);
    }
}

3) Your MyView.cshtml will mix Razor and Angular. Attention: as its a partial for your Angular app, set the layout as null.

@model MyProject.MyModel

@{
   Layout = null;
}

<h1>{{ Test }}</h1> <!-- Angular -->
<h1>Model.Test</h1> <!-- Razor -->

Solution 2:

You cannot.

You cannot use path to a .cshtml file in your template url of your angular route. Can you open the .cshtml file in your browser ? No right ? The same thing applies here.

Workaround :

.cshtml file contains server side code, to render it you need to use a controller and action. They will render that .cshtml file for you. So have a controller action return that view for you and use the url to the controller action in your angular route.

eg:

state('app.dashboard', {
        url: '/dashboard',
        templateUrl: '/dashboard/index'
     })

with

public class DashboardController : Controller
{
    public ActionResult Index()
    {
        return View();
    }
}

p.s: have tried and this worked for me

Solution 3:

You can't mix angularJs and Razor views, razor is loaded in the server and angular runs in the client it uses javascript that runs in the browser for rendering the views, that's why people tend to use a rest api as a backend in your case since you are using .net it could be web API or service stack.

what you can do is to execute the razor view as the main "index page" but from there let angularjs handle the routing for the "internal" pages.

remember that angular has been built upon the idea of a single page application which is a different perspective of asp.net mvc architecture.