jQuery Ajax调用列表上的按钮

Question

我有一个从asp.net mvc应用程序中查看数据的列表。这是一个库存清单，每行末尾有两个图像（加号和​​减号），这将允许我增加或减少库存数量。它目前正常工作与mvc行动的调用，但由于列表很长，我想使用jQuery和AJAX来呼叫而不刷新。我想用不引人注意的JavaScript来做到这一点，所以不想在我的图像上使用onclick处理程序。由于我刚刚开始使用jQuery，我不知道如何迭代所有图像并添加该函数。这里是与形式标签，因为他们的立场：

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

任何人都可以帮我一点吗？

Answer 1

这是未经测试的，但希望它能让你朝着正确的方向前进。如果您可以根据我的上述评论提供更多信息，我会更新我的答案。

$(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

我会使用jquery form plugin它允许你悄悄地ajaxify HTML表单建议您。所以给出的形式：

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

你可以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) 
    }); 
});