AngularJS - how to send int[] to an action? - asp.net-mvc

Question

Ok, I have a checkbox list showing roles data on my project.
To retrieve these roles, I'm doing this below:
$scope.Roles = [];
$scope.init = function() {
$.get('/Navigation/NavigationNewDependencies', {}, function(result) {
for (var I = 0; I < result.Roles.length; ++I) {
var splited = result.Roles[I].split(";");
$scope.Roles.push({ id: splited[0], name: splited[1], checked: false });
}
$scope.$apply();
});
}
And showing this way:
<div>
Roles:
<ul data-ng-repeat="role in Roles">
<li><input type="checkbox" data-ng-model="role.checked" />{{role.name}}</li>
</ul>
</div>
Ok, it works properly. I want to send to an action these checked roles on the form, you know? How can I do it?
I'm trying to do the POST this way below:
$scope.getSelectedRoles = function () {
var selectedRoles = [];
for (var I = 0; I < $scope.Roles.length; ++I) {
if ($scope.Roles[I].checked == true) {
var role = $scope.Roles[I];
selectedRoles.push({ RoleId: role.id, RoleName: role.name });
}
}
return selectedRoles;
}
$scope.submit = function () {
$.post('/Navigation/New', {
title: $scope.model.NavigationName,
description: $scope.model.NavigationDescription,
controller: $scope.model.NavigationController,
action: $scope.model.NavigationAction,
roles: $scope.getSelectedRoles()
}, function (result) {
if (result.IsValid) {
window.location.href = result.ReturnUrl;
} else {
alert(result.Message);
}
});
}
... But I can't get the right selected roles on the form.
First: How can I get the selected roles with some computed property or something else?
Second: the right parameters to receive this selected roles are params int[] roles?
Thank you all!

Answer 1

Something like this:
//Ends up being the array of ints for the action.
//You can put this in any event handler you want, like another function attached
//to a ngCLick directive
var selectedRoles = $scope.Roles.filter(function(role) { return role.checked}).
.map(function(role) { return role.id});
$.put('/Navigation/NavigationNewDependencies', {roles: selectedRoles})
.success(function(){//Do something cool on successfully sending to server});
This assumes a few things:
Your '/Navigation/NavigationNewDependencies' action can handle 'put's
The array of ints you are passing to the action is an array of the selected role ids

Answer 2

I'm assuming you want to do a standard, non-ajax form submit and hit an MVC controller action. If that's the case, update your checkbox markup to this:
<input type="checkbox" data-ng-model="role.checked" value="{{ role.id }}" name="roles" />
Then wrap it all in a form tag with its action attribute pointing to an action method with a single parameter named "roles" of type int[].
UPDATE:
#Kiwanax, this should do it:
Angular Controller:
function RolesCtrl($scope, $http) {
// use Angular's $http service to communicate with the server
// won't need to call $scope.$apply();
$http.get('/Navigation/NavigationNewDependencies').success(function (result) {
// try to send json object array from the server (instead of a string)
$scope.roles = result;
// but you don't have control over it,
// process your string result the way you are currently doing it
});
$scope.getSelectedRoleIds = function () {
var result = [];
angular.forEach($scope.roles, function (value, key) {
if (value.checked) result.push(value.id);
});
return result;
};
$scope.postData = function () {
$http.post(
'/Navigation/New',
{ roles: $scope.getSelectedRoleIds() }
).success(function () {
alert('done');
});
};
}
View (use the ng-submit attribute to offload form submission handling to Angular):
<div ng-app ng-controller="RolesCtrl">
<form ng-submit="postData()">
<ul data-ng-repeat="role in roles">
<li><input type="checkbox" ng-model="role.checked"/>{{role.name}}</li>
</ul>
<button>submit roles</button>
</form>
MVC Controller's (Navigation) Action:
[HttpPost]
public ActionResult New(int[] roles)
{
// process roles Ids
return View();
}