I am learning Angularjs. so i implement a small project along with angular js, angularJs routing and asp.net mvc5. i am using VS2013 IDE.
Angular js part is working as expected but when i refresh the page then i am getting 404 error.
here is my MVC controller code.
public class HomeController : Controller { public ActionResult Index() { return View(); } public ActionResult Students() { return View(); } public ActionResult GetCourse() { //string updatedata = p1 + " welcome"; //string[] Courses = { "C#", "VB.Net", "SQL", "RDBMS", "ReactJs" }; //return Json(Courses, JsonRequestBehavior.AllowGet); List<course> crs = new List<course>(); crs.Add(new course { Name = "C#" }); crs.Add(new course { Name = "VB.Net" }); crs.Add(new course { Name = "SQL" }); crs.Add(new course { Name = "RDBMS" }); crs.Add(new course { Name = "ReactJs" }); crs.Add(new course { Name = "MongoDb" }); crs.Add(new course { Name = "PHP" }); return Json(crs, JsonRequestBehavior.AllowGet); //return new JsonResult { Data = crs, JsonRequestBehavior = JsonRequestBehavior.AllowGet }; } public ActionResult GetStudents() { List<Students> std = new List<Students>(); std.Add(new Students {ID=1, Name = "John",Country="UK" }); std.Add(new Students { ID = 2, Name = "Sam", Country = "USA" }); std.Add(new Students { ID = 3, Name = "Andrew", Country = "USA" }); std.Add(new Students { ID = 4, Name = "Dibyendu", Country = "India" }); std.Add(new Students { ID = 5, Name = "Arijit", Country = "India" }); return Json(std, JsonRequestBehavior.AllowGet); } } public class course { public string Name { get; set; } } public class Students { public int ID { get; set; } public string Name { get; set; } public string Country { get; set; } } My route.config code
routes.MapRoute( name: "Default", url: "{controller}/{action}/{id}", defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional } ); This is my MVC layout page where i added all js path.
<!DOCTYPE html> <html lang="en" ng-app="DemoApp"> <head> <title>{{Title}}</title> <base href="/"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> @Styles.Render("~/Content/sample.css") </head> <body> <header> <h2>Header</h2> </header> <section> <nav> <ul> <li><a href="/home">Home</a></li> <li><a href="/course">Course</a></li> <li><a href="/students">Students</a></li> </ul> </nav> <div> @RenderBody() <div> <ng-view></ng-view> </div> </div> <div id="footer"> <p>Footer</p> </div> </section> <script type="text/javascript"> var GetCoursesUrl = '@Url.Action("GetCourses", "Home")'; </script> @RenderSection("scripts", required: false) <script src="@Url.Content("~/Scripts/angular.js")"></script> <script src="@Url.Content("~/Scripts/angular-route.js")"></script> <script src="@Url.Content("~/Scripts/Script.js")"></script> </body> </html> this is my js script file where angular module & controllers are there.
/// <reference path="_references.js" /> var app = angular.module("DemoApp", ["ngRoute"]) .config(function ($routeProvider, $locationProvider) { $routeProvider .when('/', { // This is for reditect to another route redirectTo: function () { return '/home'; } }) .when("/home", { templateUrl: "Template/Home.html", controller: "homeController" }) .when("/course", { templateUrl: "Template/Course.html", controller: "courseController" }) .when("/students", { templateUrl: "Template/Students.html", controller: "studentController" }) //.otherwise({ // templateUrl: '/Template/Error.html', // controller: 'ErrorController' //}) //$locationProvider.html5Mode(false).hashPrefix('!'); // This is for Hashbang Mode $locationProvider.html5Mode(true) }) .controller("homeController", function($scope) { $scope.Message = "Home Page!!"; $scope.Title = "Home"; }) .controller("courseController", function ($scope, $http) { //$scope.Courses = ["C#", "VB.Net", "SQL", "RDBMS"]; $scope.Title = "Courses"; $http({ url: "/Home/GetCourse", method: 'GET' }) .then(function (response) { console.log(response.data); //$log.info(response.data); $scope.Courses = response.data; }); }) .controller("studentController", function ($scope, $http) { //$scope.Students = ["John", "Sam", "Mac", "Jeff"]; $scope.Title = "Students"; $http({ url: "/Home/GetStudents", method: 'GET' }) .then(function (response) { console.log(response.data); //$log.info(response.data); $scope.Students = response.data; }); }) my project is working. the only problem is when i refresh the page then 404 error is coming.
i have this url rewrite in config file which i commented now.
<!--<system.webServer> <rewrite> <rules> <rule name="AngularJS" stopProcessing="true"> <match url=".*" /> <conditions logicalGrouping="MatchAll"> <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /> <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" /> </conditions> <action type="Rewrite" url="/" /> </rule> </rules> </rewrite> </system.webServer>--> i commented because the above url rewrite rule blocking the $http call. when commented then $http call start working.
i also had a catchall route in . route.config file but that also did not help me to resolve page reload problem. this is my catchAll route in route.config file which is commented so far now.
//routes.MapRoute( // name: "App", // url: "{*url}", // defaults: new // { // controller = "Home", // action = "Index" // } //); please guide me what is the problem for which page refresh is not working. i am looking for a step-by-step help to resolve this problem. i search google but still no luck to get rid of this problem.
Thanks
