how to send angular array data to controller?

Question

i use asp.net mvc 5 and recently use angularjs. i have a array in angular $scope.selectedRooms = []; and push items into array. i want send this array's data to controller after checking the conditions.

Problems:

1. the conditions checked but not avoid sending data
2. i can't send $scope.selectedRooms datas

Codes:

 <a ng-click="CheckCheckedRoom()" href="/Home/BookingCart" class="mbtn_green btn_cart"> ...</a> 

Angularjs:

 $scope.CheckCheckedRoom = function () { if ($scope.selectedRooms.length > 0) { if (!$('#from').val()) { $("#ErText").html("Error"); modal.style.display = "block"; } else { $('.btn_cart').attr('href', '/Home/BookingCart?cityid=' + $('#CityId').val() + '&hotelId=' + $('#HotelId').val() + '&rtid=' + $("#RTId").val().substring(7) + '&checkin=' + $("#from").attr('data-gdate') + '&from=' + $("#from").val() + '&nightnum=' + $("#NightNum").val().substring(7) + '&cityName=' + $("#CityName").val()+ '&roomsid=' + $scope.selectedRooms); } } else modal.style.display = "block"; } 

C# Codes:

 public ActionResult BookingCart(string cityid, string hotelid, string rtid, string checkin, string from, string nightnum, string cityName,string[] roomsid) { } 

i recive array data this form:[object object] [object object] when i clear href="/Home/BookingCart" from link, generally does not work

Answer 1

for apply conditions use ng-href instead of href.

<a ng-click="CheckCheckedRoom()" ng-href="{{usercartURL}}" class="mbtn_green btn_cart"> ...</a> 

ng-controller:

 $scope.usercartURL = ""; $scope.CheckCheckedRoom = function () { if ($scope.selectedRooms.length > 0) { if (!$('#from').val()) { $("#ErText").html("Error"); modal.style.display = "block"; } else { var ids = ""; $scope.selectedRooms.forEach(function (hr) { ids += hr.Id + ","; }) $scope.usercartURL='/Home/BookingCart?cityid=' + $('#CityId').val() + '&hotelId=' + $('#HotelId').val() + '&rtid=' + $("#RTId").val().substring(7) + '&checkin=' + $("#from").attr('data-gdate') + '&from=' + $("#from").val() + '&nightnum=' + $("#NightNum").val().substring(7) + '&cityName=' + $("#CityName").val() + '&ids=' + ids ; } } else modal.style.display = "block"; } 

in asp.net controller:

 ids.TrimEnd(id[ids.Length - 1]); ids= ids.TrimEnd(ids[ids.Length - 1]); 

Answer 2

in controller create a function that uses $http

this.checkRooms = function() { if($scope.selectedRooms.length < 0){ alert('Please select a room'); }else{ $http.post('/Home/BookingCart?cityid=' + $scope.cityId + '&hotelId=' + $scope.hotelId, $scope.selectedRooms).then(function(success){ console.log('success sending data'); //here you can redirect the user to the shopping cart $state.go('userCart'); // this is the state name }).catch(function(error){ console.warn('error while trying to send data', error); }) } } 

Answer 3

There are two properties of $http to send data to your API.

data – {string|Object} – Data to be sent as the request message data.

params – {Object.} – Map of strings or objects which will be serialized with the paramSerializer and appended as GET parameters.

I am not asp.net developer, I use Php with symphony 2/3. So I can't validate your API but I am pretty sure it exists a better way to build API with asp.net. Also, it may be better to send data as request message data than as get parameters but it depends of the way you built your API.

I think you should just use a classic http call, post method and use params propertie to send your data (wrap them in a literal object) and remove get parameters from your url, angular will build the complete url for you.

$http({ method: 'POST', url: '/someUrl', params: //your literal object which represents parameters }).then(function successCallback(response) { // this callback will be called asynchronously // when the response is available }, function errorCallback(response) { // called asynchronously if an error occurs // or server returns response with an error status. }); 

Answer 4

Then to push IDs in your array you should add a ng-click on all your checkboxes, and when triggered call a function addOrRemoveRoom(this.roomId). If checked add the id if it is not already in the array. If unchecked remove if it's present in the array. So your array is already built when you send yours data and you avoid use of jQuery.

Sample with fruits.

 // Toggle selection for a given fruit by name $scope.toggleSelection = function toggleSelection(fruitName) { var idx = $scope.selection.indexOf(fruitName); // Is currently selected if (idx > -1) { $scope.selection.splice(idx, 1); } // Is newly selected else { $scope.selection.push(fruitName); } }; }]);