jQuery Ajax調用列表上的按鈕

我有一個從asp.net mvc應用程序中查看數據的列表。這是一個庫存清單，每行末尾有兩個圖像（加號和減號），這將允許我增加或減少庫存數量。它目前正常工作與mvc行動的調用，但由於列表很長，我想使用jQuery和AJAX來呼叫而不刷新。我想用不引人注意的JavaScript來做到這一點，所以不想在我的圖像上使用onclick處理程序。由於我剛剛開始使用jQuery，我不知道如何迭代所有圖像並添加該函數。這裏是與形式標籤，因爲他們的立場：jQuery Ajax調用列表上的按鈕

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

任何人都可以幫我一點嗎？

來源

2009-10-18 lloydphillips

你能提供的實際呈現的HTML的例子嗎？我熟悉ASP.Net，但不是MVC，所以我猜這個代碼是在做什麼

這是未經測試的，但希望它能讓你朝着正確的方向前進。如果您可以根據我的上述評論提供更多信息，我會更新我的答案。

$(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); 
     } 
    ); 
}

來源

2009-10-18 04:45:54 WesleyJohnson

嗨韋斯利，對不起，我還沒有回到你這個呢。自從我問起，我沒有機會嘗試一下代碼，在工作中一直很忙。希望我能在家裏開機20分鐘，並在這個週末嘗試一下。勞埃德 – lloydphillips 2009-10-30 03:00:57

我會使用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) 
    }); 
});

來源

2010-10-12 15:06:17

jQuery Ajax調用列表上的按鈕

回答

相關問題