Question

我使用asp.net mvc 5并且最近使用angularjs。我有一个角度为$scope.selectedRooms = [];的数组，并将项目推送到数组中。我想在检查条件后将此数组的数据发送到控制器。

问题：

检查条件但不避免发送数据
我无法发送$scope.selectedRooms数据

代码：

  <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＃代码：

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

我以这种形式记录数组数据：[object object] [object object] 当我从链接中清除href="/Home/BookingCart"时，通常不起作用

Answer 1

在控制器中创建一个使用$ 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 2

申请条件使用ng-href而不是href。

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

纳克控制器：

 $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";
}

在asp.net控制器中：

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

Answer 3

$ http有两个属性可以将数据发送到您的API。

data - {string | Object} - 要作为请求消息数据发送的数据。

params - {Object。} - 将使用paramSerializer序列化并附加为GET参数的字符串或对象的映射。

我不是asp.net开发者，我使用Php与symphony 2/3。所以我无法验证你的API，但我很确定它是一种更好的方法来使用asp.net构建API。此外，将数据作为请求消息数据发送比获取参数更好，但这取决于您构建API的方式。

我认为你应该使用经典的http调用，post方法并使用params属性来发送你的数据（将它们包装在文字对象中）并从你的url中删除get参数，angular将为你构建完整的url。

$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

然后，要在数组中推送ID，您应该在所有复选框上添加ng-click，并在触发时调用函数addOrRemoveRoom（this.roomId）。如果选中，则添加id（如果它尚未在数组中）。如果未选中则删除它是否存在于数组中。因此，当您发送数据并且避免使用jQuery时，您的数组已经构建。

水果样品。

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

如何将角度数组数据发送到控制器？

4 个答案: