jquery - 带有选择多个发布到 WebAPI 的表单

Question

我正在使用 C# Web API 来接收具有选择多个表单的帖子。

我在 Web API 方法中的模型类似于：

{Model: { UserName: "Test", Groups: [ {Id:123}, {Id: 2}]}}

换句话说，我的模型是一个包含一些字段的类，也是一个复杂类型的数组。

如果发布的表单数据是：WebAPI 可以正常工作：

UserName:Test
Groups[0][Id]:123
Groups[1][Id]:2

但是，如果我用我序列化表单，$(this).serialize()我会得到类似的东西：

UserName:Test
Groups[][Id]:123
Groups[][Id]:2

哪个 WebAPI 不能正确处理。

这将选择定义为：

<select name="Groups[][Id]" >...</select>

我尝试了其他方法来定义选择，但我无法完成。

我能够通过基于表单元素构建一个对象并将对象传递给 ajax 而不是 ajax 来解决它$(this).serialize，但它是一个丑陋的黑客。

WebAPI 是否以某种方式支持接收从表单发布的模型中的数组属性？

谢谢。

Answer 1

我有同样的问题，并通过使用https://www.nuget.org/packages/ImranB.ModelBindingFix解决

更多信息：http ://weblogs.asp.net/imranbaloch/archive/2012/12/08/fixing-model-the-binding-issue-of-asp-net-mvc-and-asp-net-web-api .aspx

Answer 2

提交多选表单字段到Web API，你可以只使用表单生成的数组值提交到Web API，在你接受的控制器模型中，你可以指定C#属性类型为字符串[]。

例子：

HTML：

<form>
  <input id="regularTextInput" name="regularTextInput">
  <select multiple id="multiSelectField" name="multiSelectField">
		<option>Option 1</option>
		<option>Option 2</option>
		<option>Option 3</option>
	</select>
</form>

JS：

$.ajax({
  url: "http://localhost:####/api/MyController/DoSomething",
  method: "POST",
  data: {
    singleVal: $('#regularTextInput').val(),
    selectedVals: $('#multiSelectField').val()
  },
  success: function(data, textStatus, jqXHR) {
    console.log(data);
  },
  error: function(jqXHR, textStatus, error) {
    console.log(error);
  }
});

C＃：

public class MyModel
{
    [JsonProperty(PropertyName = "singleVal")]
    public string MyVal { get; set; }
    [JsonProperty(PropertyName = "selectedVals")]
    public string[] MyVals { get; set; }
}

public class MyController
{
    public JsonResult DoSomething([FromBody] MyModel model)
    {
        // You will have access to the form values here, including the strings selected from your multi-select field
    }
}