Как поймать модель, отправленную с частичным представлением от вызова ajax?

Question

У меня есть частичное представление, которое возвращает мое частичное представление, необходимое, но мне нужно перехватить модель, потому что json.encode получает основную модель, отправленную с основным видом, потому что в форме не было сделано отправки.

Мне нужно, чтобы модель была отправлена ​​с частичным видом, чтобы я мог использовать его вместо json.encode

   public ActionResult addField(List<Destination> model)
    {
        model.Add(new Destination
        {
            path = String.Empty,
        });

        return PartialView("_ChampDestination",model);
    }

, а вот вызов ajax

  function addField(event) {

        event.preventDefault();
        var model = @Html.Raw(Json.Encode(Model.RepertoireDestinationMultiple));
        $.ajax({
            type: 'POST',
            contentType: 'application/json',
            url: '@Url.Action("addField", "Flux")',

            data: JSON.stringify(model),
            success: function (response) {
                debugger;
                var x = response.model;
                $(".destinationMultiple").html(response);
            }
            , error: function(xhr, textStatus, error){
                console.log(xhr.statusText);
                console.log(textStatus);
                console.log(error);}
        });

    }

Новое, которое я добавляю с действиемне зарегистрировано в основной модели.

Answer 1

Вот распространенный метод, который я использую, чтобы изменить подобный список, а затем отправить обратно на сервер.

Обратите внимание, что я на самом деле не вызываю вашу функцию ajax в этом фрагменте, поскольку вы указали, что она работает нормально,Этот ответ показывает, как кто-то может манипулировать содержимым поля для последующей отправки.

//changed your function to simply submit data
function submitData(event) {

  event.preventDefault();
  $.ajax({
    type: 'POST',
    contentType: 'application/json',
    url: '@Url.Action("addField", "Flux")',

    data: $("input#destinations").val(),
    success: function(response) {
      debugger;
      var x = response.model;
      $(".destinationMultiple").html(response);
    },
    error: function(xhr, textStatus, error) {
      console.log(xhr.statusText);
      console.log(textStatus);
      console.log(error);
    }
  });

}

function addDestination(dest) {
  var data = $.parseJSON($("input#destinations").val() || "[]");
  var obj = {
    path: dest
  }
  data.push(obj);
  $("input#destinations").val(JSON.stringify(data));
  $("#output").text($("input#destinations").val());
}

$("#add").click(function(e) {
  addDestination($("#addIt").val());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input id='destinations' type='hidden' value='' /> <!-- original list in JSON goes in the value here -->
<input id='addIt' type='text' value='YOW' />
<button id='add'>ADD</button>
<div id='output'></div>

Если, как указано в вашем комментарии к этому ответу, это необходимо изменить на стороне сервера input#destinations необходимо заполнить на стороне сервера, а не простовключите этот ввод в partial-view и прочитайте его оттуда и проигнорируйте код, который изменяет его на стороне клиента.