2010-12-06 24 views
0

私はasp.netで面白い動作を見つけました。asp.net postbackとjavascript/jquery

私は最初に読み込まれたときに隠されたフィールドセットと送信ボタンがあるフォームを持っています。

私が期待しているのは、ユーザーが送信ボタンをクリックすると、フィールドセットが表示されるということです。問題は、送信ボタンをクリックしようとすると、fieldset要素が表示されますが、すぐには消えてしまうことです。

私のコードのどこが間違っているのか正しい方向に向けることができれば可能でしょうか?以下の私のコードを見てください。

ありがとうございます!

乾杯、 アン

<%@ 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> 

答えて

4

デフォルトボタンの動作は、(再び<fieldset>を隠す)リフレッシュするために提出する<form>し、あなたのページを引き起こし、ここで蹴っています。あなたはこのように、event.preventDefault()またはreturn falseとそのデフォルトの動作を阻止する必要があります。

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

event.preventDefault()がちょうどreturn falseとしてそのトラックで死んでイベントを殺す提出を防ぐことができます...ので、私は本当にやり過ぎここreturn falseを検討してください。後で潜在的に望ましくない問題を引き起こす可能性のあるものを上回るものではありません(たとえば、イベントを抹消した場合などは、.live()/.delegate()ハンドラは機能しません)。

+0

このNickに感謝します。これは私が後にしたものです。 – mallows98

+0

@ mallows98 - ウェルカム: –

1

あなたは「偽を返す」ことを望みます。ボタンが実際のポストバックを発生させないようにするためにtrueの代わりに使用します。私はあなたが望むものがクライアント側のアクションだと推測しているので、falseを返します。そうでない場合は、フォームはあなたがボタンをクリックしたときにポストバックをやって、そしてあなたの$( '#結果).hideを実行している

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

()を再度クリックすると、ポストバックを防ぐためにclickハンドラ内でevent.preventDefault()を実行する必要があります。

+0

この人に感謝します。本当に感謝しています! – mallows98

1

を提出してしまいますあなたはfalseを返すする必要がボタン機能で

関連する問題