Post The Data To ASP.NET MVC Controller Using JQuery Ajax
Post The Data To ASP.NET MVC Controller Using JQuery Ajax

Come inviare dati a un controller ASP.NET MVC con AJAX

Programmazione - Javascript Visite: 3891

Vediamo oggi come fare una chiamata Ajax da una vista ASP NET, passare la chiamata ad un controller MVC ed elaborare il risultato.

Una chiamata di questo tipo è utilissima se ad esempio si vuole inserire loggare determinate operazioni utente. 

Nella vista quando si vuole effettuare la chiamata alla funzione Ajax si invoca semplicemente:

 

<script type="text/javascript">
    window.MyAjaxFunction("Start");
</script>

 

In questo caso stiamo invocando la funzione javascript MyAjaxFunction().

Cosa fa questa funzione? Vediamola:

 

<script type="text/javascript">

    function MyAjaxFunction(message) {
        var request = $.ajax(
            {
                url: "/MyProcess/MyAjaxFunction",
                type: "POST",
                method: "POST",
                dataType: "json",

                contentType: 'application/json; charset=utf-8',

                async: false, //Necessario in casi specifici
                cache: false,
                data: {
                    message: message
                }
            });

        request.done(function (msg) { 
            //todo
        });
        request.fail(function(jqXHR, textStatus) {
            //todo
        });
    }
    
</script>

 

Ovvero abbiamo definito una funzione MyAjaxFunction() che riceve una stringa in ingresso chiamata "message".

Questa funzione, sfruttando le potenzialità Ajax di JQuery, effettua una chiamata ad un controller specificato nel campo URL, utilizzando il metodo POST definito nei parametri TYPE e METHOD (conviene metterli entrambi), il formato della chiamata lo si indica nel parametro DATATYPE (qui è di tipo JSON), non si abilita la CACHE. Il parametro "message" lo si passa nel parametro DATA.

 

La documentazione della chiamata Ajax, fatta con JQuery, la potete trovare qui:

JQuery Doc Ajax Call

 

In request.done() si può gestire il risultato che arriverà dal controller.

In request.fail() si può gestire il caso di errore.

Vediamo ora come è fatto il nostro controller.

 

[HttpPost]
[ActionName("MyAjaxFunction")]
public ActionResult MyAjaxFunction(String message)
{
    try
    {
        //process your message data             
    }
    catch (Exception)
    {
    }
    return Json(new { Status = "OK" });
}

 

Questa funzione verrà invocata dalla nostra chiamata Ajax javascript e restituisce un JSON come risultato.

In questo caso restituisce sempre "OK"!

Buon lavoro!