MVC & JS: использование одной формы в представлении, чтобы она выглядела как 2 вида

Question

Прежде чем мы начнем, я использую MVC 3, Entity Framework Model. Во-первых, веб-приложение, которое я разрабатываю, должно позволить пользователям создавать оценочную карту, создание которой предполагается в 2 этапа.

• Первый шаг заключается в том, что пользователь вводит и выбирает поля, представляющие собой информацию.
• Второй шаг состоит в том, что пользователи выбирают / выбирают вопросы, которые он / она хочет для оценочной карты.

То, что я пытаюсь сделать, это сделать первый шаг и второй шаг все в одной форме и использовать теги div, чтобы скрыть их с помощью jquery. Что делает все это намного проще, так как мне не нужно использовать 1 просмотр на шаг процесса. Я могу сделать все это в одном представлении.

Теперь к проблеме! :)

В этом представлении у меня есть одна кнопка отправки, эта кнопка, кажется, запускает всю мою форму, даже мою проверку, которая была выполнена с помощью стандартной проверки jquery в MVC. Я полагаю, она также передает мое действие после публикации.

Мне нужна эта функция:

Когда пользователь нажимает кнопку подтверждения, я хочу, чтобы проверка была утверждена, а затем скрывает первый шаг и показывает второй шаг. Когда пользователь нажимает кнопку «Отправить» после выбора вопросов на втором шаге, я хочу, чтобы кнопка «Отправить» запускала действия публикации. У меня также есть дополнительная кнопка на втором этапе, которая может вернуть вас к первому шагу, который скрывает второй шаг и показывает первый шаг :)

шаг первый имеет идентификатор id "hiddenstep1", а второй шаг имеет идентификатор id "Hiddenstep2"

Jquery-скрипт, который я пытаюсь использовать для этого, работает следующим образом:

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

Если есть какая-либо дополнительная информация, дайте мне знать, и я отредактирую свой вопрос.

Заранее спасибо!

Answer 1

Значит, вы хотите что-то вроде мастера?

Есть несколько плагинов jQuery для Wizards, которые поддерживают валидацию.

Хороший Степи:

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

}