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

Answer 2

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.