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

J'essaie de commencer avec ASP.NET appels MVC Ajax.

Contrôleur:

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. Code ci-dessus juste imprimer "chamara" sur mon point de vue. Une Alerte ne tire pas.

Mise à jour

J'ai modifié mon contrôleur comme ci-dessous et il commence à fonctionner. Je n'ai pas une idée claire pourquoi ça marche maintenant. Quelques un s'il vous plaît expliquer. Le paramètre " a " ne concerne pas i ajouté parce que je ne peux pas ajouter deux méthodes avec le même nom de méthode et les paramètres.Je pense que ce n'est peut-être pas la solution mais son fonctionnement

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

        [HttpPost]
        public ActionResult FirstAjax(string a)
        {
            return Json("chamara", JsonRequestBehavior.AllowGet);
        }
    }
85
demandé sur Hakam Fostok 2013-04-24 11:34:36

9 réponses

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

  1. son premier appel de 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.

Plus tôt, vous ne retourniez JSON au navigateur sans rendre de HTML. Maintenant, il a une vue HTML rendue où il peut obtenir vos données JSON.

Vous ne pouvez pas rendre directement JSON its données simples Pas HTML.

18
répondu asb 2013-04-25 06:12:55

Supprimez l'attribut data car vous n'êtes rien POSTING 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
});
43
répondu Darren 2015-02-20 05:23:28

Utilisez un rasoir pour changer 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'); }
});
8
répondu gdmanandamohon 2017-10-02 11:43:38

C'est pour votre question de mise à jour.

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:

Mise à 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 vous référer à ce lien pour plus de référence sur la façon dont une méthode devient une action. Très bonne référence cependant.

4
répondu RGR 2013-04-25 09:34:51

Première chose 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 comment votre vue devrait ressembler:

<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>
3
répondu Lokesh_Ram 2016-05-06 08:22:16

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

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


 Java Script Code if Get Request
    $.ajax({
        url: 'home/FirstAjax',
        success: function(responce){ alert(responce.data)},
        error: function(responce){ alert(responce.data)}
    });



 Java Script Code if Post Request and also [HttpGet] to [HttpPost]
        $.ajax({
            url: 'home/FirstAjax',
            type:'POST',
            success: function(responce){ alert(responce)},
            error: function(responce){ alert(responce)}
        });

Note: Si vous FirstAjax dans le même contrôleur dans lequel votre contrôleur de vue alors pas besoin de nom de contrôleur dans l'url. comme url: 'FirstAjax',

2
répondu Hafiz Asad 2016-12-22 09:34:14

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);
 }
1
répondu oyenigun 2016-12-22 06:01:21

Au Lieu de url: serviceURL, utiliser

url: '<%= serviceURL%>',

Et passez-vous 2 paramètres à successFunc?

function successFunc(data)
 {
   alert(data);
 }
0
répondu swapneel 2013-04-24 07:55:22

Ajoutez "JsonValueProviderFactory" dans global.asax:

protected void Application_Start()
{
    AreaRegistration.RegisterAllAreas();
    ValueProviderFactories.Factories.Add(new JsonValueProviderFactory());
}
0
répondu Yashh 2013-04-24 09:07:06