Come sappiamo, ASP.NET MVC mette a disposizione una serie di html helper tramite aggiungere funzionalità Ajax alle nostre pagine. In particolare, Ajax.BeginForm ci consente di realizzare una form il cui contenuto, alla pressione del pulsante submit, verrà inviato tramite una chiamata asincrona.
@using (Ajax.BeginForm(...)) { <div> ... Contenuto della form qui ... </div> }
Per quanto ci riguarda, il tutto funziona in maniera trasparente grazie agli script di unobtrusive-ajax inclusi nel template di progetto di Visual Studio, senza che dobbiamo scrivere altro codice; eppure esistono dei casi in cui è necessario gestire manualmente l'invio del form. Immaginiamo, per esempio, di aver predisposto una form di ricerca, che consenta di visualizzare su schermo i risultati o di esportarli in formato PDF.
@model SearchFormViewModel @using (Ajax.BeginForm(...)) { <div>Nome: @Html.EditorFor(x => x.Name)</div> <div>Età: @Html.EditorFor(x => x.Age)</div> <input type="submit" value="Cerca" /> @Html.ActionLink("Esporta in PDF", "ExportToPdf", new { @class="export" }) }
Nel caso in cui l'utente effettui il submit per ricercare i risultati, il funzionamento Ajax compie egregiamente il suo dovere, e il contenuto della form potrà essere recuperato lato server direttamente all'interno della classe SearchFormViewModel.
public ActionResult Search(SearchFormViewModel model) { // .. codice qui .. return this.PartialView(...); }
Per quanto riguarda il link "Esporta in PDF", invece, il problema è leggermente più complesso: esso, infatti, rimanda alla action ExportToPdf che, verosimilmente, restituirà un contenuto di tipo File. Purtroppo, questo tipo di chiamate non possono essere effettuate tramite Ajax, perché il browser non consente il salvataggio di contenuti ricevuti tramite XmlHttpRequest. Per far sì che possa essere inviato anche il contenuto della form, è sufficiente un piccolo script jQuery:
$(function() { $('.export').click(function (e) { e.preventDefault(); var linkUrl = $(this).attr('href'); var queryString = $('form').serialize(); window.location = linkUrl + '?' + queryString; }); });
Al click dell'utente sul link in questione, tramite il codice in alto recuperiamo per prima cosa l'url del link, mentre possiamo determinare il contenuto da aggiungere come query string semplicemente sfruttando la funzione serialize() di jQuery. A questo punto non ci resta che realizzare la nostra action, che potrà sfruttare comunque lo stesso view model visto in precedenza:
public ActionResult ExportToPdf(SearchFormViewModel model) { // .. codice qui .. return this.File(...); }
Sarà infatti il model binder di ASP.NET MVC a recuperare dalla query string tutte le informazioni e a costruire un'istanza valida di SearchFormViewModel.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Estensioni personalizzate per le pipeline di Azure DevOps e GitHub con .NET 5
Condividere una variabile tra stage in una pipeline YAML di Azure DevOps
Effettuare il tracing asincrono delle chiamate a un'applicazione ASP.NET Core
Comunicazione realtime tra ASP.NET Core e Javascript con GraphQL
Rigenerare il database negli integration test di ASP.NET Core
Migliorare la nostra produttività con ASP.NET Core e live reload
Avviare una registrazione audio e video in una applicazione della Universal Windows Platform
Gestire gli app role di Azure Active Directory
Ricevere notifiche push sull'app con Azure Monitor
Progressive Web Apps with Blazor and Azure
Versioning automatico degli Azure Storage Blob
Abilitare Hot Module Replacement in Angular