How to pass parameter from MVC Controller to Angular

Question

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.

ogugger · Accepted Answer · 2015-11-24 16:10:40Z

0

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.

answered Nov 24, 2015 at 16:10

ogugger

1226 bronze badges

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

1 Comment

Rani Radcliff Over a year ago

I am unable to get any of this to work, mainly because I don't understand what $stateProvider is doing and where to put all of the code. What goes into my MVC Controller? Currently I have this: contractorId = companyId; ReleaseStatus = currentStatus; string newUrl = "/SSQV4/SSQV5/Contractor/ContractorOperatorView?contractorId=" + contractorId; return Json(newUrl, JsonRequestBehavior.AllowGet); Am I passing it correctly? If so how do I retrieve the contractorId that is passed?

jamesmpw · Accepted Answer · 2015-11-24 16:13:15Z

0

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.

answered Nov 24, 2015 at 16:13

jamesmpw

5255 silver badges17 bronze badges

8 Comments

Rani Radcliff Over a year ago

So the curly brackets go in my MVC controller like this: string newUrl = "/SSQV4/SSQV5/Contractor/Index?{contractorId}"? I'm confused as to where to put the code you provided and how exactly am I retrieving the contractorId in the Angular controller? Is the $stateProvider retrieving the contractorId?

jamesmpw Over a year ago

Nope they'll go in your 'state' definition in your app.js file. There is an example in the code above. In your new url will be the actual contractor id value. Also don't forget to inject $routeParams into your controller.

Rani Radcliff Over a year ago

I tried adding the suggested code to my app.js file, now I get the error "$stateProvider is undefined". See edits to my question above.

jamesmpw Over a year ago

Somewhere it's not being injected. Don't use the ? query string syntax, use the route1/route2/:param syntax. Then in your controller you should be able to access $stateParams.param. I'm a little confused with your code. Check out the documentation link I sent you. Get a better understanding of the UI Router.

Rani Radcliff Over a year ago

so I use route1/route2/:param in my MVC Controller? I did look at the documentation that you sent me but it does not mention the MVC Controller at all so I'm confused as to how to tie it all together.

|

Collectives™ on Stack Overflow

How to pass parameter from MVC Controller to Angular

2 Answers 2

1 Comment

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related