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
Eseguire script pre e post esecuzione di un workflow di GitHub
Fornire parametri ad un Web component HTML
Integrare un servizio esterno con .NET Aspire
Gestione degli eventi nei Web component HTML
Gestire il routing HTTP in Azure Container App
La gestione della riconnessione al server di Blazor in .NET 9
Utilizzare il metodo IntersectBy per eseguire l'intersection di due liste
Eliminare una project wiki di Azure DevOps
Usare i servizi di Azure OpenAI e ChatGPT in ASP.NET Core con Semantic Kernel
Utilizzare il metodo ExceptBy per eseguire operazione di sottrazione tra liste
Gestione dei nomi con le regole @layer in CSS
Utilizzare l nesting nativo dei CSS