Comment appeler les Actions du contrôleur en utilisant JQuery in ASP.NET MVC

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

vous avez besoin d'une référence à jquery (peut-être à partir d'un CA): 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 arrivent tout le temps si vous déboguez du code. Aussi, beaucoup d'autres erreurs, comme le délai d'attente, filtre à travers le gestionnaire d'erreur.

ASP.NET MVC Les Controllers gèrent les requêtes, donc vous avez juste besoin de demander L'URL correcte et le controller le récupérera. Cet exemple de code avec le travail dans des environnements autres que ASP.NET

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

supposez que la méthode suivante soit la méthode de Controller à appeler retournant un tableau de quelques objets de classe. 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);

    }

suivant est le type complexe (classe)

 public class A
 {

  public string property1 {get ; set ;}

  public string property2 {get ; set ;}

 }

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

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 controller et la mettons dans une variable nommée' strMehodUrl ' et appelons la méthode getJSON de L'API Jquery.

receieveResponse est la fonction de rappel recevant la réponse ou la valeur de retour de la méthode controllers.

ici nous avons fait usage de JSON, puisque nous ne pouvons pas faire usage de L'objet C # class

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

Json(arr , JsonRequestBehavior.AllowGet);

et a retourné L'objet Json.

maintenant dans la fonction callback de Javascript / JQuery nous pouvons utiliser cet objet JSON résultant et travailler en conséquence pour montrer les données de réponse sur L'interface utilisateur.

Pour plus detaill cliquez ici

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

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

ou bien vous envoyez les chaînes de caractères actuelles value1 et value2 au contrôleur.

Cependant, pour moi, il appelle le contrôleur de fois. Il semble frapper 'receieveResponse' à chaque fois, mais un point de pause sur la méthode du controller montre qu'il n'est touché que la première fois jusqu'à ce qu'une page se rafraîchisse.

Voici une solution qui fonctionne. Pour le cshtml page: -

   <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 mise en cache des valeurs...

vous pouvez facilement appeler l'action de n'importe quel controller en utilisant la méthode AJAX de jQuery comme ceci:

notez dans cet exemple que le nom de mon contrôleur est Etudiant

Action Du Contrôleur

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

N'Importe Quelle Vue à ce contrôleur, vous pouvez appeler le Test () action 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>