ASP.Net + jQuery + плагин проверки jQuery + UpdatePanel + nyroModal — успешное срабатывание по каждому полю!

StackOverflow https://stackoverflow.com/questions/850777

Вопрос

У меня есть форма, содержащая список полей ввода, которые пользователь заполняет ценами (числами).Я установил для их классов CSS значения «обязательный» и «число», чтобы плагин проверки jQuery проверял их соответствующим образом.Все это работает отлично.Ошибки отображаются, когда каждое поле не является числом или значение отсутствует и т. д.

Вся эта форма на самом деле находится внутри всплывающего окна модели nyroModal (плагин jQuery).Но это не имеет значения, в любом случае это всего лишь веб-форма .aspx.При этом я также использовал UpdatePanel и поместил в нее все, потому что моя форма, по сути, представляет собой двухэтапный процесс.Есть несколько основных шагов, которые пользователь должен выполнить на первой «странице» формы.Когда это подтверждается и работает, я просто скрываю/показываю некоторые элементы в UpdatePanel, чтобы показать пользователю следующую «страницу» формы, которая представляет собой все поля ввода текстового поля цены, как описано выше.

Я использую ImageButton в качестве триггерной точки для проверки формы.По умолчанию, если вы просто оставите ImageButton таким, какой он есть, .Net выполнит обратную передачу, в моем случае обратную передачу AJAX, потому что все это происходит внутри UpdatePanel.Что опять же желательно.Мне не нужен уродливый полный постбек по понятным причинам.

После большого количества чтения мне нужен был способ присоединения к PageRequestManager .Net в javascript, чтобы я мог перехватывать, когда .Net хочет выполнить обратную передачу, в зависимости от того, успешно ли jQuery проверил форму или нет.Итак, моя логика говорит:По умолчанию обратные передачи не разрешены, но когда jQuery успешно проверяет форму, установите переменную, которая сообщает, что обратные передачи теперь разрешены, тогда в следующий раз, когда обратная передача попытается произойти, она будет выполнена.И, следовательно, отображать успех пользователю.

Все это работает достаточно хорошо, но есть еще одна проблема.

Параметр validate({success}) плагина проверки jQuery, по-видимому, ошибочно срабатывает после успешной проверки каждого отдельного поля, а не всей формы.Т.е.если я введу число в любое из полей ввода цены, этот вариант успеха сработает и установит для моей переменной cancelPostback значение false, что, в свою очередь, означает, что форма теперь отправляется, даже если она не была проверена, просто потому, что одно поле было действительный.Я ожидал, что эта опция validate({success}) сработает только после проверки всей формы.

Я интерпретировал это неправильно, и на самом деле это делает то, что и должно быть?Если да, то как я могу просто установить для переменной cancelPostback значение true ТОЛЬКО, когда ВСЯ ФОРМА проверена?

Огромное спасибо за любую информацию или советы.

Мой код jQuery для реализации проверки, а также перехвата события обратной передачи .Net выглядит следующим образом:

<script type="text/javascript">
    // By default, don't allow Postback until we've successfully validated our form on the client-side.
    var cancelPostback=true;

    // Every single time the page loads, including every single AJAX partial postback
    function pageLoad()
    {
        // Reset the value to say that "We don't allow Postbacks at this stage"..
        cancelPostback=true;

        // Attach client-side validation to the main form
        $("#<%= form1.ClientID %>").validate({ success: function() { alert('validation succeeded!'); cancelPostback = false; } });

        // Grab a reference to the Page Request Manager
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_initializeRequest(onEachRequest);

        alert("Page Load");
    }

    // Our own custom method to be attached to each new/future page request..
    function onEachRequest(sender, args)
    {
        alert("About to cancel? " + cancelPostback);
        // Check to see if we need to Cancel this Postback based on Conditional Logic within this page..
        args.set_cancel(cancelPostback);
    }
</script>
Это было полезно?

Решение

Я бы предложил посмотреть параметры submitHandler иvalidHandler.То или иное должно работать на то, что вы хотите.Я думаю, что лучшим способом было бы разрешить обратные передачи по умолчанию и установить для параметра cancelPostback значение true в инвалидном обработчике.В качестве альтернативы вы можете написать свой собственный submitHandler, который напрямую вызывает __doPostBack и заменяет отправку через ImageButton.

Другие советы

У меня были проблемы с вашим решением, потому что все браузеры, кроме IE, запускали функцию «onEachRequest» ДО функции submitHandler() валидатора jQuery.Я придумал более элегантное решение, которое просто отменяет обратную передачу в случае неудачной проверки, а не полагается на предустановленную переменную.

  Sys.Application.add_init(function() {
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_initializeRequest(onEachRequest);
  }); 

  function onEachRequest(sender, args) {
    if (args.get_postBackElement().id == <%= [YourSubmitButton].ClientID %>) {
      args.set_cancel(!$('#aspnetForm').valid());
    }
  }

Спасибо огромное tvanfosson за оперативную помощь.

Ок, обновление:

Я переходил по все большему количеству ссылок и в конце концов нашел документацию об «успехе».Документация на домашней странице плагина ужасна и не содержит многих ключевых функций :) Но на официальной странице jQuery она «лучше».Опция «успех» предназначена для срабатывания каждый раз при успешной проверке отдельного поля.Так что это работало по замыслу, и я ошибочно предполагал, что он сработает только тогда, когда вся форма действительна.

Я попробовал вашу идею инвалида Handler.Мне понравилась эта идея.Одна из проблем, с которой я столкнулся, заключалась в том, что обратная передача ImageButton по-прежнему ВСЕГДА запускалась первой, поэтому она начинала отправлять обратную передачу до запуска кода инвалида.Таким образом, обратная передача все равно будет продолжаться, а после этого инвалидХандлер отключит будущие обратные передачи, к сожалению, они запускались в неправильном порядке.Но помимо этого, он показал все остальные признаки того, что является идеальным решением.

Затем я пошел другим путем, попробовав метод submitHandler, т.е.обратное.Опять же, это страдало от некоторых проблем с порядком, потому что обратная передача снова сработала первой, но была заблокирована, а затем submitHandler разрешил будущие обратные передачи, но было уже слишком поздно, поэтому эта обратная передача была пропущена.Чтобы запустить его, вам придется дважды нажать кнопку еще раз.

Итак, окончательное полу-неуклюжее решение, которое, честно говоря, не так уж и плохо, было:

Я изменил эту строку на:// Прикреплять проверку на стороне клиента к основной форме $ ("#< %= form1.clientid %>"). Validate ({simithandler:функция () { PreventPostback = ложь;__doPostBack('UpdatePanel1', '');} });

Как вы можете видеть, сначала переключается переменная PreventPostback, а затем вручную активируется новая обратная передача, поскольку первая обратная передача уже была бы заблокирована и прекращена.Таким образом, этот ручной вызов __doPostBack гарантирует, что новая обратная передача будет запущена с учетом нового значения PreventPostback.

Я удалил методы событий из-за ImageButtons и создал новый метод в коде на стороне сервера под названием «DoPostBackLogic()», который вызывается только тогда, когда страница отправляется обратно, что, как я знаю, должно было быть из этой логики проверки, потому что это единственная обратная передача, которая может произойти в моей форме.Тогда вся логика скрытия/показа/сохранения происходит за меня.Это означает, что когда я вручную вызываю __doPostBack, я могу просто использовать идентификатор UpdatePanel и не беспокоиться о имитации определенного ImageButton и т. д.

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

Так что, по сути, это ваше второе решение, еще раз спасибо, что выслушали и поделились!:)

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top