javascript - MVC - 使用 Jquery 在部分 View 之间传递 ViewModel

Question

我在部分 View 和 Controller 之间传递 ViewModel 时遇到问题。

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

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

当模式被点击时，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;
        }
    });

Controller 方法看起来像这样简化:

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

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

这就是问题开始的时候。假设我在 Step.cshtml 中使用 @model Application.ViewModels.TestView 在顶部导入模型，并在 Step1 页面上使用 Html 助手，例如复选框和文本区域。

当在向导中再次调用“下一步”按钮时，将再次调用更改的方法。 (在 Container.cshtml 文件中)我想使用 Jquery 将步骤 1 中的模型传递给采用 ViewModel 的 Controller 。

我希望 Controller 看起来像这样。从 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);
}

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

编辑:

部分观点:我对部分 View 的想法是我只想从 Controller 中检索 ViewModel。一些分部 View 可能会更改一些变量，而其他部分 View 可能只是传递它。

因此，在所有局部 View 上，我都在顶部添加了@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>

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

来自 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') 只会回传你的类的完全限定名称，而不是模型的任何值(即使它确实有效，它也只会发布模型的原始值，因为 Razor 代码在发送到客户端之前在服务器上进行了解析)。你需要序列化你的表单，所以 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 指定 Controller 方法返回的数据 - 您似乎没有访问它，所以没有必要

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

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