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

Question

I am working on a MVC 5 project. When I use a html page at my views, it load that page but when I use .cshtml page it is not loading the view. The Blank page appears.

$urlRouterProvider
    .otherwise('/app/dashboard');

$stateProvider            
    .state('app', {
        abstract: true,
        url: '/app',
        templateUrl: 'tpl/app.html'
    })
    .state('app.dashboard', {
        url: '/dashboard',
        templateUrl: 'tpl/app_dashboard.html'
    })

Please guide me how to use cshtml file or the best way to do it.

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.

Comments

[Methodician]

FWIW it looks like you can indeed do this. Hopefully it won't come back to bite me. Not sure if @Yasser was correct in 2014 but here in 2016 Zanon has the right methodology so far as I can tell. Tried and tested.

[Faizan]

Then, is there any other way to call .cshtml file instead of html?

[sylwester]

you can call it just browser is not going to recognize it and in best option will display it as text file

[Bluesight]

Thanks for this suggestion! It also works with Angular 2 and Typescript. I just used it in my Component: @Component({ selector: 'login', templateUrl: 'Account/Login' })

[Methodician]

THIS should be marked as the correct answer. It's also how I oddly interpreted Yasser's also-viable workaround before scrolling down. I just definitely prefer this because it seems to make good use of both Razor and Angular all-in-one! Conveniently, you added some stuff I'd have had to fumble to figure out. Thanks!

[Learning-Overthinker-Confused]

so mentioned this line in your answer:"but from there let angularjs handle the routing for the "internal" pages".In this line to which internal pages you are refering to? html or cshtml pages??

[pedrommuller]

For the internal pages I mean angular handles the complete routing for your app for html pages, look at the meanjs org they handle that using the same logic I described on my answer

[pedrommuller]

I don't think so, probably you can reference any mvc server route / actionresult in the angular routing but IMHO it feels dirty to me :)

[Learning-Overthinker-Confused]

you are right but right now i am facing difficulty in routing cshmtl pages.i want to load cshtml view pages in ng-view and have angular js doing routing instead of mvc.can you help me in this??

[pedrommuller]

well I would recommend you to use yeoman if you don't have a clue where to start then replace the index.html generated for you with a combination of a layout / home view, I personally use that way to build my angularjs app, github.com/cgross/generator-cg-angular

[Thomas.Benz]

This is helpful to me.

[ashilon]

Late to this discussion, but how do you bind Angular's model (Test in your example) to Razor's model (Model.Test)? I've tried this and it didn't work. I didn't expect it to work in the first place, because the ASP.NET MVC controller returns html, not json object, so what's the point of having an angular viewmodel if you can't use it. I guess you could make a call in angular's controller to the server to get the viewmodel, but that is a second roundtrip to the server isn't it? How can you make it in one call?