Pourquoi cet appel JQuery à asp.net pagemethod charge-t-il toute la page?

Question

Voici un extrait de mon html:

<input id="btnGetDate" type="submit" value="Get Date" /> 
    <div id="Result"></div> 

<script type="text/javascript"> 

    $(document).ready(function() { 

     $("#btnGetDate").click(function() { 
      $.ajax({ 
       type: "POST", 
       url: "Date.aspx/GetDate", 
       data: "{}", 
       contentType: "application/json; charset=utf-8", 
       dataType: "json", 
       success: function(msg) { 
        $("#Result").text(msg.d); 
       } 
      }); 
     }); 
    }); 

</script> 

Ma page id Méthode définie comme suit:

[System.Web.Services.WebMethod] 
    public static string GetDate() 
    { 
     return DateTime.Now.ToString(); 
    } 

Lorsque je clique sur le bouton Get Date, j'ai vu le flash de date à l'écran pour une en second lieu, mais puisque la page entière est en train de se charger, elle disparaît et quand je la vois dans firebug, je vois qu'elle fait le POST, mais disparaît rapidement. Des idées sur la façon de résoudre ce problème?

Answer 1

essayer de retourner faux de votre gestionnaire d'événements $("#btnGetDate").click():

$("#btnGetDate").click(function() { 
     $.ajax({ 
      type: "POST", 
      url: "Date.aspx/GetDate", 
      data: "{}", 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      success: function(msg) { 
       $("#Result").text(msg.d); 
      } 
     }); 
     return false; 
    }); 

Answer 2

solution de karim79 fera le travail dans Internet Explorer - mais assurez-vous que cela fonctionne dans Firefox et les autres navigateurs aussi bien, vous voulez probablement pour ajouter un argument d'entrée au gestionnaire de clic qui prendra l'événement click et arrêter l'événement.

$("#btnGetDate").click(function(ev) { 
    ev.stopPropagation(); 
    $.ajax({ 
     type: "POST", 
     url: "Date.aspx/GetDate", 
     data: "{}", 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     success: function(msg) { 
      $("#Result").text(msg.d); 
     } 
    }); 
    return false; 
});