Question

I’ve got a requirement that needs a checkbox with rearranging capability in ASPNET MVC.

The main purpose is to know which checkbox users selected and allow them to rearrange the checkbox item order as they want.

My Question is, do there any existing control like this available in mvc(or jquery)? If no, do there any better UI control to fulfill my purpose?

I found the similar question with no appropriate answer.
listbox with checkboxes

I beg for your response. Thanks.

Answer 1

why don’t you use the normal checkbox with the 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>

and then apply

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

You can easily convert the <input id="chb-5" type="checkbox" value="5"/> Checkbox 5 with the razor syntax:

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

---

for persistence all you need to do is write the HTML is the correct order, let’s image you have this table:

[TblUserOptions] 
UserOption_id
Option_id
Value
Order

all you need to do is:

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

You will always have the checkboxes sorted correctly on start, upon save all you need to do is loop through all checkboxes and update the new Order value.