How to use CheckBoxFor in MVC forms with other form controls

Question

Basically, i have a form with a textbox, radio button and a check box control. now i face problem with the checkbox control when i submit my page I have a model like this

public class PersonDetails
{
    public int personID { get; set; }
    public string PersonName { get; set; }
    public string Gender { get; set; }
    public List<Education> Education { get; set; }
    public string EmailID { get; set; }
    public string Address { get; set; }

}

public class Education
{
    public string Qualification { get; set; }
    public bool Checked { get; set; }

    public List<Education> GetQualification()
    {
        return new List<Education>{
    new Education {Qualification="SSC",Checked=false},
    new Education {Qualification="HSC",Checked=false},
    new Education {Qualification="Graduation",Checked=false},
    new Education {Qualification="PostGraduation",Checked=false} 
    };
    }
}

and i have a view like this

@using (Html.BeginForm("GetDetails", "User", FormMethod.Post, new { id = "person-form" }))
{
    <div class="col-xs-12">
    <label>Person Name</label>
    @Html.TextBoxFor(x => x.PersonName)
    </div>
    <div class="col-xs-12">
    <label>Gender</label>
    @Html.RadioButtonFor(x => x.Gender, "Male")
    @Html.RadioButtonFor(x => x.Gender, "Female")
    </div>
    <div class="col-xs-12">
    <label>Education</label>
    @{
    Html.RenderPartial("Qualification", new LearnAuthentication.Controllers.Education().GetQualification());
    }

    </div>

    <div class="col-xs-12">
    <input type="submit" value="Submit" />
    </div>
}

and the partial view like this

@model List<LearnAuthentication.Controllers.Education>
<br />
@for (int i = 0; i < Model.Count(); i++)
{
    @Html.HiddenFor(x => Model[i].Qualification)
    @Html.CheckBoxFor(x => Model[i].Checked)
    @Html.DisplayFor(x => Model[i].Qualification)
<br />
}

and my action method is this

[HttpPost]
public ActionResult GetDetails(PersonDetails personDetails)
{
    return View();
}

now when i run my app i tend to get all the information but when i submit the page i get this property with null values

public List Education { get; set; }

can any of you guys help me on what i am doing wrong or could you direct me to the right path on how to achieve this.

@StephenMuecke it may sound funny to you, but i really dont know how to accept answers, as an appreciation i always vote for the answer which helps me :) right now i am going through blogs to learn how to vote for the answer.. thank you and please help my question if you know the answer — Lijin Durairaj, Aug 22 '16 at 20:30
@StephenMuecke hey.. thank you for your feedback i finally got to know how to accept answers... thank you once again and please let me know if you know the answer for my question :) — Lijin Durairaj, Aug 22 '16 at 20:34

score 1 · Accepted Answer · edited May 23 '17 at 12:33

Your use of a partial to generate the controls for Education is generating inputs such as

<input type="hidden" name="[0].Qualification" ... />
<input type="hidden" name="[1].Qualification" ... />

but in order to bind, they need to have name attributes which match your model

<input type="hidden" name="Education[0].Qualification" ... />
<input type="hidden" name="Education[1].Qualification" ... />

Rename you partial to Education.cshtml (to match the name of the class) and move it to your /Views/Shared/EditorTemplates folder (or /Views/yourControllerName/EditorTemplates if you want a specific template just for that controller)

Then change the partial to

@model LearnAuthentication.Controllers.Education

@Html.HiddenFor(m => m.Qualification)
@Html.LabelFor(m => m.Checked)
@Html.CheckBoxFor(m => m.Checked)
@Html.DisplayFor(m => m.Qualification)

and in the main view replace

<label>Education</label>
@{ Html.RenderPartial("Qualification", new LearnAuthentication.Controllers.Education().GetQualification()); }

with

<span>Education</span> // its not a label
@Html.EditorFor(m => m.Education)

which will correctly generate the correct html for each item in your collection

Side note: Other alternatives which would work would be to change the POST method signature to

[HttpPost]
public ActionResult GetDetails(PersonDetails personDetails List<Education> educationDetails)

or to pass the HtmlFieldPrefix to the partial as explained in getting the values from a nested complex object that is passed to a partial view

How to use CheckBoxFor in MVC forms with other form controls

1 Answers1