26

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.

Improve this question
1
  • 2
    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. Commented Mar 3, 2016 at 23:56

4 Answers 4

Reset to default
32

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 -->
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

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!
This is helpful to me.
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?
30

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

Improve this answer

1 Comment

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' })
1

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.

Improve this answer

5 Comments

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??
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
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 :)
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??
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
0

cshtml is essentially inline csharp code with razor syntax and is render to html on server site so you can't use in angular routing as browser is not recongnise c#

Improve this answer

2 Comments

Then, is there any other way to call .cshtml file instead of html?
you can call it just browser is not going to recognize it and in best option will display it as text file

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.