Gửi từ Angular tới .net WebAPI

Tôi đang sử dụng tài nguyên Angular $ để đăng mô hình lên điểm cuối webapi, nhưng Angular gửi dữ liệu trong tải trọng yêu cầu, chứ không phải là tham số biểu mẫu hoặc cơ thể JSON. Kết quả là, mô hình luôn luôn kết thúc bằng null.Gửi từ Angular tới .net WebAPI

API của tôi là như sau:

public class UserController : APIController { 
    [HttpPost] 
    public void Disconnect(Models.Users.User model) { 
    } 
}

Các tiêu đề yêu cầu là:

POST /siteapi/User/Disconnect HTTP/1.1 
Host: rouge2 
Connection: keep-alive 
Content-Length: 125 
Accept: application/json, text/plain, */* 
Origin: http://rouge2 
X-Requested-With: XMLHttpRequest 
User-Agent: Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.31 (KHTML, like Gecko) Chrome/26.0.1410.64 Safari/537.31 
Content-Type: application/json;charset=UTF-8 
Referer: http://rouge2/Users 
Accept-Encoding: gzip,deflate,sdch 
Accept-Language: en-US,en;q=0.8 
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3 
Cookie: .ASPXAUTH=115C6015BDD5C1A9D111B0A9FBF05294B73287328566F65CB1BCB457DF206EF0916D4615B5914EB443AA567E860742AC14EAA2951B9C327260C4F00649694260A1B3960771FB6675FEE8F3E68B0BB46436020ACAB33ECE0D3E70B50D6569E52B27F69161762C10C19A806A12D3254DF60EF4758DEDCA529A91CB36C74B7FA7F4; __RequestVerificationToken=Rp4Vu8R67ziDNc36DoOLZH7KmEfumig1zFDmYiFWHTsWyf2I037xJQydcmLtOfaJ3ccc8GEZXmHoa8LBRusxKFRYVoy27GuFEfNhKKYS_hUysjwCjmsxw5OCK3RKsiXIAh1Gbi0PxcdqBfzctSJn9g2

Và yêu cầu tải trọng:

{"Id":3,"FirstName":"Test","LastName":"User","Username":"testuser","IsApproved":true,"IsOnlineNow":true,"IsChecked":true}

Nếu tôi thử nghiệm trong Fiddler, đăng cùng Chuỗi JSON trong nội dung, mô hình được điền chính xác, như mong đợi.

Có trình kết nối mô hình tích hợp nào sẽ hoạt động trong trường hợp này hay thứ gì đó được xây dựng sẵn ở đâu đó mà tôi có thể sử dụng không?

Hoặc ai đó có thể vui lòng chỉ cho tôi theo hướng làm ví dụ?

Nguồn

2013-05-18 mattdwen

Một mẫu để bắt đầu: http://www.codeproject.com/Articles/737030/A -basic-SPA-application-using-AngularJS-WebAPI-và – Braulio

Bạn có thể sử dụng $http module.

Dưới đây là một ví dụ:

<!DOCTYPE html> 

<html ng-app> 
<head> 
    <meta name="viewport" content="width=device-width" /> 
    <title>Index</title> 
</head> 
<body> 
    <div ng-controller="TestController"> 
     <ul ng-model="person"> 
      <li>FirstName: {{person.FirstName}}</li> 
      <li>LastName: {{person.LastName}}</li> 
      <li>UserName: {{person.Username}}</li> 
      <li>IsApproved: {{person.IsApproved}}</li> 
      <li>IsOnlineNow: {{person.IsOnlineNow}}</li> 
      <li>IsChecked: {{person.IsChecked}}</li> 
     </ul> 
    </div> 

    <script type="text/javascript" src="~/scripts/angular.min.js"></script> 
    <script type="text/javascript"> 
     function TestController($scope, $http) { 
      var data = { "Id": 3, "FirstName": "Test", "LastName": "User", "Username": "testuser", "IsApproved": true, "IsOnlineNow": true, "IsChecked": true }; 
      $http.post(
       '/api/values', 
       JSON.stringify(data), 
       { 
        headers: { 
         'Content-Type': 'application/json' 
        } 
       } 
      ).success(function (data) { 
       $scope.person = data; 
      }); 
     } 
    </script> 
</body> 
</html>

Giả sử các điều khiển sau:

public class ValuesController : ApiController 
{ 
    [HttpPost] 
    public User Post(User model) 
    { 
     return model; 
    } 
}

Nguồn

2013-05-18 10:07:07

Dường như WebAPI cũng hy vọng dữ liệu được đăng tải sẽ được bao bọc như một đối tượng 'Người dùng', vd {Dữ liệu người dùng}}. – mattdwen

@mattdwen Tôi không nghĩ rằng nó sẽ xảy ra nếu bạn sử dụng '[FromBody] 'mặc dù tôi thề rằng tôi không làm điều đó và nó vẫn hoạt động tốt mà không có điều đó. – kamranicus

Nếu bạn muốn hoặc * cần thiết * để sử dụng tài nguyên $? Điều gì sẽ là cách sạch nhất để "sửa" POST? Sử dụng thuộc tính lọc toàn cầu? – kamranicus

Đối với tôi điều này chỉ làm việc tốt. Dưới đây là mã server-side

[HttpPost] 
    public void Disconnect([FromBody] Models.Users.User model) { ... }

và mã khách hàng yêu cầu sẽ được,

var dataToPost ={ id : 3, firstName : 'Test', lastName : 'User', username : 'testuser', isApproved : true, isOnlineNow : true, isChecked: true }; 

      var config = { 
       headers : { 
        'Content-Type': 'application/json;charset=utf-8;' 
       } 
      } 
      $http.post(thisIsUrl, dataToPost, config).then(......

Nguồn

2017-10-01 03:20:44

Gửi từ Angular tới .net WebAPI

Trả lời

Các vấn đề liên quan