AngularJS Post 数据到 WebAPI 使用 $resource
AngularJS Post data to WebAPI using $resource
好的,我相信我已经接近完成这项工作,但似乎无法识别我的 WebAPI 控制器,除非我在 URI 中传递参数。
我有...
Angular 像这样使用 $resource...
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。
感谢任何帮助!!
好的,我已经成功地使用 POST 在 AngularJS 中发送数据...我是这样做的...
获取我传递的参数并将它们放入 javascript 对象中...
var objData = {
Var1: Var1Value,
Var2: Var2Value,
Var3: Var3Value,
Var4: Var4Value
}
在 "save" 请求中传递该对象...
var savePromise = myService.common.SavePostData.save({}, objData).$promise;
我在构建调用和执行的服务中拥有我的资源...
(函数(angular,未定义){
'use strict';
angular.module('mynamespace.myservice', [
// Angular
'ngResource'
])
.factory('myservice', ['$resource', function ($resource) {
return {
common: {
SavePostData: $resource(myURL, {})
}
};
}]);
}(angular));
好的!!现在是最重要的部分!!!
在 WebApi 方面,您 必须 为 POST 创建数据模型以映射到...
~注意变量的"case"必须匹配!
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"
}
希望对您有所帮助!!
好的,我相信我已经接近完成这项工作,但似乎无法识别我的 WebAPI 控制器,除非我在 URI 中传递参数。
我有... Angular 像这样使用 $resource...
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。
感谢任何帮助!!
好的,我已经成功地使用 POST 在 AngularJS 中发送数据...我是这样做的...
获取我传递的参数并将它们放入 javascript 对象中...
var objData = {
Var1: Var1Value,
Var2: Var2Value,
Var3: Var3Value,
Var4: Var4Value
}
在 "save" 请求中传递该对象...
var savePromise = myService.common.SavePostData.save({}, objData).$promise;
我在构建调用和执行的服务中拥有我的资源... (函数(angular,未定义){ 'use strict';
angular.module('mynamespace.myservice', [
// Angular
'ngResource'
])
.factory('myservice', ['$resource', function ($resource) {
return {
common: {
SavePostData: $resource(myURL, {})
}
};
}]);
}(angular));
好的!!现在是最重要的部分!!! 在 WebApi 方面,您 必须 为 POST 创建数据模型以映射到... ~注意变量的"case"必须匹配!
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"
}
希望对您有所帮助!!