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

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",
                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!

Il nostro sito utilizza i cookie

Usando il sito accetti implicitamente il loro uso. Per saperne di piu'

Approvo

Per ulteriori informazioni leggi il seguente articolo Privacy e Cookies