form.serialize 不适用于字符串列表

Question

我正在尝试使用 AJAX 将值从客户端传递到服务器端。我想将整个模型作为参数传递，所以我将它序列化并作为参数传递。但是它似乎不起作用，并且在服务器上找不到任何值。

字符串列表基本上是一个select2下拉选择值。

这是简化的代码版本：

型号：

public class FruitsViewModel
{
    public List<SelectListContainer> FruitList { get; set; }
    public List<SelectListContainer> VegetableList { get; set; }
    public List<string> SearchFruit { get; set; }
    public List<string> SearchVegetable { get; set; }
} 

查看：

<form id="formFruits">

    @Html.ListBoxFor(m => m.SearchFruit , new SelectList(Model.FruitList , "Value", "Display", Model.SearchFruit ), new { @class = "form-control", id = "SearchFruit ", name = "SearchFruit ", multiple = "true" })

    @Html.ListBoxFor(m => m.SearchVegetable , new SelectList(Model.VegetableList , "Value", "Display", Model.SearchVegetable ), new { @class = "form-control", id = "SearchVegetable ", name = "SearchVegetable ", multiple = "true" })

    <button id ='btnSubmit' type='button'>Submit</button>

</form>

脚本：

$(document).on("click", "#btnSubmit", function (e) {
e.preventDefault();
var page = 4;
var url = "/FruitDetails/Index";
$.ajax({
    url: url,
    type: 'POST',
    contentType: 'application/json',
    dataType: "json",
    cache: false,
    data: { model: $('#formFruits').serialize(),page:page},
    success: function (result) {
        $("#divResults").html(result);
    },
    error: function (result) {
        console.log("Failure!!");
    }
});
});

控制器：

[HttpPost]
public ActionResult Index(FruitsViewModel model,int page)
{
}

代码有问题吗？还是 Select2 下拉列表的已知问题？

编辑：我也尝试直接分配它们并将它们作为 JSON 字符串发送，但这也不起作用。

$(document).on("click", "#btnSubmit", function (e) {
e.preventDefault();
var page = 4;
var url = "/FruitDetails/Index";

var SearchFruit = $("#SearchFruit ").val(); 
var SearchVegetable = $("#SearchVegetable").val();

var model = JSON.stringify({
    SearchFruit : SearchFruit,
    SearchVegetable : SearchVegetable
});

$.ajax({
    url: url,
    type: 'POST',
    cache: false,
    contentType: 'application/json',
    dataType: "json",
    data: { model:model, page:page },
    success: function (result) {
        $("#divResults").html(result);
    },
    error: function (result) {
        console.log("Failure!!");
    }
});

});

这似乎也不起作用。

Answer 1

{} 不是必须的，删除它们，只留下data: $ ('#fromFruits').Serialize() 和表格，这样做：

使用“提交”，一般用于验证表单

$( "#formFruits" ).on( "submit", function( event ) {
  event.preventDefault();
  
  data = $( this ).serialize()
  url = $(this).attr("action")
  
  $.ajax({
    url: url,
    type: 'POST',
    cache: false,
    data: data,
    success: function (result) {
        $("#Result").html(result);
    },
    error: function (result) {
    $("#Result").html("Failure");
    }
});
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="formFruits" action="/action_page.php">

  First input:<br>
  <input type="text" name="input1" required><br>
  
  <button type='submit'>Submit</button>
</form>

<a> Result: </a>
<a id="Result"> </a>