web-dev-qa-db-fra.com

Comment appeler des actions de contrôleur à l'aide de JQuery dans ASP.NET MVC

Je lis sur ce sujet depuis un moment et j'ai constaté que vous pouvez appeler une action du contrôleur en utilisant:

$.ajax("MyController/MyAction", function(data) {
    alert(data);
});

Est-ce que cela signifie que je devrais ajouter MicrosoftMvcAjax.js ou MicrosoftAjax.js avec la lib Jquery?

De plus, que devrait contenir le deuxième paramètre dans la fonction $ .ajax ()?

Enfin, tout autre lien dans stackoverflow ou en dehors du site qui pourrait être utile dans asp.net mvc w/ajax et jquery?

Merci.

jqueryasp.net-mvcajax
22
Erick Garcia

Vous pouvez commencer à lire à partir d’ici jQuery.ajax ()

En réalité, Controller Action est une méthode publique à laquelle vous pouvez accéder via Url. Ainsi, tout appel d'une action à partir d'un appel Ajax, MicrosoftMvcAjax ou jQuery peut être effectué. Pour moi, jQuery est le plus simple. Il y a beaucoup d'exemples dans le lien que j'ai donné ci-dessus. Voici un exemple typique d’appel ajax.

$.ajax({
    // edit to add steve's suggestion.
    //url: "/ControllerName/ActionName",
    url: '<%= Url.Action("ActionName", "ControllerName") %>',
    success: function(data) {
         // your data could be a View or Json or what ever you returned in your action method 
         // parse your data here
         alert(data);
    }
});

Plus d'exemples peuvent être trouvés dans ici

40
rob waminal

la réponse précédente est uniquement ASP.NET 

vous avez besoin d'une référence à jquery (peut-être à partir d'un CDN): http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.js

et puis un bloc de code similaire mais plus simple ... 

$.ajax({ url: '/Controller/Action/Id',
         success: function(data) { alert(data); }, 
         statusCode : {
             404: function(content) { alert('cannot find resource'); },
             500: function(content) { alert('internal server error'); }
         }, 
         error: function(req, status, errorObj) {
               // handle status === "timeout"
               // handle other errors
         }
});

J'ai ajouté quelques gestionnaires nécessaires, 404 et 500 se produisant tout le temps si vous déboguez du code. En outre, de nombreuses autres erreurs, telles que le délai d'expiration, seront filtrées par le gestionnaire d'erreurs.

Les contrôleurs ASP.NET MVC gèrent les demandes. Il vous suffit donc de demander l’URL correcte pour que le contrôleur l’enlève. Cet exemple de code fonctionne dans des environnements autres qu'ASP.NET.

30
Glenn Ferrie

Nous pouvons appeler la méthode Controller en utilisant Javascript/Jquery très facilement comme suit: 

Supposons que la méthode Controller à suivre renvoie le tableau d'objets de classe. Laissez la classe est 'A'

public JsonResult SubMenu_Click(string param1, string param2)

    {
       A[] arr = null;
        try
        {
            Processing...
           Get Result and fill arr.

        }
        catch { }


        return Json(arr , JsonRequestBehavior.AllowGet);

    }

Ce qui suit est le type complexe (classe)

 public class A
 {

  public string property1 {get ; set ;}

  public string property2 {get ; set ;}

 }

Maintenant, c'était à tour d'appeler la méthode au-dessus du contrôleur par JQUERY. Voici la fonction Jquery pour appeler la méthode du contrôleur.

function callControllerMethod(value1 , value2) {
    var strMethodUrl = '@Url.Action("SubMenu_Click", "Home")?param1=value1 &param2=value2'
    $.getJSON(strMethodUrl, receieveResponse);
}


function receieveResponse(response) {

    if (response != null) {
        for (var i = 0; i < response.length; i++) {
           alert(response[i].property1);
        }
    }
}

Dans la fonction Jquery ci-dessus 'callControllerMethod', nous développons l'URL de la méthode du contrôleur et l'insérons dans une variable nommée 'strMehodUrl' et appelons la méthode getJSON de l'API Jquery.

receiveieveResponse est la fonction de rappel qui reçoit la valeur de réponse ou de retour de la méthode des contrôleurs. 

Ici, nous avons utilisé JSON, car nous ne pouvons pas utiliser l'objet de classe C #

directement dans la fonction javascript, nous avons donc converti le résultat (arr) de la méthode du contrôleur en objet JSON comme suit:

Json(arr , JsonRequestBehavior.AllowGet);

et retourné cet objet Json.

Désormais, dans la fonction de rappel de Javascript/JQuery, nous pouvons utiliser cet objet JSON résultant et travailler en conséquence pour afficher les données de réponse sur l'interface utilisateur.

Pour plus de détail cliquez ici

1
Abhishek Gahlout

Vous pouvez facilement appeler l'action de n'importe quel contrôleur en utilisant la méthode jQuery AJAX comme ceci:

Remarque dans cet exemple, le nom de mon contrôleur est Student

Action du contrôleur

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

Dans N'importe quelle vue de ce contrôleur ci-dessus, vous pouvez appeler l'action Test () comme ceci:

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>
<script>
    $(document).ready(function () {
        $.ajax({
            url: "@Url.Action("Test", "Student")",
            success: function (result, status, xhr) {
                alert("Result: " + status + " " + xhr.status + " " + xhr.statusText)
            },
            error: function (xhr, status, error) {
                alert("Result: " + status + " " + error + " " + xhr.status + " " + xhr.statusText)
            }
        });
    });
</script>
1
yogihosting

En réponse au post ci-dessus, je pense qu'il a besoin de cette ligne au lieu de votre ligne: - 

var strMethodUrl = '@Url.Action("SubMenu_Click", "Logging")?param1='+value1+' &param2='+value2

Sinon, vous envoyez les chaînes réelles valeur1 et valeur2 au contrôleur.

Cependant, pour moi, il n'appelle le contrôleur qu'une seule fois. Il semble frapper 'receiveieveResponse' à chaque fois, mais un point de rupture sur la méthode du contrôleur montre que c'est seulement la première fois que la page est actualisée.

Voici une solution de travail. Pour la page cshtml: -

   <button type="button" onclick="ButtonClick();"> Call &raquo;</button>

<script>
    function ButtonClick()
    {
        callControllerMethod2("1", "2");
    }
    function callControllerMethod2(value1, value2)
    {
        var response = null;
        $.ajax({
            async: true,
            url: "Logging/SubMenu_Click?param1=" + value1 + " &param2=" + value2,
            cache: false,
            dataType: "json",
            success: function (data) { receiveResponse(data); }
        });
    }
    function receiveResponse(response)
    {
        if (response != null)
        {
            for (var i = 0; i < response.length; i++)
            {
                alert(response[i].Data);
            }
        }
    }
</script>

Et pour le contrôleur: -

public class A
{
    public string Id { get; set; }
    public string Data { get; set; }

}
public JsonResult SubMenu_Click(string param1, string param2)
{
    A[] arr = new A[] {new A(){ Id = "1", Data = DateTime.Now.Millisecond.ToString() } };
    return Json(arr , JsonRequestBehavior.AllowGet);
}

Vous pouvez voir le temps changer chaque fois qu'il est appelé, donc il n'y a pas de cache des valeurs ...

1
user2284063