Radio button values binding not working

Question

I have a view:

    @using(Html.BeginForm())
{
    <div>
        <table id="dimensionFeedbackTable">
            <tbody>
                @for(int i = 0; i < 6; i++)
                {
                    <tr>
                        <td>
                            <div>
                                <p>
                                    <text>
                                        Rate @i
                                    </text>
                                </p>
                            </div>
                        </td>
                        @foreach(var item in Model.DeptList)
                        {
                            <td>
                                <div style="text-align: center;">
                                    @Html.RadioButtonFor(m => item.DepartmentValue, i,
                                            new
                                            {
                                                id = i,
                                                style = "min-height:45px;"
                                            })
                                </div>
                            </td>
                        }
                    </tr>
                }

            </tbody>
        </table>


        <button id="submitComment" value="submit">
            @{
                <text>Submit</text>
            }
        </button>
    </div>
}

Model in that view is EmployeeModelClass. Here it is:

public class EmployeeModelClass
    {
        public int Id
        {
            get; set;
        }

        public IEnumerable<DepartmentModelClass> DeptList
        {
            get; set;
        }
    }

    public class DepartmentModelClass
    {
        public string DepartmentCode
        {
            get; set;
        }

        [Range(1, 6)]
        public int? DepartmentValue
        {
            get; set;
        }
    }

My controller:

[HttpPost]
        public ActionResult Index(EmployeeModelClass emp, IEnumerable<DepartmentModelClass> qec)
        {
            emp.DeptList = qec;
            return View(emp);
        }

I am trying to accomplish next:

Each row should be group for it self. For example Rate 1 row can have only one radio button selected. Now, these buttons should be bound. If second radio button is selected in any row then its value (DepartmentValue) should be set to 2. So when I submit, I get a collection of which radio buttons are selected.

I've tried a lot of combinations with setting proper model and binding it. Also tried html helper method RadioButton, but still no luck to return the values. Closest that I managed to get is returning a collection but although radio buttons are selected in Controller, collection is not null but values (DepartmentValues) are null.

Also, there are similar answers here but for some reason none of them is working for me. Any help and pointing direction are appreciated. Losing my mind over a simple thing.

One more thing, I tried with creating partials view but still now luck. I read online that is a bad practice to place for/foreach loop in a view and tried to simplify it but this approach is also not working.

Thanks

Answer 1

I notice few issues -

• for loop and foreach loop are opposite.
• Should use for for array of controls instead of foreach
• Do not explicitly assign id to radio buttons new { id = i, ...})

View

@model DemoMvc.Models.EmployeeViewModel
@using (Html.BeginForm())
{
    <div>
        <table id="dimensionFeedbackTable">
            <tbody>
                @for (int i = 0; i <  Model.DepartmentViewModels.Count; i++){
                    <tr>
                        <td>
                            <div>
                                <p>
                                    <text>
                                        Rate @Model.DepartmentViewModels[i].DepartmentCode
                                    </text>
                                </p>
                            </div>
                        </td>
                        @for (int j = 1; j <= 6; j++)
                        {
                            <td>
                                <div style="text-align: center;">
                                    @Html.RadioButtonFor(m => 
                                        Model.DepartmentViewModels[i].DepartmentValue, 
                                        j, new { style = "min-height:45px;" }) 
                                    @j
                                </div>
                            </td>
                        }
                    </tr>
                }
            </tbody>
        </table>
        <button id="submitComment" value="submit">Submit</button>
    </div>
}

Model

public class EmployeeViewModel
{
    public int Id { get; set; }
    public IList<DepartmentViewModel> DepartmentViewModels { get; set; }
}

public class DepartmentViewModel
{
    public string DepartmentCode { get; set; }
    public int? DepartmentValue { get; set; }
}

Controller

public ActionResult Index()
{
    // This could come from database.
    var model = new EmployeeViewModel
    {
        DepartmentViewModels = new List<DepartmentViewModel>
        {
            new DepartmentViewModel{ DepartmentCode = "ABC", DepartmentValue = 1},
            new DepartmentViewModel{ DepartmentCode = "DEF", DepartmentValue = 2},
            new DepartmentViewModel{ DepartmentCode = "GHI", DepartmentValue = 3},
        }
    };
    return View(model);
}

[HttpPost]
public ActionResult Index(EmployeeViewModel model)
{
    return View(model);
}

Result

Posted Value