CODEWITHSUNDEEP
angularjsasp.net-mvc
Sabyasachi Mishra
Sabyasachi Mishra

Reputation: 1749

Angular Routing and Binding data from controller

I have my angular routing like th below code

var app = angular.module('mainApp', ['ngRoute']);

app.config(function ($routeProvider) {

    $routeProvider.when('/', {
        templateUrl: '/DeclarationForms/V1/EmployeeProfile.html',
        controller: 'empController'
    }).when('/DeclarationAndIndemnityBond.html', {
        templateUrl: '/DeclarationForms/V1/DeclarationAndIndemnityBond.html',
        controller: 'declarationController'
    }).otherwise({
        redirectTo: "/"
    });

    app.controller('empController', function ($scope, $http) {

        var resultPromise = $http.get("../ViewForms/GetData/", { params: { ProcName: "SP_EmployeeProfile_GetList" } });
        resultPromise.success(function (data) {
            console.log(data);
            $scope.employeeProfile = data;
        });
    });
});

The empController calls my controller action with a parameter as per the code

$http.get("../ViewForms/GetData/", { params: { ProcName: "SP_EmployeeProfile_GetList" } });

The controller's action code is as follows

        [HttpGet]
        [AllowAnonymous]
        public ActionResult GetData(string ProcName)
        {
            if(Session["UserJDRECID"]==null || Session["UserJDRECID"].ToString()=="0")
            {
                return RedirectToAction("Login", "User_Login");
            }
            else
            {
                var UsrJDID = Convert.ToInt32(Session["UserJDRECID"]);
                DataSet dt = Helper.PopulateData(ProcName, UsrJDID);
                string JSONString = string.Empty;
                JSONString = JsonConvert.SerializeObject(dt);
                return Json(JSONString, JsonRequestBehavior.AllowGet);
            }
        }

The form get loaded properly as per the code

templateUrl: '/DeclarationForms/V1/EmployeeProfile.html',

but it don't call my action GetData from where I suppose to bind the EmployeeProfile.html

If I change my angular controller like below code this still don't work

app.controller('empController', function ($scope) 
{
 console.log("hi"); alert(); 
});

My console gives below error

Error: error:areq

Bad Argument

Please help me I stuck here.

Thanks in advance.

Upvotes: 2

Views: 78

Answers (2)

Sabyasachi Mishra
Sabyasachi Mishra

Reputation: 1749

I change my code as follows and this worked for me.

var app = angular.module('mainApp', ['ngRoute']);

app.config(function ($routeProvider) {
    $routeProvider.
        when('/', {
            templateUrl: '/DeclarationForms/V1/EmployeeProfile.html',
            controller: 'empController'
        })
        otherwise({
            redirectTo: "/"
    });
});

app.controller('empController', ['$scope', '$http', EmployeeProfile]);
function EmployeeProfile($scope, $http) {
    $http.get("../ViewForms/GetData", { params: { ProcName: "SP_EmployeeProfile_GetList" } })//Done
        .then(function (response) {
            var mydata = $.parseJSON((response.data));
            $scope.employeeProfile = $.parseJSON(mydata);
    });
}

Upvotes: 0

Bruno Quintella
Bruno Quintella

Reputation: 371

You can't use "../" inside your $http.get.

I don`t know how your project is setup, but you can try:

$http.get("/ViewForms/GetData/", { params: { ProcName: "SP_EmployeeProfile_GetList" } });

In that case the ViewForms is the name of your controller and it needs to be in the root or pass the complete url.

Make sure you are passing all the folders then Controller then your action.

Example: http://www.dotnetcurry.com/angularjs/1202/angular-http-service-aspnet-mvc

Upvotes: 1

Related Questions