MVC - 使用 Jquery 在部分视图之间传递 ViewModel

Question

我在部分视图和控制器之间传递 ViewModel 时遇到问题。

我基本上想要的是有一个 ViewModel，它使用 Jquery 通过不同的视图传递并动态更新。

我有一个使用Fuel UX Wizard 的模式对话框。 模式的代码在一个名为“Container”的文件中，部分视图正在加载到容器中。

当模态被点击时，changed.fu.wizard 函数被调用。

$('#uiWizard').on('changed.fu.wizard', function () {
        switch ($('#uiWizard').wizard('selectedItem').step) {
            case 1:
                console.log("step 1");

                $.ajax({
                    url: '@Url.Action("Step1", "Alert")',
                    datatype: "json",
                    type: "POST",
                    contentType: 'application/json; charset=utf-8',
                    beforeSend: function () {
                        $('#container1').html(loadingData());
                    },
                    success: function (data) {
                        $('#container1').html(data);
                    },
                    error: function (data) {
                        $('#container1').html(errorMessage(data));
                    },
                    complete: function () {

                    }
                });
                break;
        }
    });

控制器方法看起来像这样简化：

[HttpPost]
public PartialViewResult Step1()
{
   TestView model = new TestView();
   return PartialView("Step1", model);
}

所以这基本上只是将 Step1 视图加载到容器视图中。

所以这是问题开始的时候。 假设我在Step.cshtml 上面使用@model Application.ViewModels.TestView 导入模型，并在Step1 页面上使用Html 助手，例如复选框和Textareas。

当再次调用向导上的“下一步”按钮时，更改的方法会再次被调用。 （在 Container.cshtml 文件中） 我想通过 Jquery 将第 1 步中的模型传递给采用 ViewModel 的控制器。

我希望控制器看起来像这样。从 View 中获取模型并传递它。

很容易将模型字符串化。这似乎在某些情况下有效，但我遇到的问题是模型没有更新。

$.ajax({
    url: '@Url.Action("Step2", "Alert")',
    datatype: "json",
    data: JSON.stringify('@Model'),
    type: "POST",
    contentType: 'application/json; charset=utf-8'
});

[HttpPost]
public PartialViewResult Step2(TestView model)
{
    return PartialView("Step2", model);
}

这有点混乱，但希望它是可以理解的；）

编辑：

部分视图： 我对部分视图的考虑是我只想从控制器中检索 ViewModel。一些局部视图可能会改变一些变量，而另一些可能只是传递它。

所以在所有部分视图中，我在顶部都有 @model Application.ViewModels.TestView。我在容器页面上没有这个。 （因为这里没有用到）

然后我可以 f.ex 有一个这样的 TextArea：

<section>
    <div class="textarea textarea-resizable">
        @Html.TextAreaFor(m => m.Text, new { @class = "form-control", rows = 15 })
    </div>
</section>

这里基本上没有更多代码，因为表单标签和其他所有内容都在容器视图中。

来自 container.cshtml

        <div class="step-content">
            <form class="form-inline" id="fuelux-wizard" method="post">
                <div class="step-pane text-center active" id="step1">
                    <div id="container1"></div>
                </div>
                <div class="step-pane" id="step2">
                    <div id="container2"></div>
                </div>
                <div class="step-pane" id="step3">
                    <div id="container3"></div>
                </div>
                <div class="step-pane" id="step4">
                    <div id="container4"></div>
                </div>
            </form>
        </div>

并且 div 正在加载前面在成功方法中发布的更改方法。

            success: function (data) {
                $('#container1').html(data);
            },

Answer 1

data: JSON.stringify('@Model') 只会发回你的类的完全限定名称，而不是模型的任何值（即使它确实有效，它也只会发布模型的原始值，因为剃刀代码是在服务器上解析的在发送给客户之前）。你需要序列化你的表单，所以ajax调用应该是

$.ajax({
    url: '@Url.Action("Step2", "Alert")',
    // datatype: "json",
    data: $('form').serialize(), // update this
    type: "POST",
    // contentType: 'application/json; charset=utf-8'
});

请注意，contentType: 'application/json; charset=utf-8' 需要删除，datatype 指定控制器方法返回的数据 - 您似乎没有访问这些数据，因此没有必要

请注意，您还可以使用手动构建表单数据

data: { Text: $('#Text').val(), AnotherProperty: $('#AnotherProperty').val(), etc },