Why this is not loading view1.cshtml in MVC empty web application ANGULAR

Question

I am learning Angular. I am watching a 2 years old video, and I am trying to use route concept and using in view1.CShtml (Remember, its CShtml and not html, while in the video, he uses html).

I also find it wierd that Views path starts as ~Views/View1.cshtml (Fair enough I have it in Views folder) on contrary to Partial/View1 where the video demonstrator has. Now, I do not understand what is this "~" for when I have similar directory structure like demonstrator.

Also, sadly, the view1 is not loading :( What is the problem? Of course he use single module and controller, but I am trying to use dependent module also for my own learning....What's the problem here?

    angular.module('App', ['myFirstApp']).controller('Fir', function ($scope) {
        $scope.Customers = [
      { name: 'Kiam', city: 'Los Angeles' },
      { name: 'Se', city: 'Los Vegas' }
        ]
    }).config(function ($routeProvider) {
        $routeProvider
        .when('/View1',
        {
            controller: 'Fir',
            templateUrl: '~Views/View1.cshtml'
        })
        .when('/View2',
        {
            controller: 'First',
            templateUrl: '~Views/View2.cshtml'
        })
        .otherwise({ redirectTo: '/View1' });
    });


    var temp = angular.module('myFirstApp', []);

    var controllerCollection = {};
    controllerCollection.First = function ($scope) {
        $scope.Customers = [
      { name: 'Sita', city: 'Los Angeles' },
      { name: 'Ram', city: 'Los Vegas' },

        ]
    };

    temp.controller(controllerCollection);

Your problems have nothing to do with Angular and everything to do with ASP.NET MVC. You need to learn about MVC routing and understand how it works and then this problem will be easy to solve. — Casey, Apr 03 '15 at 13:44
Alternatively, you could just use plain old HTML pages and not deal with Razor views or MVC routing or any of the rest of it; certainly the benefit is minimized if you're doing a true SPA (but the bundling and so on is still kind of useful). — Casey, Apr 03 '15 at 13:45
@emodendroket: First of all, I agree that he uses simple solution folder with just a folder named "Partials" where he has plain html view1.html and view2.html. And he don't have MVC structures. But I created an empty MVC while starting project in solution. So do you reckon it is because of this? Maybe it has its own app_start etc? I do not know how MVC routing interferes here? — Jasmine, Apr 03 '15 at 13:47
You can do whatever you want but cshtml files will not be served up raw; they are compiled and served up when someone hits the controller action(s) they are associated with — Casey, Apr 03 '15 at 13:52
So it doesn't make any sense to reference them in client-side code. — Casey, Apr 03 '15 at 13:52
@emodendroket: Thank you, just learning angular...i dont know mvc :0 — Jasmine, Apr 03 '15 at 13:55

score 0 · Answer 1 · edited May 23 '17 at 11:51

0

.cshtml pages are C# razor pages, which need to be loaded using ASP.net view engine, Like you could declare one action inside A controller and do return a cshtml view from there

Code

public ActionResult View1()
{
    return View();
}

Or else you need to create a static folder, which will not been included in Views folder, Asp.net restricted access to the views folder.

See reference SO Answer

edited May 23 '17 at 11:51

Community

1
1

answered Apr 03 '15 at 13:45

Pankaj Parkar

134,766
23
234
299

Thank you. I will try to create a new folder and just add html and see if that works. – Jasmine Apr 03 '15 at 13:50
make sure that newly created folder wouldn't be inside Views folder provided by MVC – Pankaj Parkar Apr 03 '15 at 13:51
how are you accessing the `.html` file? on what name you created folder – Pankaj Parkar Apr 03 '15 at 13:55
I created a folder named "MyViews" under the project which is MVC structure. So my new folder is placed right below the Model ad above the script folder :) What to do now :S – Jasmine Apr 03 '15 at 13:57
build it and see does that page is accessed or not, your url would be http://example.com/myviews/view1.html – Pankaj Parkar Apr 03 '15 at 14:00
Accessing it like this .when('/View1', { controller: 'Fir', templateUrl: 'MyViews/View1.html' }) – Jasmine Apr 03 '15 at 14:00
My url says http://localhost:56517/MyAngularTutorial.html when I right click and view in browser firefox for that MyAngularTutorial.html – Jasmine Apr 03 '15 at 14:01
it would be `.when('/View1', { controller: 'Fir', templateUrl: '/MyViews/View1.html' })` put slash before you tempalteUrl – Pankaj Parkar Apr 03 '15 at 14:03
I did use now, still not luck :( – Jasmine Apr 03 '15 at 14:06
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/74423/discussion-between-pankajparkar-and-deevinee). – Pankaj Parkar Apr 03 '15 at 14:09

score 0 · Answer 2 · answered May 26 '15 at 16:30

you could try like this .when('/View1', { controller: 'Fir', templateUrl: '/MyViews/View1'}), it's enough. and also check the route config the routing path is added or not. If you are using the $routeprovider it will automatically generated the routing path in global.asax.

No need to specify additionally the .cshtml for the view page to be displayed.

Why this is not loading view1.cshtml in MVC empty web application ANGULAR

2 Answers2

Linked