在用户完成向导的步骤时更新模型

Question

我将使用SmartWizard jQuery 插件来创建一个类似向导的 ASP.Net MVC 应用程序。用户将通过多个步骤来填写数据。

[为清晰而编辑]

每个步骤都应该是一个局部视图。

ViewModel 对所有视图都是通用的：

public class myViewModel
{
    [Required]
    public int BM { get; set; }

    [Required]
    public int Cylindre { get; set; }        
}

第一个 Partial View 应该显示字段 BM（当然，为了清楚起见，我在这里简化了一些内容）：

@model MvcApplication3.Models.QuoteViewModel
    <div class="editor-label">
      @Html.LabelFor(model => model.BM)
    </div>
    <div class="editor-field">
      @Html.EditorFor(model => model.BM)
      @Html.ValidationMessageFor(model => model.BM)
 </div>

第二个局部视图应该显示字段 Cylinder（与上面的代码相同）。

现在主视图如下所示：

@model MvcApplication3.Models.QuoteViewModel

@using (Html.BeginForm())
{
@Html.ValidationSummary(true)
<div id="wizard" class="swMain">
    <ul>
        <li><a href="#step-1">
            <label class="stepNumber">
                1</label>
            <span class="stepDesc">Step 1<br />
               </span></a></li>
        <li><a href="#step-2">
            <label class="stepNumber">
                2</label>
            <span class="stepDesc">Step 2<br />
                </span></a></li>
    </ul>

    <div id="step-1">
        <h2 class="StepTitle">
            Step 1 Content</h2>
      
        <!-- step content -->
        @Html.Partial("QuoteStep1", Model)

    </div>
    <div id="step-2">
        <h2 class="StepTitle">
            Step 2 Content</h2>
      
        <!-- step content -->
        @Html.Partial("QuoteStep2", Model)

    </div>
</div>

}

这一切都很好。但如您所见，两个 Partial View 是同时渲染的。

我想做的是加载第一个局部视图，然后当用户继续下一步时，将使用 AJAX 调用加载第二个局部视图。

问题是如何通过步骤保持模型状态？

[编辑 2 - 新版本]

我已经设法使用 AJAX 调用加载部分视图：

$('#wizard').smartWizard({ contentURL: '/home/getstep', transitionEffect: 'slideleft', onLeaveStep: leaveAStepCallback, onFinish: onFinishCallback });

在控制器中，我这样做：

 public ActionResult GetStep()
    {
        ActionResult pv = null;

        switch (Convert.ToInt16(Request["step_number"]))
        {
            case 1:
                pv = PartialView("QuoteStep1");
                break;
            case 2:
                pv = PartialView("QuoteStep2");
                break;
            default:
                break;
        }
        return pv;
    }

现在我遇到的问题是，当我点击 SmartWizard 的下一个按钮时，即使我没有填写必填字段，我的控制器实际上也会被点击！这是因为 SmartWizard 插件似乎在 ajax 调用后进行验证以获取内容，这对我来说似乎很愚蠢。

有人遇到过这个问题，还是我在这里做错了什么？

Answer 1

您是否想过通过 javascript 进行提交以结合来自各个步骤的（仍然存在的）输入？您可以使用来自先前部分视图的信息来渲染部分视图 2 到 N，但是实际的数据提交是所有视图数据的组合。我不知道这是否是最佳实践，但这是一个想法。