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

Posted 2023-05-09

【中文标题】如何将角度数组数据发送到控制器？

【英文标题】：how to send angular array data to controller?

【发布时间】：2017-06-01 07:36:29

【问题描述】：

我使用 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" 时，通常不起作用

【问题讨论】：

不要在控制器中进行所有的 jquery DOM 操作！

我觉得你是真的路过Angular强度...

另外，在向服务器发送复杂（数组）数据时不要使用href。请改用$http 调用

如何使用$http？

请参阅：docs.angularjs.org/api/ng/service/$http。此外，将所有参数整理为单个对象并通过 Http Get 传递。将其作为其等效的 C# 类类型作为 Controller Action 中的参数获取。

【参考方案1】：

对于应用条件，使用 ng-href 而不是 href。

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

ng-控制器：

 $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]);

【参考方案2】：

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

【讨论】：

感谢提问。我可以发送数据和条件是好的。但我无法将角度数组发送到 ASP.Net MVC 控制器。

【参考方案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.
);

【讨论】：

我会测试这个方法。谢谢

但也许您应该使用数据属性并使用 asp 的特定组件从您的 API 访问它。在这种情况下，我认为您必须修改您的 API 定义（签名），但我不知道 asp 是如何工作的。通常数据属性只是键/值对，您可以从收到的带有属性索引的请求中访问它。这意味着你发送，抛出 http 调用，比如：参数：age:12, name:'sphinx', techno:['angular', 'symfony', 'maou'] 你应该在你的 API 中能够做一些事情像 ... this->request->getParam('name');

【参考方案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);
    
  ;
]);