Les crashs dev d'un passionné

La gestion AJAX en ASP.net au premier abord n'est pas des plus évidente mais elle permet de s'affranchir, dans la plupart des cas simples, d'écrire du javascript car on le fait pour vous.
Avant cela il faut commencer par ajouter ScriptManager dans une balise form.

<form id="form" runat="server">
 <asp:ScriptManager ID="ScriptManagerHome" runat="server"></asp:ScriptManager>
</form>

Ce controle permet de

• gérer les librairies de scripts AJAX ASP.net
• faire du rendu des pages partielles
• passer par une classe proxy javascript pour utiliser les Web Services

En faite ce controle permet de faire de l'AJAX dans sa page ASP. Il pose les bases et fait un lien avec le Framework AJAX ASP.net

La deuxième étape est d'insérer un controle UpdatePanel à l'endroit où les données vont être mises à jour. C'est un controle qui permet de mettre à jour des vues partielles.

Il est possible de créer :

• ContentTemplate : définit le contenu à mettre à jour
  

  <asp:UpdatePanel ID="UpdatePanel" runat="server" >
   <ContentTemplate>
    <asp:Button ID="button" Text="Get date" runat="server" OnClick="getDatetime" />
    <asp:Label ID="label" runat="server" />
   </ContentTemplate>
  </asp:UpdatePanel>

  Il faut penser à mettre le Label dans UpdatePanel sinon la mise à jour ne sera pas faite, et placer le button à l'intérieur de UpdatePanel autrement à chaque clic la page sera soumise automatiquement.
• Trigger : définit la manière dont les données vont être mises à jour
  

  <asp:UpdatePanel ID="UpdatePanel" runat="server" UpdateMode="Conditional">
   <ContentTemplate>
    <asp:Label ID="label" runat="server" />
   </ContentTemplate>
   <Triggers>
    <asp:AsyncPostBackTrigger ControlID="button" EventName="Click" />
   </Triggers>
  </asp:UpdatePanel>

  Dans cet UpdatePanel, grâce au Trigger la mise à jour du Label dépend d'un évènement EventName du contrôle ControlID. Tout ceci est vrai tant que le mode UpdateMode vaut Conditional dans l'UpdatePanel.

Pour réaliser cette mise à jour des champs cachés sont rajoutés avec notamment __VIEWSTATE.
Attention __VIEWSTATE contient toutes les données de ce controle UpdatePanel. Il faut donc veiller à ne pas le surcharger de données inutiles. Plutot décomposer en plusieurs UpdatePanel pour découper les échanges client/serveur.
Afin d'alléger la requête mettez ChildrenAsTriggers à false (avec UpdateMode à Conditional), cela signifie que cet UpdatePanel ne sera pas rafraichit. Seul le Label labelOutside se verra mis à jour.

<script runat="server">
    protected void getDatetime(object sender, EventArgs e)
    {
        labelInside.Text = DateTime.Now.ToString();
        labelOutside.Text = DateTime.Now.ToString();
    }

</script>
<form id="form" runat="server">
      
 <asp:ScriptManager ID="ScriptManagerHome" runat="server"></asp:ScriptManager>

 <asp:UpdatePanel runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
  <ContentTemplate>
   <asp:Button ID="button" Text="Get date" runat="server" OnClick="getDatetime" />
   <asp:Label ID="labelInside" runat="server" />
  </ContentTemplate>
 </asp:UpdatePanel>

 <asp:UpdatePanel runat="server" >
  <ContentTemplate>
   <asp:Label ID="labelOutside" runat="server" />
  </ContentTemplate>
 </asp:UpdatePanel>

</form>

Chaque controle possède une méthode Javascript _doPostBack() qui lance PostBack permettant d'envoyer les données au serveur. Pour cela 2 champs cachés sont ajoutés __EVENTTARGET et __EVENTARGUMENT :

• Identifiant du controle qui a levé l'évènement
• des informations supplémentaires

Si AutoPostBack est à True la méthode _doPostBack() est automatiquement connectée au contrôle. Cela permet de soumettre automatiquement le formulaire sur un évènement de cet élement.
C'est un point essentiel pour pouvoir faire de l'AJAX en ASP.net 
Comme le montre le code source suivant, l'attribut AutoPostBack à true a bien généré notre script de mise à jour sur les évènements de notre Select

<select name="ctl00$Home$drop1"
onchange="javascript:setTimeout('__doPostBack(\'ctl00$Home$drop1\',\'\')', 0)" id="Home_drop1">

Vous aurez remarqué, à aucun moment nous n'écrions du javascript puisque c'est la librairie ASP.NET AJAX qui le fait à notre place. Néanmoins vous pouvez utiliser les évènements natifs de javascript pour lancer vos scripts

<script>
  function onJsChange() { alert("Pure JS event"); }
</script>

<asp:UpdatePanel ID="UpdatePanel" runat="server" >
 <ContentTemplate>
  <asp:TextBox ID="address" runat="server" AutoPostBack="true" onchange="onJsChange()"/>
 </ContentTemplate>
</asp:UpdatePanel>

La version équivalente ASP.NET est la suivante

<script runat="server">
 protected void OnChangeTextAddress(object sender, EventArgs e)
 {
  ((TextBox)sender).BorderColor = System.Drawing.Color.Red;
 }
</script>

<asp:UpdatePanel ID="UpdatePanel" runat="server" >
 <ContentTemplate>
  <asp:TextBox runat="server" AutoPostBack="true" OnTextChanged="OnChangeTextAddress" />
 </ContentTemplate>
</asp:UpdatePanel>

Un point à prendre en considération est le cycle de vie lors d'un PostBack  

(Source : http://msdn.microsoft.com/en-us/library/ms178472.aspx)

Que ce soit pour un partial ou regular PostBack le controle initialise à nouveau les évènements de la page entière. Il est donc intéressant de conditionner les actions des UpdatePanel avec IsPostBack ou IsInAsyncPostBack pour éviter de recharger les actions de la page si on est sur un PostBack.

protected void Page_PreInit(object sender, EventArgs e)
{
        if (IsPostBack)
        {
        }
}

Lorsqu'un évènement sur un élement est lancé, c'est la méthode UpdatePanel_PreRender qui est executée. Il faut donc penser à faire les actions liées à cet UpdatePanel dans cette méthode plutôt que dans PreRender

protected void UpdatePanelIP_PreRender(object sender, EventArgs e)
{
  // Executé par __doPostBack('UpdatePanelIP', '')
  if (Request["__EVENTTARGET"] == UpdatePanelIP.ClientID)
  {
    // Code pour mise à jour du controle
  }
}

Voilà vous avez maintenant les bases pour appréhender l'AJAX sur ASP.net, amusez vous bien !