Angular Routing and Binding data from controller

Question

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.

As @Bruno suggested, the problem looks with the url which you are calling. — Rakesh Burbure
– Rakesh Burbure, Commented Jan 31, 2018 at 9:26

Bruno Quintella · Accepted Answer · 2018-01-31 09:22:22Z

1

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

answered Jan 31, 2018 at 9:22

Bruno Quintella

3712 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sabyasachi Mishra Over a year ago

If I use below codes it still didn't work for me app.controller('empController', function ($scope) { console.log("hi"); alert(); });

Bruno Quintella Over a year ago

You didn`t understand, the problem is the path of the Asp.Net MVC Controller. You are passing a wrong URL.

Sabyasachi Mishra · Accepted Answer · 2018-01-31 11:13:12Z

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);
    });
}

Collectives™ on Stack Overflow

Angular Routing and Binding data from controller

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related