如何从ajax调用中捕获随局部视图发送的模型?

时间:2019-02-11 20:36:49

标签: jquery asp.net ajax model-view-controller

我有一个局部视图,该局部视图返回需要的局部视图,但是我需要捕获模型,因为json.encode会获取随主视图一起发送的主要模型,因为未对表单进行任何提交。

我需要对通过partialview发送的模型进行建模,以便我可以使用它代替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);}
        });

    }

我随动作添加的新内容未在主模型中注册。

1 个答案:

答案 0 :(得分:0)

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

请注意,我实际上并未在此代码段中调用您的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中包含该输入并阅读,则需要在服务器端填写从那里开始,而忽略修改它的客户端代码。