jQuery Ajax appel pour les boutons sur une liste

Question

J'ai une liste de données que j'ai dans une vue d'une application mvc asp.net. C'est une liste de stock et j'ai deux images (un plus et un moins) à la fin de chaque rangée qui me permettront d'augmenter ou de diminuer la quantité de stock. Cela fonctionne bien actuellement avec un appel à l'action mvc mais comme la liste est longue, je veux utiliser jQuery et AJAX pour que l'appel se passe sans rafraîchissement. Je veux le faire avec javascript discret, donc je ne veux pas de gestionnaires onclick sur mes images. Comme je ne fais que commencer avec jQuery, je n'ai aucune idée de comment je peux itérer toutes les images et ajouter la fonction. Voici les images avec les étiquettes de forme telles quelles:

<td> 
      <% using (Html.BeginForm("Increase", "Stock", new { Id = item.StockId })) 
       {%> 
      <input type="image" src="/Content/Images/bullet_add.png" style="margin-left:20px;" /> <% } %> 
      </td> 
     <td><% using (Html.BeginForm("Decrease", "Stock", new { Id = item.StockId })) 
       {%> 
      <input type="image" src="/Content/Images/bullet_delete.png" style="margin-left:10px;" /><% } %> 
     </td> 

Quelqu'un peut-il m'aider un peu?

Answer 1

Ceci n'est pas testé, mais j'espère que cela vous permettra d'aller dans la bonne direction. Je vais mettre à jour ma réponse si vous pouvez fournir plus d'informations en fonction de mon commentaire ci-dessus.

$(document).ready(function(){ 
    //this will target all <input type='image'> controls for all forms on the page. A better practice would be to focus on just the target forms 
    // perhaps based on the ID of a containing div, etc 
    $("form [input[@type=image]").click(function(){ 
     //$image is now a jQuery object variable referencing the clicked image 
     var $image = $(this); 

     //$form is now a jQuery object variable referencing the parent <form> of the clicked image 
     var $form = $image.parent(); 

     //stockId is now a variable referencing the id of the form, assuming this is the stockID we want to manipulate 
     var stockId = $form.attr("id"); 

     //probably a better way to do this, but to know if we want to go up or down, I checked the src attribute of the <input type='image'> control 
     //if the url of the image contains add, the direction is add, else it's del 
     var direction = $image.attr("src").contains("add") ? "add" : "del"; 

     //call a function to handle the add,del 
     shiftStock(stockId, direction); 
    }); 
}); 

//a javascript function that accepts the ID of the stock and the direction we want to go 
function shiftStock(stockId, direction){ 

    //do an ajax call using jQuery, passing in our stockId and direction 
    //I'm using a get, but and an XML return data Type, but this could just as easily be a post with json, etc 
    $.ajax(
     type: "GET", 
     url: "webserviceurl??", 
     dataType: "XML", 
     data: "stockId=" + stockId + "&direction=" + direction, 
     success: function(xml){ 
      //parse the returned xml if need be to handle any UI updates, like new stock numbers, etc? 
      alert(xml); 
     }, 
     error: function(xml, error, status){ 
      alert(error); 
     } 
    ); 
} 

Answer 2

Je vous recommande d'utiliser la jquery form plugin qui vous permet de ajaxify vos formulaires discrètement html. Donc, compte tenu de ces formes:

<td> 
    <% using (Html.BeginForm("Increase", "Stock", new { Id = item.StockId }, 
       FormMethod.Post, new { @class = "changeStock" })) { %> 
     <input type="image" src="/Content/Images/bullet_add.png" style="margin-left:20px;" /> 
    <% } %> 
</td> 
<td> 
    <% using (Html.BeginForm("Decrease", "Stock", new { Id = item.StockId }, 
       FormMethod.Post, new { @class = "changeStock" })) { %> 
     <input type="image" src="/Content/Images/bullet_delete.png" style="margin-left:10px;" /> 
    <% } %> 
</td> 

Vous pouvez les ajaxify:

$(function() { 
    // Ajaxify the forms having the changeStock class 
    $('form.changeStock').ajaxForm(function(result) { 
     // On the success callback update a container which holds 
     // the items in order to refresh the UI. For this the controller 
     // actions you are posting to need to return PartialView with only 
     // the parts of the html that needs to be updated. 
     $('#listOfItems').html(result) 
    }); 
});