Appeler des méthodes d'action ASP.NET MVC à partir de JavaScript

Question

J'ai un exemple de code comme celui-ci :

 <div class="cart">
      <a onclick="addToCart('@Model.productId');" class="button"><span>Add to Cart</span></a>
 </div>
 <div class="wishlist">
      <a onclick="addToWishList('@Model.productId');">Add to Wish List</a>
 </div>
 <div class="compare">
      <a onclick="addToCompare('@Model.productId');">Add to Compare</a>
 </div>    

Comment puis-je écrire du code JavaScript pour appeler la méthode d'action du contrôleur ?

Answer 1

Utilisez jQuery ajax :

function AddToCart(id)
{
   $.ajax({
      url: 'urlToController',
      data: { id: id }
   }).done(function() {
      alert('Added'); 
   });
}

http://api.jquery.com/jQuery.ajax/

Answer 2

Il suffit d'appeler votre Méthode d'action en utilisant Javascript comme indiqué ci-dessous :

var id = model.Id; //if you want to pass an Id parameter
window.location.href = '@Url.Action("Action", "Controller")/' + id;

J'espère que cela vous aidera...

Answer 3

Vous appelez la méthode addToCart et passez l'identifiant du produit. Vous pouvez maintenant utiliser jQuery ajax pour transmettre ces données à votre méthode d'action côté serveur.

jQuery post est la version courte de jQuery ajax.

function addToCart(id)
{
  $.post('@Url.Action("Add","Cart")',{id:id } function(data) {
    //do whatever with the result.
  });
}

Si vous voulez plus d'options, comme des rappels de réussite et la gestion des erreurs, utilisez jQuery ajax,

function addToCart(id)
{
  $.ajax({
  url: '@Url.Action("Add","Cart")',
  data: { id: id },
  success: function(data){
    //call is successfully completed and we got result in data
  },
  error:function (xhr, ajaxOptions, thrownError){
                  //some errror, some show err msg to user and log the error  
                  alert(xhr.responseText);

                }    
  });
}

Lorsque vous effectuez des appels ajax, je recommande vivement d'utiliser la méthode d'aide Html telle que Url.Action pour générer le chemin d'accès à vos méthodes d'action.

Cela fonctionnera si votre code est dans une vue razor car Url.Action sera exécuté par razor côté serveur et cette expression c# sera remplacée par le chemin relatif correct. Mais si vous utilisez votre code jQuery dans votre fichier js externe, vous pouvez envisager l'approche mentionnée dans cet article. respuesta .

Answer 4

Si vous n'avez pas besoin de beaucoup de personnalisation et que vous recherchez la simplicité, vous pouvez le faire avec la méthode intégrée. Méthode AjaxExtensions.ActionLink .

<div class="cart">
      @Ajax.ActionLink("Add To Cart", "AddToCart", new { productId = Model.productId }, new AjaxOptions() { HttpMethod = "Post" });
</div>

Ce lien MSDN est à lire absolument pour connaître toutes les surcharges possibles de cette méthode et les paramètres de l'option Classe AjaxOptions . En fait, vous pouvez utiliser la confirmation, changer la méthode http, définir les clients OnSuccess et OnFailure scripts, etc.

Answer 5

Si vous voulez appeler une action à partir de votre JavaScript, une façon de procéder est d'intégrer votre code JavaScript, à l'intérieur de votre vue ( .cshtml par exemple), et ensuite, utiliser Razor, pour créer une URL de cette action :

$(function(){
    $('#sampleDiv').click(function(){
        /*
         While this code is JavaScript, but because it's embedded inside
         a cshtml file, we can use Razor, and create the URL of the action

         Don't forget to add '' around the url because it has to become a     
         valid string in the final webpage
        */

        var url = '@Url.Action("ActionName", "Controller")';
    });
});