2010-12-06 14 views
0

Ich habe gerade ein lustiges Verhalten in asp.net gefunden.asp.net Postback und Javascript/jquery

Ich habe ein Formular, das eine Feldgruppe hat, die beim ersten Laden ausgeblendet ist und eine Schaltfläche zum Senden.

Ich erwarte, dass, wenn ein Benutzer auf die Schaltfläche Senden klickt, das Feld angezeigt wird. Die Sache ist, wenn ich versuche, auf den Submit-Button zu klicken, zeigt es das Feldset-Element an, würde aber sofort verschwinden.

Wäre es möglich, wenn Sie mir in die richtige Richtung zeigen könnten, wo in meinem Code ich etwas falsch mache? Siehe meinen Code unten.

Danke eine Million!

Cheers, Ann

<%@ Page Language="C#" AutoEventWireup="true" Inherits="JavascriptTest._Default" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title>Test Javascript</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.js"></script> 
    <script type="text/C#" runat="server"> 
     protected void Page_Load(object sender, EventArgs e) 
     { 

     } 
    </script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      var btnSubmit = '#<%= btnSubmit.ClientID %>'; 
      $('#result').hide(); 
      $(btnSubmit).click(function() { 
       $('#result').show(); 
       return true; 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
     <fieldset id="result"> 
      <legend>Search Result</legend> 
      <p>Cras risus. Parturient lectus! Ac quis. Enim arcu adipiscing nunc? Porta magna ultrices elit amet, turpis vel nunc, massa pulvinar sit, pulvinar amet elementum tristique diam parturient, eu in dolor, non pulvinar nisi, penatibus? Velit tincidunt? Pulvinar nec urna ac, pulvinar purus integer phasellus, ridiculus non dictumst penatibus dolor rhoncus elementum pellentesque? Adipiscing et, dapibus, amet ac porta! Magna tristique, sed porta elit mid. Et ultricies et elit mattis. Arcu! Elementum ac? Nisi turpis, vel in massa pellentesque porta lectus, egestas aenean scelerisque risus? Placerat purus cum et. Egestas sociis, adipiscing porttitor scelerisque integer? Auctor a arcu sit aliquam amet sed odio, velit turpis, risus, porttitor mid diam, ac arcu lectus auctor, facilisis tincidunt! Et, proin, turpis nunc velit? Elementum.</p> 
     </fieldset> 

     <asp:Button ID="btnSubmit" runat="server" Text="Submit" /> 
    </div> 
    </form> 
</body> 
</html> 

Antwort

4

Die Standard Schaltfläche Verhalten tritt hier in die <form> verursacht einreichen und Ihre Seite zu aktualisieren (die <fieldset> wieder versteckt). Sie brauchen das Standardverhalten mit event.preventDefault() oder return false, wie dies zu verhindern:

$(document).ready(function() { 
    var btnSubmit = '#<%= btnSubmit.ClientID %>'; 
    $('#result').hide(); 
    $(btnSubmit).click(function (e) { 
     $('#result').show(); 
     e.preventDefault(); 
    }); 
}); 

event.preventDefault() wird nur die Vorlage verhindern, wo als return false wird die Veranstaltung im Keim töten ... so wirklich return false Ich halte viel des Guten hier. Es ist wirklich besser, das zu tun, was Sie versuchen, nicht mehr als das, was später zu ungewollten Problemen führen kann (zum Beispiel würde ein Handler .live()/.delegate() nicht funktionieren, wenn Sie das Ereignis beendet haben, usw.).

+0

Danke für diesen Nick! Das ist es wonach ich suche. – mallows98

+0

@ mallows98 - willkommen :) –

1

Sie möchten "false zurückgeben"; anstelle von true, um zu verhindern, dass die Schaltfläche ein tatsächliches Postback verursacht. Ich rate, was Sie wollen, ist nur eine clientseitige Aktion, so dass Sie falsch zurückgeben.

1

in der Tastenfunktion müssen Sie andernfalls false die Form der Rückkehr werden vorgelegt bekommen

 $(btnSubmit).click(function() { 
      $('#result').show(); 
      return false; //changed this to return false 
     }); 
+0

Danke für diese Jungs. Wirklich schätze es! – mallows98

1

Du einen Beitrag zurück zu tun, wenn Sie auf die Schaltfläche klicken und Ihren $ Ausführung ('# Ergebnisse) .Hide() nochmal ... Sie müssen event.preventDefault() in Ihrem Click-Handler ausführen, um den Post zurück zu verhindern.

Verwandte Themen