Utiliser l'Auto-Postback avec le contrôle CascadingDropDown

Cet article est la traduction la plus fidèle possible de l'article original de Christian Wenz: Using Auto-Postback with CascadingDropDown

Le contrôle CascadingDropDown de l'AJAX Control Toolkit étend le contrôle DropDownList afin que des changements faits dans une DropDownList chargent des valeurs associées dans une autre DropDownList. Cependant lors de l'utilisation du contrôle CascadingDropDown, la fonctionnalité d'AutoPostBack de la DropDownList d'ASP.NET ne fonctionne pas, puisque le chargement de données en mode asynchrone dans la liste génère un (inutile) postback lui-même. Avec un peu de code JavaScript, cet effet peut être évité.

Afin d'activer les fonctionnalités d'ASP.NET AJAX et du Control Toolkit, le contrôle ScriptManager doit être mis n'importe où sur la page (mais au sein de la balise <form>) :

<asp:ScriptManager ID="asm" runat="server" />

Ensuite, un contrôle DropDownList est nécessaire:

<div>
	Vendor: <asp:DropDownList ID="VendorsList" runat="server"/>
</div>

Pour cette liste, un extender CascadingDropDown est ajouté, en lui fournissant une URL de service web et le nom de la méthode :

<ajaxToolkit:CascadingDropDown ID="ccd1" runat="server"
	ServicePath="CascadingDropdown3.cs.asmx" ServiceMethod="GetVendors"
	TargetControlID="VendorsList" Category="Vendor" />

L'extender CascadingDropDown appelle ensuite de manière asynchrone un service web avec la signature de méthode suivante :

public CascadingDropDownNameValue[] MethodNameHere(string knownCategoryValues, string category)

La méthode renvoie un tableau de type CascadingDropDown. Le constructeur attend en premier le texte de l'entrée de la liste et sa valeur (attribut HTML value).

<%@ WebService Language="C#" Class="CascadingDropdown3" %>
using System.Web.Script.Services;
using AjaxControlToolkit;
using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Collections.Generic;

[ScriptService]
public class CascadingDropdown3 : System.Web.Services.WebService
{
	[WebMethod]
	public CascadingDropDownNameValue[] GetVendors(string knownCategoryValues, string category)
	{
		List<CascadingDropDownNameValue> l = new List<CascadingDropDownNameValue>();
		l.Add(new CascadingDropDownNameValue("International", "1"));
		l.Add(new CascadingDropDownNameValue("Electronic Bike Repairs & Supplies", "2"));
		l.Add(new CascadingDropDownNameValue("Premier Sport, Inc.", "3"));
		return l.ToArray();
	}
}

Le fait de charger la page dans le navigateur va remplir la liste déroulante avec trois vendeurs, la seconde étant présélectionnée. En outre, ASP.NET définit la méthode JavaScript __doPostBack(). Une fois que la page a été chargée, cet appel JavaScript est ajouté à la liste déroulante, mais seulement si elle est composée d'éléments . S'il n'y a pas d'éléments dans la liste, c'est que le Control Toolkit est actuellement en train de les charger. Le code JavaScript utilise alors un timeout et tente à nouveau une demi-seconde plus tard.

<script type="text/javascript">
function pageLoad()
{
	addAutoPostBack();
}
function addAutoPostBack()
{
	if ($get("VendorsList").options.length > 0)
	{
		$get("VendorsList").setAttribute("onchange",
			"javascript:setTimeout('__doPostBack(\\'VendorsList\\',\\'\\')', 0)");
	}
	else
	{
		setTimeout("addAutoPostBack()", 500);
	}
}
</script>

De cette façon, un postback est exécuté uniquement quand il y a effectivement des éléments dans la liste et que l'utilisateur sélectionne un élément de cette liste.