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

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

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

我有一个模态对话框，它使用。 模态的代码在一个名为“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);
}

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

这基本上就是将Step1视图加载到容器视图中

因此，问题开始出现在这里。 假设我使用

@model Application.ViewModels.TestView导入顶部的模型，并在Step1页面上使用Html帮助程序，如复选框和文本区域

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

我希望控制器看起来像这样。从视图中获取模型并将其传递

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

$.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。我在容器页面上没有这个。（因为这里没有使用being）

那么我可以在f.ex上有这样一个文本区：

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

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

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
指定控制器方法返回的数据-您似乎没有访问这些数据，因此不需要访问

请注意，您也可以使用手动生成表单数据

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

data:JSON.stringify（'@Model'），
永远不会传回您的模型。它需要是
数据：$（'form'）。serialize（），
这也是数据类型json吗？它似乎不明白。获取无效的JSON基元：文本。文本是第一个变量。
数据类型：“json”
是您在成功回调中接收到的内容，如果您没有，则可以删除它。您还需要删除
contentType:'application/json；charset=utf-8'，
使用
serialize（）函数时。但是你需要显示部分视图，以确保我的评论现在在帖子中得到更正。请参见编辑：
data:$（“#fuelux向导”）.serialize（），
应该可以工作（添加
console.log（$（“#fuelux向导”）.serialize（）；
在
ajax之前（…
检查是否正确序列化了表单控件）这太棒了！非常感谢您的帮助。注意到一件非常有趣的事情。如果我在步骤2中（在控制器中）创建了一个新的ViewModel，并且该方法也可以接收相同的ViewModel。如果我在返回语句（在控制器中）中传递ViewModel它创建的模型未设置。这是我希望它的行为，但我发现模型看起来像控制器中的being set，但实际上未在视图中设置。明天可以显示一个示例。但想知道这是否是inted行为。如果我正确理解您的注释，那是因为
ModelState
的值已经设置好了（作为绑定过程的一部分），您的html助手使用
ModelState
值（不是模型值）。可能有助于解释它。（如果我误解了，最好问一个新问题）