Effettuare una semplice chiamata Ajax al controller in asp.net mvc

109

Sto cercando di iniziare con le chiamate Ajax MVC ASP.NET.

controller:

public class AjaxTestController : Controller
{
    //
    // GET: /AjaxTest/
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult FirstAjax()
    {
        return Json("chamara", JsonRequestBehavior.AllowGet);
    }   
}

Visualizza:

<head runat="server">
    <title>FirstAjax</title>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var serviceURL = '/AjaxTest/FirstAjax';

            $.ajax({
                type: "POST",
                url: serviceURL,
                data: param = "",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: successFunc,
                error: errorFunc
            });

            function successFunc(data, status) {     
                alert(data);
            }

            function errorFunc() {
                alert('error');
            }
        });
    </script>
</head>

Devo solo stampare un avviso con il metodo del controller che restituisce i dati. Sopra il codice basta stampare "chamara" a mio avviso. Un avviso non viene attivato.

AGGIORNARE

Ho modificato il mio controller come di seguito e inizia a funzionare. Non ho un'idea chiara del perché funzioni ora. Qualcuno, per favore, spieghi. Il parametro "a" non è correlato l'ho aggiunto perché non posso aggiungere due metodi con lo stesso nome di metodo e parametri.Penso che questa potrebbe non essere la soluzione ma funziona

public class AjaxTestController : Controller
    {
        //
        // GET: /AjaxTest/
        [HttpGet]
        public ActionResult FirstAjax()
        {
            return View();
        }

        [HttpPost]
        public ActionResult FirstAjax(string a)
        {
            return Json("chamara", JsonRequestBehavior.AllowGet);
        }
    }

— Chamara
fonte

restituisce una stringa formattata json {"name":"chamara"}. quindi prova a leggere comedata['name']

— Raab

1

Rimuovi la seconda libreria jQuery dalla vista. Il tuo codice dovrebbe funzionare così com'è. Penso che potrebbe essersi verificato un errore di script che impedisce la visualizzazione dell'avviso.

— Terence

23

Dopo l'aggiornamento che hai fatto,

è la prima volta che chiama l'azione FirstAjax con la richiesta HttpGet predefinita ed esegue il rendering della vista Html vuota. (Prima non lo avevi)
in seguito, al caricamento degli elementi DOM di quella vista, la tua chiamata Ajax viene attivata e visualizza un avviso.

In precedenza stavi solo restituendo JSON al browser senza eseguire il rendering di alcun HTML. Ora ha una vista HTML renderizzata dove può ottenere i tuoi dati JSON.

Non è possibile eseguire il rendering diretto di JSON con i suoi dati semplici non HTML.

— ASB
fonte

52

Rimuovi l'attributo data poiché non sei POSTINGnulla per il server (il controller non si aspetta alcun parametro).

E nel tuo metodo AJAX puoi usare Razore usare @Url.Actionpiuttosto che una stringa statica:

$.ajax({
    url: '@Url.Action("FirstAjax", "AjaxTest")',
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: successFunc,
    error: errorFunc
});

Dal tuo aggiornamento:

$.ajax({
    type: "POST",
    url: '@Url.Action("FirstAjax", "AjaxTest")',
    contentType: "application/json; charset=utf-8",
    data: { a: "testing" },
    dataType: "json",
    success: function() { alert('Success'); },
    error: errorFunc
});

— Darren
fonte

3

@chamara - scusa, rimuovi HttpPost (non stai postando nulla sul server, quindi sarebbe un attributo ridondante) e il controller non verrebbe colpito. Rimuovi anche "type: POST" nella funzione AJAX poiché ti ho seminato.

— Darren

18

Usa un Razor per modificare dinamicamente il tuo URL chiamando la tua azione in questo modo:

$.ajax({
    type: "POST",
    url: '@Url.Action("ActionName", "ControllerName")',
    contentType: "application/json; charset=utf-8",
    data: { data: "yourdata" },
    dataType: "json",
    success: function(recData) { alert('Success'); },
    error: function() { alert('A error'); }
});

— gdmanandamohon
fonte

I parametri per Url.Action sono all'indietro in questa risposta, è Url.Action (actionName, controllerName)

— xd6_

1

Non sono un fan di questo, incoraggia l'accoppiamento della vista e del javascript, ma uh, il nome utente viene verificato?

— Halter

@Halter UX migliora notevolmente quando non costringi l'utente a reindirizzare su ogni azione. E ci sono molte cose che accadono sul lato client di cui il lato server non dovrebbe preoccuparsi.

— Kolob Canyon

@KolobCanyon hai ragione al 100%. Il mio commento si riferisce più al rendering dell'URL con il rasoio nel javascript, questo accoppia strettamente il tuo javascript con la vista (il cshtml). È una buona risposta, ma per correggere l'accoppiamento stretto potresti forse scaricare l'URL in un attributo di dati in chstml e leggerlo in javascript. Dispiace per la confusione!

— Halter

5

Per prima cosa non è necessario avere due diverse versioni delle librerie jquery in una pagina, "1.9.1" o "2.0.0" sono sufficienti per far funzionare le chiamate ajax ..

Ecco il codice del controller:

    public ActionResult Index()
    {
        return View();
    }

    public ActionResult FirstAjax(string a)
    {
        return Json("chamara", JsonRequestBehavior.AllowGet);
    }

Ecco come dovrebbe apparire la tua vista:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function () {
    var a = "Test";
    $.ajax({
        url: "../../Home/FirstAjax",
        type: "GET",
        data: { a : a },
        success: function (response) {
            alert(response);
        },
        error: function (response) {
            alert(response);
        }
    });
});
</script>

— Lokesh_Ram
fonte

5

Se devi solo premere il metodo C # nella tua chiamata Ajax, devi solo passare due tipi di argomento e l'URL se la tua richiesta viene ricevuta, devi solo specificare solo l'URL. per favore segui il codice qui sotto che funziona bene.

Codice C #:

    [HttpGet]
    public ActionResult FirstAjax()
    {
        return Json("chamara", JsonRequestBehavior.AllowGet);
    }

Codice Java Script se Ottieni richiesta

    $.ajax({
        url: 'home/FirstAjax',
        success: function(responce){ alert(responce.data)},
        error: function(responce){ alert(responce.data)}
    });

Codice Java Script se richiesta post e anche [HttpGet] in [HttpPost]

        $.ajax({
            url: 'home/FirstAjax',
            type:'POST',
            success: function(responce){ alert(responce)},
            error: function(responce){ alert(responce)}
        });

Nota: se si utilizza FirstAjax nello stesso controller in cui si trova il controller di visualizzazione, non è necessario il nome del controller nell'URL. piaceurl: 'FirstAjax',

— Muhammad Asad
fonte

4

È per la tua domanda di AGGIORNAMENTO.

Poiché non è possibile avere due metodi con lo stesso nome e firma, è necessario utilizzare l'attributo ActionName:

AGGIORNARE:

[HttpGet]
public ActionResult FirstAjax()
{
    Some Code--Some Code---Some Code
    return View();
}

[HttpPost]
[ActionName("FirstAjax")]
public ActionResult FirstAjaxPost()
{
    Some Code--Some Code---Some Code
    return View();
}

E fare riferimento a questo collegamento per ulteriori riferimenti su come un metodo diventa un'azione. Ottimo riferimento però.

— RGR
fonte

1

Visualizza;

 $.ajax({
        type: 'GET',
        cache: false,
        url: '/Login/Method',
        dataType: 'json',
        data: {  },
        error: function () {
        },
        success: function (result) {
            alert("success")
        }
    });

Metodo del controller;

 public JsonResult Method()
 {
   return Json(new JsonResult()
      {
         Data = "Result"
      }, JsonRequestBehavior.AllowGet);
 }

— oyenigun
fonte

0

invece di url: serviceURL, usare

url: '<%= serviceURL%>',

e stai passando 2 parametri a successFunc?

function successFunc(data)
 {
   alert(data);
 }

— swapneel
fonte

0

Aggiungi "JsonValueProviderFactory" in global.asax:

protected void Application_Start()
{
    AreaRegistration.RegisterAllAreas();
    ValueProviderFactories.Factories.Add(new JsonValueProviderFactory());
}

— Yashh
fonte

cos'è JsonValueProviderFactory?

— Kiquenet