MVC & JS:在视图中使用一种形式，使其看起来像是2视图

Question

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

第一步是用户键入和选择字段，这是information.

• Second步骤，用户选择/选择他/她想要的问题作为评估卡。

我想要做的是在视图中将第一步和第二步都放在一种形式中，并使用div标记来用jquery隐藏它们。这使得这一切变得更容易，因为我不需要使用每个进程步骤的一个视图。我可以在一个单一的视图中完成所有这些。

现在谈问题！:)

在这个视图中，我有一个提交按钮，这个按钮似乎触发了我的整个表单，甚至我用MVC中的标准jquery验证完成的验证--我猜它也提交了我的post操作。

这是我想要的功能：

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

步骤一有div id "hiddenstep1“，步骤二有div id "Hiddenstep2”。

我试图为此使用的Jquery脚本如下所示：

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

如果有任何额外的信息，让我知道，我将编辑我的问题。

提前感谢！

Answer 1

所以你想要像巫师一样的东西？

有几个向导的jQuery插件支持验证。

史蒂比是个不错的人：

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"/>

}