MVC Html Helper MultiSelect CheckBox

Question

        public ActionResult Edit(int? id)
    {
        ViewBag.Role = new SelectList((from t in db.Roles where t.RoleID != 1 && t.RoleID != 2 select t), "RoleID", "RoleName");

        if (id == null)
        {
            return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
        }

        User user = db.Users.Find(id);

        if (user == null)
        {
            return HttpNotFound();
        }

        return View(user);
    }

The ViewBag.Role is to generate all the Roles Value into the multiselect checkbox.

        <div class="form-group">
        @Html.Label("Roles", htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownList("Role", null, htmlAttributes: new { @multiple = "multiple", @class = "form-control" })
        </div>
    </div>

<script type="text/javascript">
$(function () {
    $('#Role').multiselect({
        includeSelectAllOption: true
    });
});

Basically the MultiSelect CheckBox look like the following image.

Here is my question, how do i precheck the roles that the user already have ?? For example, x user have a role Manager so during edit page Manager checkbox will be checked.

Your model needs an IEnumerable<int> property to bind to, and it needs to be @Html.ListBoxFor(m => m.yourProperty, (IEnumerable<SelectListItem>ViewBag.Role, ...) (refer also Why does the DropDownListFor lose the multiple selection after Submit but the ListBoxFor doesn't? — user3559349
– user3559349, Commented Jul 28, 2018 at 10:22
My DropDownList doesnt lose the multiple selection after Submit. I mange to receive the value using array int[] Role. Can u give me an example i dont quite understand what u mean for the first sentence. — loli pop
– loli pop, Commented Jul 28, 2018 at 10:31
Are you serious? Read the link and my comnent - it explains what you need to. And as the link explains, you will never get anything to bind unless its ListBoxFor() — user3559349
– user3559349, Commented Jul 28, 2018 at 10:34

Ali Soltani · Accepted Answer · 2018-07-28 11:02:41Z

1

You can do it like this:

$('select').multiselect({includeSelectAllOption: true});

// Get your data
var userRoles="1,3"; // You can use a ViewBag like ViewBag.UserRoles for roles of user

// Split data by ","
var userRolesArray=userRoles.split(",");

// Set dataArray
$("select").val(userRolesArray);

// Refresh for cheking default values
$("select").multiselect("refresh");

You can use a ViewBag like ViewBag.UserRoles for roles of user and fill it in your Action.

Online demo (jsfiddle)

edited Jul 28, 2018 at 11:02

answered Jul 28, 2018 at 10:57

Ali Soltani

10k5 gold badges33 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

loli pop Over a year ago

Thx a lot, it solve my problem. But i dont quite understand what is line {var userRolesArray = userRoles.split(",");} What does the split function do??

Ali Soltani Over a year ago

@lolipop For setting value by .val(), we should use a array of values as a parameter and userRoles.split(",") makes this array from a string like 1,3, just it.

loli pop Over a year ago

Thx a lot. Appreciate your help !

Collectives™ on Stack Overflow

MVC Html Helper MultiSelect CheckBox

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related