通过 Ajax 将强类型视图模型作为参数传递给控制器答案

【问题标题】：Passing Strongly Typed View Model to Controller as Paramter via Ajax通过 Ajax 将强类型视图模型作为参数传递给控制器
【发布时间】：2018-05-04 07:32:37
【问题描述】：

我在这里查看了大约 20 个答案来重新评分，但似乎没有一个对我有用。它们看起来也很老套。

我有一个巨大的 View 模型，我试图通过 Ajax 在两个 PartialViewResults 之间来回传递。但是，似乎没有任何效果。

这是我的代码的“通用”版本：

控制器

public PartialViewResult _View1(Model model)
{
  return PatialView(model);
}

*I have another one of these for Partial view2*

查看

<div id="div1">Load View 1 here</div>

<script>
var m = @Html.Raw(Json.Encode(Model));
    console.log(m);
    $.ajax({
        url: '@Url.Action("_View1")',
        data: {'model' : m},
        dataType: "html",
        success: function (result) {
            $("#View1").html(result);
        },
        error: function (e) {
            $("#View1").html("<div class='alert alert-danger' role='alert'>Error: Getting View.</div>");
        }
    });
</script>

我在我的 ajax 调用上尝试了各种配置。任何帮助都会很棒，谢谢。 我不想将视图模型的每个变量存储到 vars 中并将它们单独传递给控制器。视图模型太大了。

*注意：当我执行 console.log(m) 时，浏览器的控制台会显示我所有的视图数据。我只是不确定如何将所有这些数据传递给控制器

注意2：如果stackoverflow上已经有解决方案，请随时链接到它。由于某种原因，我无法找到它。*

【问题讨论】：

var m = @Html.Raw(Json.Encode(Model)); 将是原始模型，而不是您编辑的任何内容，因此使用它毫无意义。无论如何它必须是data: m,
@StephenMuecke 有没有办法回发绑定到模型的新输入数据？感谢您让我知道var m = @Html.Raw(Json.Encode(Model)); 是原始模型。
var m = $(yourForm).serialize();（和data: m,）。但是您的控制器方法只是表明您再次返回相同的模型（这会很疯狂）所以不清楚您真正在做什么
我很难听懂你的问题。
@StephenMuecke 你是说我应该把模型序列化成表格？谢谢。

标签： c# json ajax razor asp.net-mvc-5

【解决方案1】：

由于参数的数据类型是一个对象，你应该将它以 JSON 格式传递给你的控制器。你的 ajax 选项应该是这样的

$.ajax({
    url: '@Url.Action("_View1")',
    contentType: "application/json", //tell ajax the data you send is JSON format
    data: JSON.stringify(m),
    success: function (result) {
        $("#View1").html(result);
    },
    error: function (e) {
        $("#View1").html("<div class='alert alert-danger' role='alert'>Error: Getting View.</div>");
    }
});

希望对你有帮助

【讨论】：

我试过这个。它给了我一个 404。没有找到。有什么建议吗？
表示服务器的目的地不存在，请检查您的网址。你可以试试@Url.Action("ActionName","ControllerName")。
贾斯汀，我知道 404 表示未找到，我认为是因为数据被传回控制器。我需要修改我的控制器吗？我用@Url.Action 尝试了两种方法。仍然在控制台中给我一个 404。
我解决此 404 问题的方法是确保 URL 正确或已编译。否则，您可以尝试“/ControllerName/ActionName”而不是从 HTML Helper 呈现。
我注意到我有 data: 错误.. 所以我把它改成了你建议的。那没用，我也试过data: JSON.stringify(@Model)。这表示对象模型（如我模型的对象类型）未定义。

【解决方案2】：

var m = $('#Form').serialize();   
 $.post( "@Url.Action("_View1")", m)
            .done(function( data ) {
                console.log('done default');
                $("#View1").html(data);
            })
            .always(function() {
                console.log('Done')
                    });

我遇到的问题是我的视图模型通过隐藏输入有两个方法绑定。这导致了序列化问题。但是序列化表单并将其作为模型对象传递回控制器是可行的。

【讨论】：