JQuery AJAX with ASP.NET WebMethod、ページ全体をリフレッシュ

Question

Jquery Ajaxを使用して、フォーム内のLabelとListBoxの値を設定しています。私は値が関数によって適切に設定されていることを認識しています。しかし、その直後に、ページは単に以前に設定されたすべての値をクリアするようにリフレッシュします。なぜこうなった ？新しいJquery/Ajaxが登場しました。私はここに何かの基礎を欠いていますか？前もって感謝します。

Iamの貼り付けコード内のコード全体

 $(document).ready(function() { 
      $('#Button1').bind('click', function clk() { 
       $.ajax({ 
        type: "POST", 
        url: "WebForm5.aspx/TestMethod", 
        data: "{}", 
        contentType: "application/json; charset=utf-8", 
        dataType: "json", 
        success: function (result) { 
         alert(result.d.ListBox.length); 
         for (var i = 0; i < result.d.ListBox.length; i++) { 
          alert(result.d.ListBox[i]); 
          $(document.createElement("option")).attr("value", result.d.ListBox[i]).html(result.d.ListBox[i]) 
    .appendTo('#<%=ListBox1.ClientID %>'); 

          $('#Label1').text(result.d.MyProperty); 
         } 
        } 
       }); 
      }) 
     });     

Answer 1

Button1は、ボタンを提出されたASPのボタンです。あなたがそれをクリックすると、ページを提出し、ページ全体をリフレッシュします。ボタンreturn falseをクリックしてページを送信しないようにするには、それが機能します。

$('#Button1').bind('click', function clk() { 
       $.ajax({ 
        type: "POST", 
        url: "WebForm5.aspx/TestMethod", 
        data: "{}", 
        contentType: "application/json; charset=utf-8", 
        dataType: "json", 
        success: function (result) { 
         alert(result.d.ListBox.length); 
         for (var i = 0; i < result.d.ListBox.length; i++) { 
          alert(result.d.ListBox[i]); 
          $(document.createElement("option")).attr("value", result.d.ListBox[i]).html(result.d.ListBox[i]) 
    .appendTo('#<%=ListBox1.ClientID %>'); 

          $('#Label1').text(result.d.MyProperty); 
         } 
        } 
       }); 

    return false; 
      })