使用jQuery可選插件發佈選定項目與ASP.NET MVC 2

我有一個應用程序正在開發使用ASP.NET MVC 2與jQuery。我有一個顯示在我的頁面中的項目列表和一組可以在每個項目上執行的操作。我們不是重複每個列表項的鏈接或圖標，而是將它們顯示在列表頂部的僞工具欄中。使用jQuery可選插件發佈選定項目與ASP.NET MVC 2

我正在使用jQuery UI可選插件來管理選擇列表項目。現在我需要完成兩兩件事：

當我點擊一個按鈕，我需要提交選中的列表項的ID作爲參數傳遞給請求。例如，如果我單擊「編輯」按鈕，它應該對應於從列表中的選定項目拉出'id'的操作方法Edit（int id）。（順便說一句，'id'不是元素id，而是我需要嵌入到響應中的服務器標識符，以便我可以使用它來識別服務器上的項目。）
我希望能夠基於其他因素啓用/禁用按鈕。例如，也許一個列表項無法編輯，因爲它是'關閉'的。一旦我能夠確定哪個項目被選中（使用$（「。ui-selected」），我假設），我需要確定哪些按鈕被啓用或禁用的其他屬性的最佳方式是什麼？隱藏的字段是我唯一的（最好的）選項，將這些信息傳遞給客戶端腳本？

UPDATE

閱讀更後，我覺得我應該澄清，我不想執行異步操作 - 所以沒有AJAX。我正在使用按鈕的正常動作鏈接類型行爲。

來源

2011-04-25 SonOfPirate

爲了結束，這裏是我結束了（請評論，如果你有更好的解決方案！）：

在我看來，我已經實現了「存根」的形式是這樣的：

<% using (Html.BeginForm("Command", "MyController")) 
    { %> 
    <%= Html.Hidden("CommandName") %> 
    <%= Html.Hidden("CommandArgument") %> 
<% } %>

正如上面提到的，我現在用的是jQuery的可選插件來管理項目，他們的選擇名單。每個項目都包含我需要用來確定哪些按鈕被啓用或禁用的任何數據點的隱藏字段。下面是我已經實現了可選的插件：

var selectedValue = null; 
var selectedItemHasChildren = false; 

$(function() { 
    $(".my_list").selectable({ 
     filter: "tr", 
     selected: function (e, ui) { 
      var item = $(ui.selected).children("td"); 

      selectedValue = item.children("input[name=ItemID]").first().val(); 
      selectedItemHasChildren = (item.children("input[name=HasChildren]") 
             .first() 
             .val() == 1); 

      UpdateButtonStates(); 
     } 
    }); 
});

的UpdateButtonStates方法使用兩個變量來確定哪些按鈕應該是可見的和/或啓用。

在我的情況下，每個按鈕實際上都是作爲一個圖像按鈕來實現的 - 所以跨度爲<a>包裝。 href屬性指向下面的方法：

function Button_Click(action) { 
    $("#CommandName").val(action); 
    $("#CommandArgument").val(selectedValue); 
    $("form").submit(); 
}

正如你所看到的，我使用上面定義的形式來傳遞所需的操作和支持論點回我的控制器。當然，我可以使用類似$（「form」），attr（「action」，action）的方式取消CommandName表單字段並將表單重定向到所需的操作。我選擇了這條路線，因爲我不希望個人行爲暴露在我的API中。另外，我認爲這與傳統ASP.NET Button服務器控件公開的Command事件非常相似，所以其他開發人員的學習曲線將會最小化。

來源

2011-05-02 12:18:22 SonOfPirate

我沒有專門使用jQuery UI Selectable插件，但我只是完成了與您所描述的內容非常類似的事情，所以我會提供我的2分錢。如果有很多屬性決定了針對給定對象可採取的操作，我會建議在每行（或div，或者您正在放置這些表單）中放置一個表單，以提供所需的所有屬性，以確定哪些可以採取行動。這將允許您利用jQuery的.serializeArray（）方法，這非常有用。所以，如果你有一個錶行的每個對象，它可能是這個樣子：

<table> 
<tr> 
<td> 
    <form> 
    <input type="checkbox" name="id" value="1" /> 
    <input type="hidden" name="color" value="red" /> 
    <input type="hidden" name="size" value="large" /> 
    </form> 
</td> 
</tr><tr> 
<td> 
    <form> 
    <input type="checkbox" name="id" value="2" /> 
    <input type="hidden" name="color" value="orange" /> 
    <input type="hidden" name="size" value="small" /> 
    </form> 
</td> 
</tr> 
</table>

取決於當你想運行你的邏輯，它確定可採取的行動（例如，每次一個複選框後被檢查）你的JavaScript可能看起來像這樣：

$(function(){ 

$('[name="id"]').bind('click', function(){ 

    var actionableObjects = []; 

    $.each($('[name="id"]'), function(){ 

    if($(this).is(':checked')){ 

     var obj = {}, 
      arr = $(this).parents('form:first').serializeArray(); 

     $.each(arr, function(index, p){ obj[p.name] = p.value; }) 

    actionableObjects.push(obj); 

    } 

    }) 

    updateActionIcons(actionableObjects); 

}) 

})

這應該會給你一個很好的乾淨的JSON對象數組來處理。

我不確定這是否是最好的方式去解決這個問題，但它對我有用。

就最後提交數據而言，只要點擊動作按鈕，然後對它執行.trigger（'submit'）操作，只需使用jQuery創建一個新表單，如果您不想使用AJAX 。

這也是我第一次提交答案，所以我希望它通過格式化得到足夠的理解。

來源

2011-04-26 02:53:45 Derek

使用jQuery可選插件發佈選定項目與ASP.NET MVC 2

回答

相關問題