DropDownList a cascata con sorgente dati da web service usando ASP.NET AJAX 1.0

di Cristian Civera, in ASP.NET 2.0, ATLAS, AJAX,

Il nuovo framework ASP.NET AJAX, che si affianca ad ASP.NET 2.0, è composto da una parte server e da una client.

Quest'ultima è costituita da una serie di script JavaScript che facilitano le operazioni più comuni di interazione con il DOM e una serie di prototype per simulare namespace, classi, polimorfismo ed ereditarietà.
Sulla base di questa funzionalità, le ASP.NET AJAX 1.0 Extensions permettono di creare in modo automatico una classe proxy JavaScript su un qualsiasi web service .asmx, definito all'interno della medesima applicazione.

Quando si crea una nuovo sito web di tipo AJAX, il web.config è già configurato per supportare questa funzionalità mediante un modulo di nome ScriptModule.

E' sufficiente, all'interno della pagina nella quale si intende usare il web service, dichiarare attraverso l'oggetto ScriptManager il path al file .asmx che si intende utilizzare. In alternativa è possibile usare metodi statici della stessa pagina impostando l'attributo EnablePageMethods dell'oggetto ScriptManager su true.

<asp:ScriptManager ID="scriptManager" runat="server" EnablePageMethods="true">
  <Services>
    <!-- ASMX esterni -->
    <asp:ServiceReference Path="~/Cities.asmx" />
 </Services>
 <Scripts>
   <asp:ScriptReference Path="DDL.js" />
 </Scripts>
</asp:ScriptManager>

Nel codice basta poi dichiarare i metodi statici che si vogliono rendere invocabili da JavaScript e marcarli con l'attributo WebMethod.

[WebMethod()]
[ScriptMethod(ResponseFormat=ResponseFormat.Json)] // Default
public static City[] GetCities(string idRegion)
{
  ...
}

Nell'esempio l'attributo ScriptMethod è facoltativo e permette di gestire la serializzazione, che oltre ad essere XML, usata via SOAP, può essere JSon, più compatta.
Ora la pagina dispone di un metodo JavaScript GetCities, contenuto nella classe PageMethods, che chiama in modo asincrono il servizio.
Inoltre, poiché il metodo restituisce il tipo personalizzato City, composto dalle proprietà Id e Name, la risposta ottenuta dal servizio è un array di object JavaScript che dispone delle proprietà con i medesimi nomi del tipo definito in .NET.

Di seguito uno stralcio dell'esempio allegato a questo script che mostra come richiamare il WebService. Gli ultimi due parametri permettono sempre di indicare i metodi da invocare quando la chiamata ha avuto successo o in caso di fallimento:

function LoadCities(id)
{
  var citiesList = $get('citiesList');
  // Chiamo il WS
  PageMethods.GetCities(id, OnSucceeded, OnFail);
}

function OnSucceeded(result)
{
  // Array di City -> Name e Id
  alert(result[0].Name);
}

function OnFail(fail)
{
  alert(fail.get_message());
}

L'allegato contiene un esempio completo di due DropDownList, la seconda della quale (città) varia il contenuto in funzione della prima (regione). Ad ogni cambio di selezione viene invocato il web service per ottenere la lista delle città data la regione selezionata, il tutto senza causare il refresh dell'intera pagina.

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi