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
Creare alias per tipi generici e tuple in C#
Effettuare il deploy di immagini solo da container registry approvati in Kubernetes
C# 12: Cosa c'è di nuovo e interessante
Sfruttare MQTT in cloud e in edge con Azure Event Grid
Load test di ASP.NET Core con k6
Utilizzare Model as a Service su Microsoft Azure
Cache policy su route groups di Minimal API in ASP.NET Core 7
Ottimizzare il mapping di liste di tipi semplici con Entity Framework Core
Creare form tipizzati con Angular
Verificare la provenienza di un commit tramite le GitHub Actions
Creazione di plugin per Tailwind CSS: espandere le Funzionalità del Framework
Taggare la output cache in base al routing in ASP.NET Core