jQuery Ajax가 목록의 버튼을 호출합니다.

Question

asp.net mvc 응용 프로그램의보기에있는 데이터 목록이 있습니다. 그것은 주식의 목록이고 나는 주식 수량을 늘리거나 줄이는 것을 허용 할 각 행 끝에 두 개의 이미지 (플러스와 마이너스)를 가지고 있습니다. 그것은 mvc 작업에 대한 호출과 함께 현재 잘 작동하지만, 목록이 길기 때문에 jQuery와 AJAX를 사용하여 새로 고침없이 호출 할 수 있습니다. 나는 눈에 잘 띄지 않는 자바 스크립트로 이것을하고 싶다. 그래서 내 이미지에서 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

난 당신이 겸손하게 당신의 HTML 양식을 ajaxify 수있는 jquery form plugin를 사용하여 당신을 추천 할 것입니다. 그래서 그 형태를 부여 :

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