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

Question

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

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

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

После долгих чтений мне понадобился способ присоединения к .Net PageRequestManager в 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>

Answer 1

У меня были проблемы с вашим решением, потому что все браузеры, кроме 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());
    }
  }

Answer 2

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

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

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

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

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

Итак, окончательное полукладкое решение, не так уж плохо, если честно, было:

Я изменил эту строку на: // Присоединяем проверку на стороне клиента к основной форме $ ("# <% = form1.ClientID%>"). validate ({submitHandler: function () {PreventPostback = false; __doPostBack ('UpdatePanel1', '');}});

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

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

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

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

Answer 3

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