如何使用ASPNET MVC中的重新排列功能創建複選框？

我有一個需求，需要一個複選框，在ASPNET MVC中重新排列功能。如何使用ASPNET MVC中的重新排列功能創建複選框？

主要目的是知道哪些複選框用戶選擇，並允許他們重新排列複選框項目順序，因爲他們想要的。

我的問題是，有任何現有的控制像這樣在mvc（或jquery）中可用？如果不是，那麼有沒有更好的UI控制來實現我的目的？

我發現了類似的問題，沒有合適的答案。 listbox with checkboxes

我懇求您的回覆。謝謝。

2011-07-06 abis

爲什麼不使用正常複選框與jQuery-UI Sortable？

<ul id="sortable" class='ckb-list'> 
    <li><input id="chb-1" type="checkbox" value="1"/> Checkbox 1</li> 
    <li><input id="chb-2" type="checkbox" value="2"/> Checkbox 2</li> 
    <li><input id="chb-3" type="checkbox" value="3"/> Checkbox 3</li> 
    <li><input id="chb-4" type="checkbox" value="4"/> Checkbox 4</li> 
    <li><input id="chb-5" type="checkbox" value="5"/> Checkbox 5</li> 
</ul>

，然後應用

$(function() { 
    // sortable methods 
    $("#sortable").sortable(); 
    $("#sortable").disableSelection(); 

    // retrieve selection list 
    $(".btn-save").bind("click", function() { 

    var ids = "", 
     iBox = 0; 

    // foreach input in .ckb-list 
    $(".ckb-list li > input").each(function() { 

     if($(this).prop("checked")) { 
     // it checked, so, we save 
     ids += ++iBox + ". " + $(this).attr("id") + "\n"; 
     } 

    }); 

    alert("the checkboxes selected and sorted are:\n\n" + ids); 
    }); 
});

Live example in JSBIN

您可以輕鬆地轉換<input id="chb-5" type="checkbox" value="5"/> Checkbox 5剃刀語法：

@Html.Checkbox("chb-5", Model.CheckBox5Value)

的持久性，所有你需要做的就是寫HTML是正確的順序，讓我們的形象，你有這個表：

[TblUserOptions] 
UserOption_id 
Option_id 
Value 
Order

所有你需要做的是：

<ul id="sortable" class='ckb-list'> 
@foreach(var option in Model.TblUserOptions 
          .OrderBy(x => x.Order) 
          .ThenByDescending(x => x.Option_id)) 
{ 
    <li>@Html.Checkbox("chb-" + option.Option_id, option.Value)</li> 
} 
</ul>

你會始終有複選框在開始時正確排序，保存所有您需要做的是循環遍歷所有複選框並更新新值Order值。

來源

2011-07-06 06:52:17 balexandre

感謝您的建議！我在提問之前承認我不考慮排序。這是因爲我想找到一個方便的控制，它會在後退後繼續進行更改。爲了使持久性可分類的作品，我可能需要使用cookie，我記得我曾經嘗試過用不同的瀏覽器得到的糟糕結果... – abis

我沒有在我的問題中提到持久性作爲要求。那麼，如果有附加要求，可排序仍然是一個不錯的選擇？ – abis

我總是會去那裏，如果你需要持久化，只需要在添加'checkbox'時在'@ foreach'語句中寫入正確的順序。在「保存」後，您會將訂單保存在您的數據庫中，對嗎？所以當你加載它時會有一個命令，只需使用該命令來創建HTML。沒有必要使用cookie。 – balexandre

如何使用ASPNET MVC中的重新排列功能創建複選框？

回答

相關問題