Как использовать asp.net MVC 3 ненавязчивой проверки JavaScript с помощью мастера?

Question

Я использую asp.net mvc 3 и хочу использовать ненавязчивый JavaScript . Я создаю довольно длинную форму, которая, вероятно, была бы очень подавляющей, если бы ее не разбили.

Я решил использовать jquery form wizard , чтобы разбить его на мастера, который не должен выглядеть таким подавляющим. Мне не интересно, как мне использовать аннотации данных и ненавязчивый java-скрипт с мастером.

Прямо сейчас все по-прежнему в одной большой форме, но выглядит просто разбитым через волшебника. В конце формы есть только одна кнопка отправки, которая при щелчке сериализует данные формы и отправляет сообщение ajax на сервер с этими данными.

Из того, что я обычно видел впервые при использовании проверки mvc, пользователь должен нажать кнопку отправки, прежде чем какая-либо проверка на стороне клиента получит триггер. Мне интересно, возможно ли это сделать после того, как они покинут поле, так как это может сбить пользователя с толку, когда он нажмет «отправить», и ничего не произойдет, а затем ему придется снова пройти весь мастер, чтобы найти ошибки проверки.

Было бы неплохо сообщить им сразу, когда они совершат ошибку.

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

Редактировать

Это то, что у меня есть на кнопке отправки

$('#frm').live('submit', function (event) {
    event.preventDefault();

    var $thisFrm = $(this);

    ValidatorParse($thisFrm);//jQuery.validator.unobtrusive.parse(selector);
    var clientCheck = $($thisFrm).validate().form();

    if (clientCheck) {
       // ajax post(server side validation will happen.If it does not pass serverside I send it back usually as json).
    }
});

Итак, я вижу пару проблем с этим. Сначала только проверка действительно будет запущена при отправке. Если он запускается и ошибка проверки появляется на втором шаге мастера, пользователь не увидит его (если только кто-нибудь не сможет найти способ найти первую ошибочную ошибку проверки и переключить их на этот шаг).

Вторая проблема, которую я вижу, заключается в том, что им приходится ждать до конца, чтобы узнать, есть ли у них ошибки проверки. Я лучше сообщу им как можно скорее.

Редактировать

Кажется, что мастер использует jquery validate, но по какой-то причине он не работает с mvc jquery validate.

Проведя дополнительные исследования, я обнаружил, что волшебнику нужно видеть «требуемый» как класс для запуска

// will trigger validation
<input type="text" value="" name="AnnualFee" id="AnnualFee"
    data-val-required="Annual Fee Required" 
    data-val="true" 
    class="required ui-wizard-content ui-helper-reset ui-state-default error">

// will not trigger validation
    <input type="text" value="" name="AnnualFee" id="AnnualFee" 
    data-val-required="Annual Fee Required" 
    data-val="true" 
    class="ui-wizard-content ui-helper-reset ui-state-default">

Я не вижу в документации для jquery проверки их когда-либо с использованием класса для проверки формы. Это что-то, что выдумал человек?

Answer 1

При использовании мастера создания формы jquery (за исключением, конечно, его инициализации) вам не требуется никакого дополнительного кода JavaScript на кнопке отправки.

ненавязчивая часть Microsoft MVC3 просто делает скучную работу по преобразованию всех атрибутов "data- *", отмеченных на вашем вводе html (например, data-val-required = "blah blah blah") в хорошо известные правила jquery-проверки. Это делается прежде, чем мы решим проверить форму!

Итак, атрибут RequiredValidationAttribute и друзья (ваши пользовательские проверки и т. Д.) В ваших моделях достаточно для запуска.

Попробуйте это (если вы уже не сделали):

1. Возьмите свою полную форму и нарежьте ее на "div" с классом step , где каждый div - это шаг (я думаю, эта часть вы уже сделали).

2. Ваша кнопка отправки и возврата должна быть:

   input class = "navigation_button" id = "back" type = "reset" value = "Back"

   input class = "navigation_button" id = "next" type = "submit" value = "Next"

3. Инициализация мастера формы

   $(document).ready(function () {
       $("form").formwizard({ 
           formPluginEnabled: true,
           validationEnabled: true,
           focusFirstInput : true
       });
   });
   

Мастер форм позаботится о вызове проверки для каждого шага вашего мастера.

Прежде чем написать это, я сделал пример формы, чтобы доказать, что она работает.

Надеюсь, это поможет, или извините, если я неправильно понял вашу проблему.

Answer 2

Я использовал это так

function ValidateStep(){
    var validator = $("form").validate(); // obtain validator
    var anyError = false;
    if (!validator.element(this)) { // validate every input element inside this step
       anyError = true;
    }
    if(anyError) return false;
    return true;
}

Answer 3

Моя команда и я регулярно создаем мастеров и предлагаем независимое решение, не зависящее от конкретного технологического подхода на стороне сервера.Некоторые «мастера» - это потоки оформления, где у вас есть одна страница, на которой есть много шагов с точки зрения извлечения.Я сделал это на 100K + усилиях по разработке сайтов с большим трафиком через мою компанию.

Мы до сих пор используем c # MVC, c # razor matrix-style, node.js, php и python.Мы придерживаемся общего подхода и можем использовать его во всех технологиях.Наш подход подобен MVC, поскольку он очень строго разделяет HTML, CSS и JavaScript.

Это выглядит так:

1. Мы создаем одну страницу, которая содержит только разметку и ссылкив CSS и скрипты.Мы никогда не помещаем встроенные стили или встроенный скрипт, кроме конфигурации атрибутов данных, в элементы формы, совместимые с HTML5 и HTML5 и т. Д. Мы используем JavaScript, соответствующий стандартам HTLM 5, для проверки формы, даже если он не поддерживается.У нас есть наши собственные библиотеки, но вы можете использовать инструменты jQuery или аналогичные.
2. У вас есть файл main.css и файл main.js, которые будут выполнять общий стиль и логику многократного использования.Думайте о них как о композиторах, управляющих всем потоком.
3. Для каждого шага в мастере создайте отдельный css и javascript, который специфичен для каждого шага.
4. пространство имен ваших шагов в вашем css, чтобыон очень специфичен.
5. Используйте jQuery для запуска проверки и создания пространства имен для селекторов, аналогично тому, как вы используете подход CSS, поэтому вы прикрепляете события именно туда, где они должны находиться.

Итак, выв конечном итоге с очень четким разделением интересов, который работает для любой технологии.В вашем случае вы можете пойти дальше и создать частичные представления в MVC для каждого шага и разделить их таким образом, поскольку они могут загружать свои собственные CSS и JavaScript для своего соответствующего шага.

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

На самом деле я не считаю это полным ответом, и мне потребуется дополнительная обратная связь, чтобы донести его до вас.