model value is null in table updatein Razor using Entity models

Question

I have a table view to show roles of a company and that contains check box to select the roles.

I want to update that in the model. My Roles.cshtml page is as below,

@model IEnumerable<ExpenCare.Models.CompanyRole>

<div class="row">
    @Html.Partial("_RightSidePane")
    <div class="col-10 col-sm-8 col-xs-8 col-md-10">
        <div class="tab-content" id="nav-tabContent">
            <div class="tab-pane fade" id="list-Roles-Content" role="tabpanel" aria-labelledby="list-Roles"></div>
            @using (@Html.BeginForm("UpdateRoles", "Admin", FormMethod.Post))
            {
            <table class="table">
                    <tr>
                        <th>
                            Name
                        </th>
                        <th>
                            Enable
                        </th>
                    </tr>

                    @foreach (var item in Model)
                    {
                        <tr>
                            <td>
                                @Html.DisplayFor(m => item.Name)
                            </td>
                            <td>
                                @Html.EditorFor(m => item.IsCheked, new { @checked = "checked" })
                            </td>
                        </tr>
                    }

                </table>
                <p><input type="submit" value="Save Changes" /></p>
                <p style="color:green; font-size:12px;">@ViewBag.Message</p>
            }
        </div>
    </div>
</div>

and my UpdateRoles action is as bellow,

[HttpPost]
        public ActionResult UpdateRoles(List<CompanyRole> model)
        {
            if (ModelState.IsValid)
            {
                foreach(var i in model)
                {
                    var id = i.Id;
                    var role = i.Name;
                }
            }
            ViewBag.Message = "Successfully updated.";
            return View("Roles/Roles", model: model);
    }

Data retrieved from Roles action.

public ActionResult Roles()
        {
            List<CompanyRole> roles = new List<CompanyRole>();
            HttpClient client = new HttpClient();           
                client.BaseAddress = new Uri("http://localhost:1888/api/");
                //HTTP GET
                var responseTask = client.GetAsync("CompanyRoles");
                responseTask.Wait();

                var result = responseTask.Result;
                if (result.IsSuccessStatusCode)
                {
                    var readTask = result.Content.ReadAsAsync<List<CompanyRole>>();
                    readTask.Wait();

                    roles = readTask.Result;
                }
                else //web api sent error response 
                {
                    //log response status here..

                    roles = null;

                    ModelState.AddModelError(string.Empty, "Server error. Please contact administrator.");
                }
            return View("Roles/Roles", model: roles);
        }

I tried dubugging the updateRole method but, the model is alwasy null. I don't know if it is because of the partial views. But it is returning to action method when I click update. Is it not possible to update ? I tried MVC 5, EF 6 and Multirow(batch) editing as well.

Answer 1

Pass Id to your post method and control name should match with model property name to bind value to post model parameter. Iterating these controls to create a unique id for each control. On form post it will bind data to List model.

Checkout my below code.

View :

@using (Html.BeginForm("UpdateRoles","AdminRoles",FormMethod.Post))  
{ 
  @for (var i = 0; i < Model.Count(); i++)  
  { 
    <tr>
       <td>
           //to pass id to your post method
           @Html.HiddenFor(m => m[i].Id) 
           @Html.DisplayFor(m => m[i].Name)
       </td>
       <td>
           @Html.CheckBoxFor(m => m[i].IsChecked, new { })
       </td>
   </tr>
 }
 <input id="Submit" type="submit" value="submit" />   
}  

Controller :

 [HttpPost]  
 public ActionResult UpdateRoles(List<CompanyRole> model)
 {  
     //your logic
     return View();  
 }

Model :

public class CompanyRole {
    public int Id {get; set;}
    public string Name {get; set;}
    public bool IsChecked {get; set;}
}