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

109

J'essaie de démarrer avec les appels ASP.NET MVC Ajax.

Manette:

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

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

Vue:

<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 renvoyant des données. Au-dessus du code, imprimez simplement "chamara" à mon avis. Une alerte ne se déclenche pas.

METTRE À JOUR

J'ai modifié mon contrôleur comme ci-dessous et il commence à fonctionner. Je n'ai pas une idée claire de la raison pour laquelle cela fonctionne maintenant. Quelqu'un s'il vous plaît expliquer. Le paramètre "a" n'est pas lié je l'ai ajouté car je ne peux pas ajouter deux méthodes avec le même nom de méthode et les mêmes paramètres.Je pense que ce n'est peut-être pas la solution mais ça fonctionne

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

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

— Chamara
source

retourne une chaîne formatée json {"name":"chamara"}. puis essayez de lire commedata['name']

— Raab

1

Supprimez la deuxième bibliothèque jQuery de la vue. Votre code doit fonctionner tel quel. Je pense qu'une erreur de script peut se produire et empêcher l'alerte de s'afficher.

— Terence

23

Après la mise à jour que vous avez effectuée,

son premier appel à l'action FirstAjax avec la demande HttpGet par défaut et rend la vue Html vide. (Plus tôt vous ne l'aviez pas)
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 renvoyiez que JSON au navigateur sans afficher de code HTML. Maintenant, il a une vue HTML rendue où il peut obtenir vos données JSON.

Vous ne pouvez pas rendre directement JSON ses données simples et non HTML.

— asb
source

52

Supprimez l'attribut de données car vous n'êtes POSTINGrien pour le serveur (votre contrôleur n'attend aucun paramètre).

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

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

Depuis 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
});

— Darren
source

3

@chamara - désolé, supprimez HttpPost (vous ne publiez rien sur le serveur, ce serait donc un attribut redondant) et le contrôleur ne serait pas touché. Supprimez également "type: POST" dans la fonction AJAX comme je vous l'ai semé.

— Darren

18

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

— gdmanandamohon
source

Les paramètres pour Url.Action sont à l'envers dans cette réponse, c'est Url.Action (actionName, controllerName)

— xd6_

1

Pas fan de ça, ça encourage le couplage de la vue et du javascript, mais euh, le nom d'utilisateur vérifie?

— Halter

@Halter UX s'améliore énormément lorsque vous ne forcez pas l'utilisateur à rediriger à chaque action. Et il y a beaucoup de choses qui se produisent du côté client dont le côté serveur ne devrait pas se soucier.

— Kolob Canyon

@KolobCanyon vous avez raison à 100%. Mon commentaire fait plus référence au rendu de l'url avec rasoir dans le javascript, cela couple étroitement votre javascript avec la vue (le cshtml). C'est une bonne réponse, mais pour corriger le couplage étroit, vous pouvez peut-être vider l'url dans un attribut de données dans le chstml et le lire dans le javascript. Désolé pour la confusion!

— Halter

5

Premièrement, 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 votre code de 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>

— Lokesh_Ram
source

5

Si vous avez juste besoin d'appuyer sur la méthode C # dans votre appel Ajax, il vous suffit de passer deux types de sujets et une URL si votre requête est obtenue, il vous suffit de spécifier l'URL uniquement. veuillez suivre le code ci-dessous, cela fonctionne bien.

Code C #:

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

Code de script Java si Get Request

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

Code Java Script si Post Request et aussi [HttpGet] vers [HttpPost]

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

Remarque: Si vous FirstAjax dans le même contrôleur dans lequel votre View Controller, vous n'avez pas besoin du nom du contrôleur dans l'URL. commeurl: 'FirstAjax',

— Muhammad Asad
source

4

C'est pour votre question UPDATE.

Comme vous ne pouvez pas avoir deux méthodes avec le même nom et la même signature, vous devez utiliser l'attribut ActionName:

METTRE À JOUR:

[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();
}

Et veuillez consulter ce lien pour plus d'informations sur la façon dont une méthode devient une action. Très bonne référence cependant.

— RGR
source

1

Vue;

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

Méthode du contrôleur;

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

— oyenigun
source

0

au lieu d' url: serviceURL, utiliser

url: '<%= serviceURL%>',

et passez-vous 2 paramètres à successFunc?

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

— swapneel
source

0

Ajoutez «JsonValueProviderFactory» dans global.asax:

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

— Yashh
source

qu'est-ce que JsonValueProviderFactory?

— Kiquenet