如何使用jQuery，AJAX，JSON和MVC設置按鈕以調用不同的按鈕？

Question

我想有一個類似下面的屏幕：

   <div id="statusText></div> 

   <button type="button" id="transferData1"
       data-href="/Tools/Data/TransferData1">Transfer Data 1</button>
   <button type="button" id="transferData2"
       data-href="/Tools/Data/TransferData2">Transfer Data 2</button>
   <button type="button" id="transferData3"
       data-href="/Tools/Data/TransferData3">Transfer Data 3</button>

單擊時每個按鈕將調用MVC操作方法，然后返回某些狀態。 當我有多個按鈕時，有一種簡單的方法可以用jQuery，Ajax和JSON設置它嗎？

到目前為止我有以下腳本：

<script type="text/javascript">
    $(document).ready(function () {
        $('#transferData')
            .click(function () {
                xxx
            });

    });
</script>

但是，如何讓這個腳本適用於不同的按鈕ID，並且還可以使用Ajax調用不同的動作方法？

Answer 1

有幾種選擇

1）使用表單，給每個按鈕一個值，並通過查看為該按鈕返回的值來區分哪個按鈕被推送到服務器端。 通過使用ActionFilters（http://www.dotnetcurry.com/ShowArticle.aspx?ID=724），有一種很好的方法來清理/拆分成多個服務器端操作。 如果它需要是ajax，那么你可以在mvc3中使用不顯眼的ajax擴展。

2）使用jquery覆蓋按鈕的click方法，手動調用動作然后使用結果

$('[data-href]').click(function() { 
  $.ajax({ url: $(this).attr('data-href') })
    .success(function(data) {});
});

Answer 2

如果您想知道該過程，那么我認為最簡單和最合適的方法是將每個按鈕綁定到表單，如果您想要發布一些值，否則不需要它。 form1用於button1 form2用於button2，form3用於button3。 事情應該很容易從那里。

每個按鈕都有一個jquery按鈕單擊事件，有一個動作方法，將按鈕名稱傳遞給動作方法，根據按鈕名稱，您可以處理請求並返回json結果。