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
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Raggruppare i parametri di una minimal API in un singolo oggetto in ASP.NET Core
Cache policy su route groups di Minimal API in ASP.NET Core 7
Utilizzare parametri a livello di controller nel routing di ASP.NET Core
Effettuare il deploy di immagini solo da container registry approvati in Kubernetes
Gestire la query string nell'output cache di ASP.NET Core
Gestire dati sensibili nella configurazione in ASP.NET Core
Migrare un progetto ASP.NET Core da .NET 6 a .NET 7
Definire la durata dell'output cache in ASP.NET Core 7
Consumare un endpoint generico in Blazor
Usare ASP.NET Core dev tunnels per testare le applicazioni su internet
Migliorare la scalabilità di ASP.NET Core 7 grazie all'output cache
Gestire tipi complessi in query string grazie a IParsable in ASP.NET Core 7.0
I più letti di oggi
- Usare le variabili per personalizzare gli stili CSS
- Effettuare lo stream della risposta in ASP.NET Core tramite IAsyncEnumerable
- Utilizzare gli asynchronous stream in Entity Framework Core 3
- Le novità di Entity Framework (Core) 7
- Gestire condizioni complesse in JavaScript
- Sottoscrizione agli eventi sul contenitore in JavaScript
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!