AngularJS 使用 $resource 将数据发布到 WebAPI

Posted 2023-05-09

【中文标题】AngularJS 使用 $resource 将数据发布到 WebAPI

【英文标题】：AngularJS Post data to WebAPI using $resource

【发布时间】：2018-02-06 05:36:53

【问题描述】：

好的，我相信我已经接近完成这项工作，但似乎无法识别我的 WebAPI 控制器，除非我在 URI 中传递参数。

我有... 像这样使用 $resource 的 Angular...

 var savePromise = myService.common.SaveData.save(, ID: saveObj.ID, Year: saveObj.Year, typeID: saveObj.TypeID, ObjectList: JSON.stringify(saveCollection) ).$promise;

收集 URL 并通过调用 WebAPI 传递此数据的服务...

保存数据：$resource(myURL, )

WebAPI 控制器...

public class ObjectsSaveController : ApiController


    [System.Web.Http.HttpPost]
    public HttpResponseMessage POST([FromBody] int ID, int Year, 
    int typeID, string ObjectList) 


Request URL:myURL/api/ObjectsSave
Request Method:POST
Status Code:404 Not Found 
Remote Address:[::1]:8081
Referrer Policy:no-referrer-when-downgrade
Response Headers
view source
Access-Control-Allow-Origin:*
Cache-Control:no-cache
Content-Length:791
Content-Type:application/json; charset=utf-8
Date:Mon, 28 Aug 2017 21:11:09 GMT
Expires:-1
Persistent-Auth:true
Pragma:no-cache
Server:Microsoft-IIS/8.5
X-AspNet-Version:4.0.30319
X-Powered-By:ASP.NET
Request Headers
view source
Accept:application/json, text/plain, */*
Accept-Encoding:gzip, deflate, br
Accept-Language:en-US,en;q=0.8
Cache-Control:no-cache
Connection:keep-alive
Content-Length:210
Content-Type:application/json;charset=UTF-8
Host:localhost:8081
Origin:http://localhost:8081
Pragma:no-cache
Referer:http://localhost:8081/myURL/
User-Agent:Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 
(Khtml, like Gecko) Chrome/60.0.3112.101 Safari/537.36
 Request Payload
 view source
 ID: 211313, Year: 2017, typeID: 7,…
 cropYear
 :
 2017
 ID
 :
 211313
 ObjectList
 :
 "["ID":-1,"Name":"","geoJSONShape":"\"type\":\"Point\",\"coordinates\":
 [-99.35464723335105,41.54277522419835]"]"
 typeID
 :
 7
 Name

如果我不在查询字符串中传递值，则找不到 ApiController。

感谢任何帮助！

【参考方案1】：

好的，我已经成功地使用 POST 在 AngularJS 中发送数据...我是这样做的...

获取我传递的参数并将它们放入一个 javascript 对象中......

 var objData = 
                    Var1: Var1Value,
                    Var2: Var2Value,
                    Var3: Var3Value,
                    Var4: Var4Value 
                

在“保存”请求中传递该对象...

var savePromise = myService.common.SavePostData.save(, objData).$promise;

我的资源在构建调用并执行的服务中...... （函数（角度，未定义） '使用严格';

angular.module('mynamespace.myservice', [
    // Angular
    'ngResource'
])
.factory('myservice', ['$resource', function ($resource) 
        return 
            common: 
            SavePostData: $resource(myURL, )
            
        ;
    ]);

(角度));

好的！现在是最重要的部分！！！ 在 WebApi 方面，您必须为 POST 创建一个数据模型以映射到... ~注意变量的“大小写”必须匹配！

using System.Collections.ObjectModel;
namespace myNamespace 

public class DataModelThatMatchesRequest 
    public int Var1 
        get;
        set;
    

    public int Var2 
        get;
        set;
    
    public int Var3 
        get;
        set;
    

    public Var4  
        get;
        set;
    

现在创建一个使用您的数据模型的 ApiController... ~注意你必须有装饰器“[HttpPost]”和动作装饰器“[FromBody]”

    public class SaveObjectController : ApiController 

    [HttpPost]        
    public Objects POST([FromBody] DataModelThatMatchesRequest saveRequest) 
    

    Do some stuff with "saveRequest"

    

希望对你有帮助！！