Question

在我们开始之前，我正在使用MVC 3，实体框架模型首先，我正在开发的Web应用程序假设让用户创建一个评估卡，创建假设分为两步。

第一步是用户输入并选择作为信息的字段。
第二步是用户选择/选择他/她想要的评估卡问题。

我要做的是在视图中以一种形式创建第一步和第二步，并使用div标签用jquery隐藏em。这使得它更容易，因为我不需要每个过程步骤使用1个视图。我可以在一个视图中完成所有这些。

现在来问题了！ :)

在这个视图中我有一个提交按钮，这个似乎触发了我的整个表单甚至我的验证，我已经完成了MVC中的标准jquery验证我想它也提交了我的帖子动作。

这是我想要的功能：

当用户点击提交按钮时，我希望验证得到批准，然后隐藏第一步并显示第二步。当用户在第二步中选择问题后单击提交按钮时，我希望提交按钮触发后期操作。我还在第二阶段有一个额外的按钮，可以带你回到第一步，隐藏第二步并显示第一步:)

第一步有div id“hiddenstep1”，第二步有div id“Hiddenstep2”

我试图用于此目的的Jquery脚本正在发挥作用：

$("#hiddenstep1").hide();
$("#hiddenstep2).show();

如果有任何额外信息，请告诉我，我会编辑我的问题。

提前致谢！

Answer 1

所以你想要一个类似巫师的东西？

Wizards有几个jQuery插件支持validaton。

Stepy很好：

http://www.wbotelhos.com/stepy/

在表单的最后一步之前，它不会使用提交按钮。通过一些小的黑客攻击，您可以支持服务器端验证，并让人们回到出现错误的步骤：

            var firstError = $('.input-validation-error:first,span.field-validation-error');
            if (firstError.length != 0) {
                $('#dealWizard').stepy('step', $(firstError).closest('fieldset').index() + 1);
            }

使用Stepy，您的每个步骤都包含在一个字段集中，所有字段集都包含在同一表单中。

示例：

@using (Html.BeginForm())
{

        <fieldset title="Step 1">
            <legend>Choose Something</legend>
            <div class="editor-label">
                @Html.LabelFor(m => m.Field1)
            </div>
            <div class="editor-field">
                @Html.TextBoxFor(m => m.Field1)
                @Html.ValidationMessageFor(m => m.Field1)
            </div>
        </fieldset>
        <fieldset title="Step 2">
            <legend>Choose Something Else</legend>
            <div class="editor-label">
                @Html.LabelFor(m => m.Field2)
            </div>
            <div class="editor-field">
                @Html.TextBoxFor(m => m.Field2)
                @Html.ValidationMessageFor(m => m.Field2)
            </div>
        </fieldset>
        <input type="submit" class="finish"/>

}

MVC＆amp; JS：在视图中使用一个表单，使其看起来像2个视图

1 个答案: