Question

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

[编辑为清晰]

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

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

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

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

第一个部分视图应该显示字段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>

第二部分视图应显示字段Cylindre（与上面相同的代码）。

现在主视图看起来像这样：

@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>

}

一切正常。但正如您所看到的，两个部分视图同时呈现。

我想做的是加载第一个部分视图，然后当用户移动到下一步时，将使用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，但实际数据提交是所有视图数据的组合。我不知道这是否是最佳实践，但这是一个想法。 / p>

用户遍历向导步骤时更新模型

1 个答案: