ASP.NET MVC 5 Multi select not binding during POST

Question

I am new to ASP.NET MVC 5 and having some issues with binding only the multi-select section of the body during POST when submitting the form. The form renders correctly, with checkboxes being correctly selected. The form is scaffolded using visual studio (except the multi-select)

    public class EditViewModel
    {
        [Required]
        [Display(Name = "First Name")]
        public string FirstName { get; set; }

        [Required]
        [Display(Name = "LastName")]
        public string LastName { get; set; }
        public IList<RolesViewModel> Roles { get; set; }

    }


    public class RolesViewModel
    {
        public string RoleId { get; set; }
        public string RoleName { get; set; }
        public bool Selected { get; set; }
    }


      [HttpGet]
        public async Task<ActionResult> Edit(string Id)
        {...
            var model = Mapper.Map<ApplicationUser, EditViewModel>(user); 
            return View(model);
        }


        [HttpPost]
        [ValidateAntiForgeryToken]
        public async Task<ActionResult> Edit(EditViewModel model)
        {
        }

@model BloggingService.Web.Models.EditViewModel

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Edit</title>
</head>
<body>
    @using (Html.BeginForm())
    {
        @Html.AntiForgeryToken()
        
    <div class="form-horizontal">
        <h4>Edit</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @Html.HiddenFor(model => model.Id)

        <div class="form-group">
            @Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.FirstName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.FirstName, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.LastName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.LastName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.LastName, "", new { @class = "text-danger" })
            </div>
        </div>


        <div class="form-group">
            @Html.LabelFor(model => model.Roles, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">


                @for (int i = 0; i < Model.Roles.Count; i++)
                {

                    @Html.CheckBoxFor(x => @Model.Roles[i].Selected,"test1");
                    <div class="form-check">
                        <input type="hidden" asp-for="@Model.Roles[i].RoleId" />
                        <input type="hidden" asp-for="@Model.Roles[i].RoleName" />
                        <input type="checkbox" asp-for="@Model.Roles[i].Selected" class="form-check-input" checked="@Model.Roles[i].Selected" />
                        <label class="form-check-label" asp-for="@Model.Roles[i].Selected">
                            @Model.Roles[i].RoleName
                        </label>
                    </div>
                }
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Save" class="btn btn-default" />
            </div>
        </div>
    </div>
    }
    
    <div>
        @Html.ActionLink("Back to List", "Index")
    </div>

Would really appreciate any insight.

Pls show your form and submit tags.

Serge
– Serge

2021-02-07 15:42:13 +00:00
Commented Feb 7, 2021 at 15:42 — Serge
– Serge, Commented Feb 7, 2021 at 15:42

that one guy on the internet · Accepted Answer · 2021-02-07 16:30:04Z

1

I have managed to find the correct and cleaner approach for accomplishing such tasks by utilizing the HTML helper methods inside my for loop and now the data are able to bind correctly during data-binding.

  @Html.HiddenFor(x => @Model.Roles[i].RoleId);
  @Html.HiddenFor(x => @Model.Roles[i].RoleName);
  @Html.CheckBoxFor(x => @Model.Roles[i].Selected);

answered Feb 7, 2021 at 16:30

that one guy on the internet

557 bronze badges

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

Collectives™ on Stack Overflow

ASP.NET MVC 5 Multi select not binding during POST

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related