121 votes

Faire un appel Ajax simple au contrôleur dans asp.net mvc

J'essaie de me lancer dans les appels Ajax en ASP.NET MVC.

Contrôleur :

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

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

Voir :

<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>

J'ai juste besoin d'imprimer une alerte avec la méthode du contrôleur qui renvoie des données. Le code ci-dessus ne fait qu'imprimer "chamara" sur ma vue. Une alerte n'est pas déclenchée.

UPDATE

J'ai modifié mon contrôleur comme ci-dessous et il a commencé à fonctionner. Je n'ai pas une idée claire de la raison pour laquelle il fonctionne maintenant. Quelqu'un peut m'expliquer. Le paramètre "a" n'est pas lié, je l'ai ajouté parce que je ne peux pas ajouter deux méthodes avec le même nom de méthode et les mêmes paramètres.

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

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

55voto

Darren Davies Points 29038

Supprimez l'attribut de données car vous n'êtes pas POSTING rien au serveur (Votre contrôleur n'attend aucun paramètre).

Et dans votre méthode AJAX, vous pouvez utiliser Razor et utiliser @Url.Action plutôt qu'une chaîne statique :

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

De votre mise à jour :

$.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
});

25voto

asb Points 116

Après la mise à jour que vous avez faite,

  1. elle appelle d'abord l'action FirstAjax avec la requête HttpGet par défaut et rend la vue Html vide. (Plus tôt, vous ne l'aviez pas).
  2. Plus tard, lors du chargement des éléments DOM de cette vue, votre appel Ajax est déclenché et affiche une alerte.

Auparavant, vous ne faisiez que renvoyer JSON au navigateur sans rendre aucun HTML. Maintenant, il a une vue HTML rendue où il peut obtenir vos données JSON.

Vous ne pouvez pas rendre directement le JSON, ce sont des données simples, pas du HTML.

21voto

gdmanandamohon Points 1189

Utilisez un rasoir pour modifier dynamiquement votre URL en appelant votre action comme ceci :

$.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'); }
});

10voto

Hafiz Asad Points 129

Si vous avez juste besoin de frapper la méthode C# sur dans votre appel Ajax vous avez juste besoin de passer deux questions type et url si votre demande est get alors vous avez juste besoin de spécifier l'url seulement. s'il vous plaît suivez le code ci-dessous il fonctionne bien.

Code C# :

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

Code Java script si demande Get

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

Code Java script si demande post et aussi [HttpGet] à [HttpPost].

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

Note : Si vous utilisez FirstAjax dans le même contrôleur que votre contrôleur de vue, il n'est pas nécessaire d'indiquer le nom du contrôleur dans l'URL. url: 'FirstAjax',

5voto

Lokesh_Ram Points 361

Tout d'abord, il n'est pas nécessaire d'avoir deux versions différentes des bibliothèques jquery dans une page, soit "1.9.1" ou "2.0.0" est suffisant pour faire fonctionner les appels ajax .

Voici le code de votre contrôleur :

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

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

Voici à quoi devrait ressembler votre vue :

<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>

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X