CODEWITHSUNDEEP
angularjsasp.net-mvc
Rani Radcliff
Rani Radcliff

Reputation: 5084

How to pass parameter from MVC Controller to Angular

I am using Angular in MVC Project. To change views I pass the URL to my Angular controller like this:

In my Angular Module:

var app = angular.module('myModule', ['ui.bootstrap', 'checklist-model', 'ngAnimate', 'ngTouch', 'ui.grid', 'ui.grid.pagination', 'ui.grid.selection', 'ui.grid.exporter', 'ui.grid.autoResize', 'ngRoute'])

In my MVC Controller:

public ActionResult Index()
        {
            ConfigureDefaultLayout();


            return View("ContractorOperatorView");

            //return PartialView("_ScoringSetOverride");
        }

        public ActionResult GetContractorPage(int companyId, string currentStatus)
        {   
            contractorId = companyId;
            ReleaseStatus = currentStatus;
            string newUrl = "/SSQV4/SSQV5/Contractor/Index";
            return Json(newUrl, JsonRequestBehavior.AllowGet);
        }

Then in my Angular Controller:

$scope.rowDblClick = function (row) {
    generalsearchService.goToContractorPage(row.entity.CompanyID, row.entity.ReleaseStatus)
    .success(function (data) {
        $window.location.href = data;
    })

};

In my Angular service --

this.goToContractorPage = function (id, status) {
    return $http.post('/SSQV4/SSQV5/Contractor/GetContractorPage', { "companyId": id, "currentStatus": status })
};

All worked fine as I was making the "contractorId" static in my MVC controller, but that is causing functionality problems. I need to pass the contractorId along with the URL to my Angular controller, but I don't know how. I tried this:

In my MVC Controller --

 string newUrl = "/SSQV4/SSQV5/Contractor/Index?id=" + contractorId;

Then in my Angular controller --

$scope.contractorid = $routeParams.id;

I receive the error "routeParams is undefined". I know that there must be some way to do this, but I am clueless has to how. There is a lot of information on passing parameters from Angular to MVC, but not much on the reverse.

Any assistance is greatly appreciated!

I tried putting this in my app.js:

var app = angular.module('myModule', ['ui.bootstrap', 'checklist-model', 'ngAnimate', 'ngTouch', 'ui.grid', 'ui.grid.pagination', 'ui.grid.selection', 'ui.grid.exporter', 'ui.grid.autoResize', 'ui-router'])
$stateProvider.state('contractor', {
    url: '/Contractor?contractorId',
    params: {
        contractorId: {
            value: null,
            squash: true
        }
    }
});

Now I get "$stateProvider is undefined" error.

Upvotes: 2

Views: 3025

Answers (2)

jamesmpw
jamesmpw

Reputation: 525

In your app.js file make sure to add on that a route that there will be a parameter. Check out here.

Often, URLs have dynamic parts to them which are called parameters. There are several options for specifying parameters. A basic parameter looks like this:

$stateProvider
.state('contacts.detail', {
    url: "/contacts/:contactId",
    templateUrl: 'contacts.detail.html',
    controller: function ($stateParams) {
        // If we got here from a url of /contacts/42
        expect($stateParams).toBe({contactId: "42"});
    }
})

Alternatively you can also use curly brackets:

// identical to previous example
url: "/contacts/{contactId}"

Examples:

'/hello/' - Matches only if the path is exactly '/hello/'. There is no special treatment for trailing slashes, and patterns have to match the entire path, not just a prefix.

'/user/:id' - Matches '/user/bob' or '/user/1234!!!' or even '/user/' but not '/user' or '/user/bob/details'. The second path segment will be captured as the parameter 'id'.

'/user/{id}' - Same as the previous example, but using curly brace syntax.

'/user/{id:int}' - The param is interpreted as Integer.

I Hope it is helpful.

Upvotes: 0

ogugger
ogugger

Reputation: 122

Assuming you use the ui-router Angular module , you need to define the parameter in your state definition:

  $stateProvider.state('contractor', {
    url: '/contractor?contractorId',
    params: {
      contractorId: {
        value: null,
        squash: true
      }
    }
  });

And then of course you need to inject the $routeParams into your controller before using it.

Upvotes: 0

Related Questions