web-dev-qa-db-fra.com

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

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

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 renvoyant des données. Le code ci-dessus vient d’imprimer "chamara" de mon point de vue. Une alerte ne se déclenche pas.

UPDATE

J'ai modifié mon contrôleur comme ci-dessous et il commence à fonctionner. Je ne sais pas pourquoi ça marche maintenant. Quelqu'un s'il vous plaît expliquer. Le paramètre "a" ne concerne pas 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 cela pourrait ne pas être 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);
        }
    }
c#jqueryasp.netasp.net-mvcasp.net-mvc-2
103
chamara

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

  1. son premier appel de l'action FirstAjax avec la demande HttpGet par défaut et restitue la vue HTML vide. (Auparavant, 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 renvoyiez que JSON au navigateur sans rendre le 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 brutes, pas HTML.

22
asb

Supprimez l'attribut de données car vous n'êtes rien POSTING sur le 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
});

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
});
49
Darren

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

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

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:

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 s'il vous plaît se référer this lien pour référence ultérieure de la façon dont une méthode devient une action. Très bonne référence cependant.

4
RGR

Tout d’abord, il n’est pas nécessaire d’avoir deux versions différentes des bibliothèques jquery dans une page: "1.9.1" ou "2.0.0" suffit pour que les appels ajax fonctionnent.

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

Si vous avez juste besoin d'appuyer sur la méthode C # dans votre appel Ajax, il vous suffit de transmettre deux types de sujets et une URL si votre demande est obtenue, il vous suffit de spécifier l'URL uniquement. s'il vous plaît suivez le code ci-dessous ça fonctionne très 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 de script Java si Post Request et aussi [HttpGet] à [HttpPost]

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

Remarque: Si vous utilisez FirstAjax dans le même contrôleur que votre contrôleur View, vous n'avez pas besoin de nom de contrôleur dans l'URL. comme url: 'FirstAjax',

3
Hafiz Asad

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
oyenigun

Ajoutez "JsonValueProviderFactory" dans global.asax:

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

au lieu de url: serviceURL,, utilisez

url: '<%= serviceURL%>',

et passez-vous 2 paramètres à successFunc?

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