jQuery validation en ASP.Net UpdatePanels

[Haan]

Ik ben de laatste dagen bezig met jQuery validation. Dat werkt opzich erg mooi, maar geeft mij problemen als ik dat wil gebruiken op een pagina met UpdatePanels. Ik heb een zo simpel mogelijk voorbeeld gemaakt om te laten zien wat voor pagina ik heb:

HTML:

<asp:Content ID="Content2" ContentPlaceHolderID="placeHolderBody" runat="Server">
    <script type="text/javascript">
    $(document).ready(function(){
    $("#aspnetForm").validate(
        {
           rules: {
                    <%=Naam.UniqueID %>: {
                        minlength: 2,
                        required: true
                    }
                },
            messages: {
                <%=Naam.UniqueID %>:
                {
                    required: "Verplicht veld",
                    minlength: "Veld bevat te weinig tekens"
                }
            }
        });
    });

    </script>
    <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
        <ContentTemplate>
            <ol>
                <li>
                    <asp:Label ID="Label1" runat="server" AssociatedControlID="Naam">Naam:</asp:Label>
                    <asp:TextBox ID="Naam" runat="server"></asp:TextBox>
                </li>
            </ol>
            <br />
            <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
        </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
        <ProgressTemplate>
            wachten op updatepanel1..
        </ProgressTemplate>
    </asp:UpdateProgress>
    <asp:UpdatePanel ID="UpdatePanel2" runat="server">
        <ContentTemplate>
            Updatepanel 2
        </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdateProgress ID="UpdateProgress2" runat="server" AssociatedUpdatePanelID="UpdatePanel2">
        <ProgressTemplate>
            wachten op updatepanel2..
        </ProgressTemplate>
    </asp:UpdateProgress>
</asp:Content>

In de code-behind staat alleen een Thread.Sleep van 2 sec op hetbutton1 click event.

Het gaat hier dus om een content page, met daarop 2 UpdatePanels met bijhorende UpdateProgress. Dit voorbeeld is een beetje gebaseerd op http://www.dotnetcurry.com/ShowArticle.aspx?ID=310 , waarin wordt uitgelegd hoe je jQuery validation icm met ASP.Net masterpages kan gebruiken.

(in werkelijkheid gaat het om een formuliertje waarop wat gegevens ingevuld worden, daarna worden resultaten in een grid getoond die in de tweede updatepanel staat, je kan dan namelijk resultaten selecteren en daarna weer op een knop klikken voor verwerking, daarvoor is updateprogress2)

Maar het probleem is dus, dat de UpdatePanels en jQuery niet heel goed samenwerken. Als je nu op de button klikt, wordt de validatie wel getriggered, maar wordt ook de postback van de button uitgevoerd. Volgens mij mis ik dus nog een manier om iets als Page.IsValid toe te passen, maar dan in client-side script.
Ik heb nog geprobeerd de pageLoad function te gebruiken ipv $(document).ready(), omdat daar een verschil in zit bij het loaden van de pagina, maar dat geeft geen ander gedrag.

Ik kan alleen nergens iets vinden dat werkt, alleen ingewikkelde verhalen ( bijv. http://forums.asp.net/p/1436924/3241814.aspx#3241814 en http://stackoverflow.com/...panel-nyromodal-success-f , deze laatste heeft wel een code voorbeeld dat de postback stopt, maar dan werkt ie ook niet meer als de pagina wél valid is, dus dat helpt ook niet echt )

[ Voor 4% gewijzigd door Haan op 05-04-2010 12:45 ]

[D-Raven]

Het verhaal uit je stackoverflow topic klopt precies. Als je verder leest naar de laatste opmerking van de poster dan staat daar in principe het antwoord wat je zoekt.

Je wilt van te voren de postback van je submit knop cancellen. Daarna wil je de submithandler option gebruiken van de jquery validate plugin om handmatig je postback uit te voeren indien de validatie in orde is.

De postback van je submit knop te cancellen doe je d.m.v in je click event handler return false te zetten (in javascript). Daarna moet je zelf een postback genereren van je updatepanel met __doPostback(...).

Maareuhm.. Als je toch update panels gebruikt waarom gebruik je dan niet de ingebouwde validatie controls die al in asp.net webforms zitten? Bespaart je iig dit gedoe en je bereikt functioneel hetzelfde.

[Haan]

de jQuery validation heeft mooiere / makkelijkere opties om de validatie te customizen, daarom wilde ik het gaan gebruiken ipv de asp.net validatie controls. Maar als het zoveel voeten in de aarde heeft om te gebruiken icm met updatepanels, laat ik het maar even bij het oude.

[Verwijderd]

Haan schreef op maandag 05 april 2010 @ 19:13:
de jQuery validation heeft mooiere / makkelijkere opties om de validatie te customizen, daarom wilde ik het gaan gebruiken ipv de asp.net validatie controls. Maar als het zoveel voeten in de aarde heeft om te gebruiken icm met updatepanels, laat ik het maar even bij het oude.

Mooier wil ik wel geloven, maar makkelijker? Met de .net controls kom je een heel eind (zelfs zonder ook maar een woord te programmeren) en erg streng valideren is ook niet goed…Voor wat voor formulier wil je het gebruiken?