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.

Answer 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 --> 

Answer 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