如何从 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

这是我用来修改这样的列表然后提交回服务器的常用方法。

请注意，我实际上并没有在此 sn-p 中调用您的 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 中并从那里读取并忽略在客户端修改它的代码。