Use ASP.NET MVC routing parameters showing undefined in angular js controller

Question

This is my Url which is using asp.net MVC routing

http://localhost:23293/Exam?id=1

i want to access id parameter in angular js controller

aoeapp.controller('ExamController', function ($scope, examservice, $routeParams) {
$scope.exams = [];
$scope.id = $routeParams.id;
alert($scope.id);
$scope.getAllexams = function (id) {

    examservice.getExamMaster(id).success(function (data) {
        $scope.exams = data;
    }).error(function (data, status, Xhr) {

        alert(Xhr);
    });
};
$scope.getAllexams(id);
});

so here $scope.id showing undefined

My mvc routing is just default routing

Edit The angular routes

aoeapp.config(function ($routeProvider) { 
    $routeProvider.when('/', { 
        controller: 'HomeController', 
        templateUrl: 'Pages/Home.html' 
    }).when('/Exam/:id', { 
        controller: 'ExamController', 
        templateUrl: 'Pages/Exam.html' 
    }).when('/Test/:id', { 
        controller: 'TestController', 
        templateUrl: 'Pages/Test.html' 
    }).otherwise({ redirectTo: '/' }); 
});

Answer 1

I had a similar issue, where my Angular routes were routed to my MVC controllers. I fixed it using a catchall route:

Add this route to your App_Start/RouteConfig.cs :

routes.MapMvcAttributeRoutes();
routes.MapRoute(
    name: "Angular",
    url: "Exam/{*url}",
    defaults: new {controller = "Angular", action = "Index" }
);

With the following action in your Controllers/AngularController.cs file:

[Route("Exam/{*url}")]
public ActionResult Index()
{
    return View();
}

This should intercept all calls to the /Exam and redirect them to your Angular router. You may have to play a litle with the Route attribute name.

Answer 2

I fixed this problem with a different approach. I created a ViewBag variable to store the query string or the id, you can also use the model , and then pass it into an angular method. You can understand this more clearly by going through the code:

Razor View

<form name="ExamForm" ng-init="$scope.setQueryStringToScopeId(@ViewBag.Id)">
    ....
</form>

Angular Controller

aoeapp.controller('ExamController', function ($scope, examservice) {

    $scope.id = 0;
    $scope.setQueryStringToScopeId = function(id) {
        $scope.id = id;
    };
    ....
});

MVC Controller

public ActionResult Exam()
{
    ViewBag.Id = Request.QueryString["Id"];
    return View();
}

You can also use the query string directly in your Razor View . Let me know if this works for you.