2012-12-13 76 views
22

我想弄清楚如何从窗体发送一些信息到Web API操作。这是jQuery的/ AJAX我试图使用方法:发送JSON对象到Web API

var source = { 
     'ID': 0, 
     'ProductID': $('#ID').val(), 
     'PartNumber': $('#part-number').val(), 
     'VendorID': $('#Vendors').val() 
    } 

    $.ajax({ 
     type: "POST", 
     dataType: "json", 
     url: "/api/PartSourceAPI/", 
     data: JSON.stringify({ model: source }), 
     success: function (data) { 
      alert('success'); 
     }, 
     error: function (error) { 
      jsonValue = jQuery.parseJSON(error.responseText); 
      jError('An error has occurred while saving the new part source: ' + jsonValue, { TimeShown: 3000 }); 
     } 
    }); 

这里是我的模型

public class PartSourceModel 
{ 
    public int ID { get; set; } 
    public int ProductID { get; set; } 
    public int VendorID { get; set; } 
    public string PartNumber { get; set; } 
} 

这是我的看法

<div id="part-sources"> 
    @foreach (SmallHorse.ProductSource source in Model.Sources) 
    { 
     @source.ItemNumber <br /> 
    } 
</div> 
<label>Part Number</label> 
<input type="text" id="part-number" name="part-number" /> 

<input type="submit" id="save-source" name="save-source" value="Add" /> 

这里是我的控制器操作

// POST api/partsourceapi 
public void Post(PartSourceModel model) 
{ 
    // currently no values are being passed into model param 
} 

我错过了什么?现在当我调试并且在ajax请求触发控制器动作时执行此操作时,没有任何内容被传递到模型参数中。

+0

你没有'JSON.stringify'尝试? 'data:{model:source}',或者可能只是'data:source' - jQuery为你处理转换... – nnnnnn

+0

是的,我没有使用JSON.stringify来尝试它,但那也不起作用。我已经尝试了所有可能的AJAX方面的组合,但我认为我在控制器上缺少了一些东西......但我不知道,这纯粹是一种猜测。 – Cory

+0

当你说“没有”被传入模型参数时,你的意思是实例“model”是否为null?或者它的值是否为默认值/空值?如果将模型类型更改为字符串以获取原始表示,甚至删除输入参数并直接探测Request.Content和Request.Headers属性以找出服务器正在接收的内容,会发生什么情况? – Snixtor

回答

27

试试这个:

jQuery的

$('#save-source').click(function (e) { 
     e.preventDefault(); 
     var source = { 
      'ID': 0, 
      //'ProductID': $('#ID').val(), 
      'PartNumber': $('#part-number').val(), 
      //'VendorID': $('#Vendors').val() 
     } 
     $.ajax({ 
      type: "POST", 
      dataType: "json", 
      url: "/api/PartSourceAPI", 
      data: source, 
      success: function (data) { 
       alert(data); 
      }, 
      error: function (error) { 
       jsonValue = jQuery.parseJSON(error.responseText); 
       //jError('An error has occurred while saving the new part source: ' + jsonValue, { TimeShown: 3000 }); 
      } 
     }); 
    }); 

控制器

public string Post(PartSourceModel model) 
    { 
     return model.PartNumber; 
    } 

查看

<label>Part Number</label> 
<input type="text" id="part-number" name="part-number" /> 

<input type="submit" id="save-source" name="save-source" value="Add" /> 

现在,当你点击“Add”你填写文本框后,controller会吐回了你的PartNumber框中警报写道。

+1

谢谢!通过改变'data:source'来修正它,所以它将正确绑定到控制器中的'model'参数。我想我必须在我的ajax中包含名称'model:'才能使其工作。非常感谢! – Cory

+0

在复杂数据格式(默认情况下不能反序列化)的情况下,您需要在服务器端接收json字符串。你的答案可能适用于简单的数据,但不适用于复杂的数据(这就是搜索哈哈)。虽然你的答案对这个家伙的问题很有帮助! – Zwik

+0

我发现我必须在我的ajax调用中包含'contentType:'application/json''。为什么这个答案不需要它? –

-4

我相信你需要周围的model报价:

JSON.stringify({ "model": source }) 
+2

在对象文字中,如果属性名称是数字文字或有效的标识名称,则不需要引用属性名称。所以'{model:source}'很好。 – nnnnnn

+0

您是否使用过浏览器的调试器工具来检查发送到请求正文中的操作方法的内容? –

+0

Queti,是的,我使用的是提琴手,它表示没有内容与请求一起发送 – Cory

6

变化:

data: JSON.stringify({ model: source }) 

要:

data: {model: JSON.stringify(source)} 

而在你的控制器,你这样做:

public void PartSourceAPI(string model) 
{ 
     System.Web.Script.Serialization.JavaScriptSerializer js = new System.Web.Script.Serialization.JavaScriptSerializer(); 

    var result = js.Deserialize<PartSourceModel>(model); 
} 

如果您在jQuery中使用的URL是/api/PartSourceAPI则控制器名称必须是api和动作(方法)应该是PartSourceAPI

+0

我试过了,不幸的是它没有任何区别。 – Cory

+0

看到我修改的答案。 – Jeroen

3
var model = JSON.stringify({ 
    'ID': 0, 
    'ProductID': $('#ID').val(), 
    'PartNumber': $('#part-number').val(), 
    'VendorID': $('#Vendors').val() 
}) 

$.ajax({ 
    type: "POST", 
    dataType: "json", 
    contentType: "application/json", 
    url: "/api/PartSourceAPI/", 
    data: model, 
    success: function (data) { 
     alert('success'); 
    }, 
    error: function (error) { 
     jsonValue = jQuery.parseJSON(error.responseText); 
     jError('An error has occurred while saving the new part source: ' + jsonValue, { TimeShown: 3000 }); 
    } 
}); 

var model = JSON.stringify({  'ID': 0,  ...': 5,  'PartNumber': 6,  'VendorID': 7 }) // output is "{"ID":0,"ProductID":5,"PartNumber":6,"VendorID":7}" 

数据是这样的 “{” 模型 “: ”ID“:0,” 产品ID “:6中,” 部分号码 “:7,” 厂商ID “:8}}” 网页API控制器不能绑定到你的模型