[C# / ASP (JS?)] voorkomen van dubbel submitten data

[RemcoZ]

Ik heb hier een situatue waarin ik een formulier aanbied dat mensen invullen en door middel van een knop submitten. Nu zou ik graag willen voorkomen dat als zij (per ongeluk of ongeduldig) informatie dubbel versturen. Dit is te doen door zodra ze de knop induwen deze uit te schakelen. Hiervoor heb al even gezocht en om dit op een juiste manier te doen is het nodig een controle uit te voeren op de client-kant, in de vorm van stukje javascript (zie code behind).

Bovenstaande heb ik aan het werk. Echter, in het formulier voer ik ook een controle uit of een bepaald veld een verplicht veld is. Velden en knoppen zitten in dezelfde ValidationGroup. En hier ontstaat het probleem. Deze eerste keer gaat dit goed, geheel volgens plan, maar als iemand nogmaals een veld vergeet in te vullen wordt de code die achter de knop zit niet meer uitgevoerd... Als iemand dit eens eerder heeft meegemaakt of hier ideëen over heeft: ik hoort het graag!

De code:
[ASP]:

code:

<asp:updatePanel ID="UpdatePanel" runat="server" UpdateMode="Conditional">
  <ContentTemplate>
    <div class="FnBlockBody">
      <table width="100%" cellpadding="0" cellspacing="0" border="0">
        <tr><td class="FnBlockHeader" colspan="10">Koptitel</td></tr>
        <tr><td colspan="10">&nbsp;</td></tr>
        <tr>
          <td colspan="10">
            ASP tekstveld: 
            <asp:TextBox ID="txtTextBox_ASP" runat="server"  />
            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtTextBox_ASP" ErrorMessage="FOUT" ValidationGroup="Required" ></asp:RequiredFieldValidator>
          </td>
        </tr>
        <tr><td><asp:Label ID="lblError" runat="server" /></td></tr>
        <tr>
          <td colspan="10" style="text-align:right">
            <asp:Button ID="btnSave" runat="server" Text="Opslaan" onClick="btnSaveClick" CausesValidation="true" ValidationGroup="Required"/>
          </td>
        </tr>
      </table>
    </div>
  </ContentTemplate>
</asp:updatePanel>

[C# code behind]

code:

public partial class xxx : System.Web.UI.Page
{
    public void Page_Load(object sender, EventArgs e)
    {
        btnSave.Attributes.Add("onclick", " this.disabled = true; " + ClientScript.GetPostBackEventReference(btnSave, null) + ";");

        if (!Page.IsPostBack)
        {
            //
        }
    }

    protected void btnSaveClick(object sender, EventArgs e)
    {
        if (Page.IsValid)
        {
            // Voer Query uit.
            lblError.Text = lblError.Text + "Prima, voer query uit.";
        }
        else
        {
            btnSave.Enabled = true;
        }
    }
}

[D-Raven]

Wat bedoel je met de code die achter de knop zit? Bedoel je daarmee de btnSaveClick methode? of bedoel je het clientside validatie gebeuren?

Indien het eerste, probeer eens om je event handler in de page_init te koppelen ipv in je markup. Webforms gaat daar soms wel eens mee de mist in.

[Face_-_LeSS]

Wat jij wilt is mogelijk maar ik ga je niet vertellen hoe want dan zit je direct met een ander probleem. Namelijk: Wanneer een control disabled is wordt de value niet door de browser meegestuurd in de postback. Met als gevolg dat je server-side "btnSaveClick" event handler niet wordt uitgevoerd. En dat is niet wenselijk natuurlijk...

Een oplossing is om client-side bij te houden of het formulier is ge-submit en een eventuele tweede klik up de button te negeren door in de client-side eventhandler False te retourneren.

[D-Raven]

Face_-_LeSS schreef op woensdag 28 april 2010 @ 13:21:
Wanneer een control disabled is wordt de value niet door de browser meegestuurd in de postback.

Ah natuurlijk. Ik had er overheen gekeken..

Alternatief kan je de knop met javascript ook onzichtbaar maken ipv disablen.

[RemcoZ]

@ Fase_-_Less:
Thanks, je hebt me getriggerd net even wat andere keywords in Google te gebruiken en ik ben op de volgende oplossing gestuit:
http://www.abstraction.ne...submit%20in%20asp.net.htm
Doorscrollen naar oplossing 4.

Het voordeel van deze oplossing is dat je alle validatie clientside doet. Je hoeft in de .cs je alleen maar te storten op wat die knop moet doen als je validatie in orde is.

@Deathraven: Bedankt voor het aanzetten van FaceLess voor het goede antwoord
Nog wel een ander puntje, ik zou vanuit usability oogpunt *nooit* een knop weghalen als iemand daarop heeft geklikt. Dit is onverwacht gedrag en door 'm te uit te schakelen maar wel zichtbaar te houden geef je de gebruiker in elk geval nog het gevoel dat er iets gebeurd.
In mijn geval zou dit slechts tijdelijk van aard zijn, omdat ik na het submitten overga naar een andere view (of pagina).

Thanks!

[D-Raven]

Ik begrijp je usability argument.Je kunt ook na het hiden van de knop een "throbber" tonen.

[Maxxi]

Je weet dat clientside validatie alleen voor snelheid is.
Maar dat je ALTIJD ook serverside validatie moet houden? Een client kan heel simpel de client side validatie uitzetten en zo dingen doen waar jou applicatie niet mee om kan gaan.

[raptorix]

Als je het goed doet, gebruik je meerdere lagen om dit te valideren:

-Clientside
-Code Behind Code
-Datalaag

[MSalters]

De meest makkelijke methode om dubbele submits te voorkomen is om een random form ID mee te geven. Na elke submit krijgt de client een nieuwe van de server. Twee submits van een form met dezelfde ID worden door de server genegeerd.

[tonyisgaaf]

Ik zou overigens de JS code die de Form "blokkeert" niet op de knop maar op het "onsubmit" event van de Form zelf laten triggeren. Alleen de knop blokkeren zorgt er binnen de browser nog niet voor dat de form niet meer gesubmit kan worden.