form.serialize не работает для списка строк - PullRequest
Новая
       10

form.serialize не работает для списка строк

0 голосов
/ 06 ноября 2018

Я пытаюсь передать значение со стороны клиента на сторону сервера, используя 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!!");
    }
});

});

Кажется, это тоже не работает.

1 Ответ

0 голосов
/ 06 ноября 2018

{} не нужны, удалите их, оставив только 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>
...