ASP.Net + jQuery + jQuery validação plug-in + UpdatePanel + nyroModal - sucesso de disparo em cada campo!

Question

Eu tenho um formulário que contém uma lista de campos de entrada que as povoa usuário com preços (números). Tenho definir suas classes css a "necessária" e "número" para que o jQuery validação plugin de valida-los em conformidade. Tudo o que está funcionando perfeitamente bem. Os erros são exibidos quando cada campo não é um número ou o valor está faltando etc.

Este formulário inteiro é realmente dentro de uma janela pop-up modelo nyroModal (plugin jQuery). Mas isso não importa, é apenas uma forma Web.aspx independentemente. Dentro disso, eu usei também um tudo UpdatePanel e colocar dentro dele, porque a minha forma é essencialmente um processo de 2 estágios. Existem algumas etapas básicas que o usuário deve preencher na primeira 'página' do formulário. Ao que valida e obras, eu só ocultar / mostrar alguns elementos dentro do UpdatePanel para mostrar ao usuário a próxima 'página' do formulário, que é todos os campos de entrada de caixa de texto preço como descrito acima.

Eu estou usando um ImageButton como o ponto de disparo para validar o formulário. Por padrão, se você acabou de sair de uma ImageButton do jeito que está, .Net irá disparar um postback, AJAX de postagem no meu caso, porque é tudo acontecendo dentro de um UpdatePanel. Que por sua vez, é desejado. Eu não quero um postback completo feio por razões óbvias.

Depois de muita leitura, eu precisava de uma maneira de anexar a PageRequestManager da Net em javascript para que eu pudesse interceptar quando .Net queria fazer uma nova postagem, com base em se jQuery tinha validado com êxito o formulário ou não. Assim, a minha lógica diz: Por padrão, não permitir postagens, mas quando jQuery validado com êxito o formulário, defina uma variável que diz que postbacks são agora permitidas, então da próxima vez que uma nova postagem tentativas para acontecer, vai passar. E, portanto, mostrar o sucesso para o usuário.

Esta é uma espécie de todos trabalhando razoavelmente bem, mas há um problema final.

({} sucesso) A opção de validação do plugin jQuery validar parece ser erroneamente disparando após a validação for bem sucedida em cada campo individual, não o formulário inteiro. Ou seja, se eu digitar um número em qualquer um dos campos de entrada de preços, esta opção sucesso dispara e definir minha variável cancelPostback como falsa, o que por sua vez significa que a forma agora submete mesmo que ele não foi validado, só porque um campo foi válido. Eu teria esperado que esta opção validate ({} sucesso) para apenas fogo uma vez todo o formulário foi validado.

Tem Interpretei isso incorretamente, e de fato a sua fazendo o seu significado ser? Se assim for, como posso simplesmente definir minha variável cancelPostback a verdade apenas quando o formulário inteiro é validado?

montes Obrigado por qualquer visão ou heads-up.

código meu jQuery para implementar a validação e também interceptar o evento de postagem Net é a seguinte:

<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

Eu gostaria de sugerir a olhar para as opções submitHandler e invalidHandler. Um ou outro deve trabalhar para o que você quer. A melhor maneira, penso eu, seria permitir postagens por padrão e definir o cancelPostback como true no invalidHandler. Alternativamente, você pode escrever seu próprio submitHandler que as chamadas __doPostBack diretamente e substitui a apresentação através do ImageButton.

Answer 2

Eu tive problemas com sua solução, porque todos os navegadores exceto IE estavam disparando a função "onEachRequest" ANTES função submitHandler do validador jQuery (). Eu vim com uma solução mais elegante que simplesmente cancela a postagem se a validação falhar, em vez de depender de uma variável pré-definida.

  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 3

Graças montes tvanfosson para a assistência rápida.

Ok actualização:

Eu segui mais e mais links e finalmente encontrado a documentação para o "sucesso". A documentação sobre a home page própria do plugin é terrível e omite muitos tecla apresenta :) Mas na página oficial do jQuery seu "melhor". A opção "sucesso" destina-se a disparar a cada momento um campo individual é validado com sucesso. Assim que estava trabalhando por design e eu estava erroneamente assumindo que só iria fogo quando o formulário inteiro era válido.

Eu tentei a sua ideia invalidHandler. Eu amei essa idéia. Uma questão que surgiu contra foi que postback do ImageButton seria ainda SEMPRE disparar primeiro, para que ele iria começar a postar de volta antes do código invalidHandler seria executado. Assim, a postagem ainda vá em frente, depois disso, invalidHandler iria desativar postagens futuras, eles estavam disparando na ordem errada, infelizmente. Mas, além disso, ele mostrou qualquer outro sinal de ser a solução perfeita.

Então eu fui para o outro lado tentando o caminho submitHandler, ou seja, o inverso. Mais uma vez, este sofreu de alguns problemas de ordem, porque a postagem voltaria a atirar primeiro, mas ser bloqueado, então submitHandler permitiria postagens futuras, mas já era tarde demais, de modo que este postback foi perdida. Você teria que clicar novamente no botão duas vezes para obtê-lo ir.

Portanto, a solução semi-kludgey final, que não é muito mau para ser honesto, foi:

Eu mudei essa linha para: // Anexar validação do lado do cliente para o formulário principal $ ( "# <% = Form1.ClientID%>") Validar. ({SubmitHandler: function () {PreventPostback = false; __doPostBack ( 'UpdatePanel1', '');}});

Que, como você pode ver, em primeiro alterna a variável PreventPostback, mas, em seguida, incêndios fora um novo postback manualmente, porque o primeiro postback já teria sido bloqueado e morreram. Portanto, esta chamada __doPostBack o manual garante que uma nova postagem é demitido off respeitando o novo valor de PreventPostback.

Eu removi os métodos de eventos de trás das ImageButtons, e fez um novo método no código do lado do servidor chamado "DoPostBackLogic ()", que só é chamado quando a página é enviada de volta, que eu sei que deve ter sido a partir desta lógica de validação , porque essa é a única postback que pode acontecer no meu formulário. Então todo o hide / show / save lógica acontece lá dentro para mim. Que significa que quando eu estou chamando manualmente o __doPostBack, eu posso simplesmente usar o ID do UpdatePanel e não se preocupar imitando um determinado ImageButton etc.

Desta forma, ele funciona perfeitamente. Postbacks são desativados por padrão, e quando o formulário é válido, Postbacks são então permitido, mas uma nova postagem é então acionado manualmente para que o novo valor entre em vigor.

Portanto, esta é essencialmente a sua segunda solução, obrigado mais uma vez para ouvir e compartilhar! :)