Working with EditorTemplates and radio buttons

Question

I am showing data in tabular format. the table is generated automatically when working with EditorFor and EditorTemplates .

in each row of table i am showing ID, Name, Country dropdown, checkboxes for hobbies selection and radio button for sex selection.

all are working fine but i am not being able to bind radio buttons for sex. i am not being able to understand what i am missing for which i am getting error.

please have a look at my code and give me direction what to change for radio buttons.

my full code

controller code

    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            StudentListViewModel osvm = new StudentListViewModel();
            osvm.Sex = osvm.GetSex();
            osvm.Countries = osvm.GetCountries();
            return View(osvm);
        }

        [HttpPost]
        public ActionResult Index(StudentListViewModel oStudentListViewModel)
        {
            return View(oStudentListViewModel);
        }
}

viewmodel

public class StudentListViewModel
{
    //public List<Country> Country { get; set; }
    public List<SelectListItem> Countries { get; set; }

    public IList<Student> Students { get; set; }
    public List<Sex> Sex { get; set; }

    public StudentListViewModel()
    {
        Students = new List<Student>
        {
            new Student
            {
                ID=1,Name="Keith",CountryID="0",SexID="F",
                Hobbies= new List<Hobby>
                {
                    new Hobby{ID=1,Name="Football",Checked=true},
                    new Hobby{ID=2,Name="Hocky",Checked=false},
                    new Hobby{ID=3,Name="Cricket",Checked=false}
                }

            },

            new Student
            {
                ID=2,Name="Paul",CountryID="2",
                Hobbies= new List<Hobby>
                {
                    new Hobby{ID=1,Name="Football",Checked=false},
                    new Hobby{ID=2,Name="Hocky",Checked=true},
                    new Hobby{ID=3,Name="Cricket",Checked=false}
                }
            },

            new Student
            {
                ID=3,Name="Sam",CountryID="3",
                Hobbies= new List<Hobby>
                {
                    new Hobby{ID=1,Name="Football",Checked=false},
                    new Hobby{ID=2,Name="Hocky",Checked=false},
                    new Hobby{ID=3,Name="Cricket",Checked=true}
                }
            }
        };
    }

    public List<Sex> GetSex()
    {
        Sex = new List<Sex>
        {
            new Sex{ID="M",SexName="Male"},
            new Sex{ID="F",SexName="Female"}
        };

        return Sex;
    }

    public List<SelectListItem> GetCountries()
    {
        Countries = new List<SelectListItem>
        {
            new SelectListItem{Value="1",Text="India"},
            new SelectListItem{Value="2",Text="UK"},
            new SelectListItem{Value="3",Text="USA"}
        };

        return Countries;
    }
}

Model class

   public class Student
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public string CountryID { get; set; }
        public string SexID { get; set; }
        public IList<Hobby> Hobbies { get; set; }

    }

    public class Hobby
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public bool Checked { get; set; }
    }

    public class Sex
    {
        public string ID { get; set; }
        public string SexName { get; set; }
    }

Main View Index.cshtml

@model EditorTemplateSample.Models.StudentListViewModel

@{
    ViewBag.Title = "Home Page";
}
<br /><br />
@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
    <div class="form-group">
        <div class="col-md-12 table-responsive">
            <table class="table table-bordered table-hover">
                <tr>
                    <th>
                        ID
                    </th>
                    <th>
                        Name
                    </th>
                    <th>
                        Country
                    </th>
                    <th>
                        Hobbies
                    </th>
                    <th>
                        Sex
                    </th>
                </tr>
                <tbody>
                    @Html.EditorFor(m => m.Students, new { Countries = Model.Countries, Sex = Model.Sex })
                </tbody>
            </table>
        </div>
    </div>
}

EditorTemplates\\Student.cshtml

@model EditorTemplateSample.Models.Student
<tr>
    <td>
        @Html.HiddenFor(m => m.ID)
        @Html.DisplayFor(m => m.ID)
    </td>
    <td>
        @Html.TextBoxFor(m => m.Name)
    </td>
    <td>
        @Html.DropDownListFor(m => m.CountryID,
            new SelectList((List<SelectListItem>)ViewData["Countries"], "Value", "Text", Model.CountryID), "-- Select Country--")
    <td>
    <td>
        @Html.EditorFor(m => m.Hobbies)
    <td>
    <td>
        @Html.EditorFor(m => ((EditorTemplateSample.Models.Sex) ViewData["Sex"]).ID)
    <td>
</tr>

EditorTemplates\\Hobby.cshtml

@model EditorTemplateSample.Models.Hobby

<div class="checkbox">
    @Html.HiddenFor(m => m.ID)
    @Html.HiddenFor(m => m.Name)
    @Html.CheckBoxFor(m => m.Checked)
    @Html.LabelFor(m => m.Checked, Model.Name)
</div>

EditorTemplates\\Sex.cshtml

@model EditorTemplateSample.Models.Sex
<td>
    <div class="checkbox">
        @Html.HiddenFor(m => ((EditorTemplateSample.Models.Sex)ViewData["Sex"]).ID)
        @Html.HiddenFor(m => ((EditorTemplateSample.Models.Sex)ViewData["Sex"]).SexName)
        @Html.RadioButtonFor(m => ((EditorTemplateSample.Models.Sex)ViewData["Sex"]).ID, ((EditorTemplateSample.Models.Sex)ViewData["Sex"]).ID)
        @Html.LabelFor(m => ((EditorTemplateSample.Models.Sex)ViewData["Sex"]).ID, ((EditorTemplateSample.Models.Sex)ViewData["Sex"]).SexName)
    </div>
</td>

@Html.EditorFor(m => m.Students, new { Countries = Model.Countries, Sex = Model.Sex }) the above way i pass Sex model data to Student.cshtml file

from Student.cshtml file i try to bind ID @Html.EditorFor(m => ((EditorTemplateSample.Models.Sex) ViewData["Sex"]).ID)

in EditorTemplates\\sex.cshtml file

@model EditorTemplateSample.Models.Sex
<td>
    <div class="checkbox">
        @Html.HiddenFor(m => ((EditorTemplateSample.Models.Sex)ViewData["Sex"]).ID)
        @Html.HiddenFor(m => ((EditorTemplateSample.Models.Sex)ViewData["Sex"]).SexName)
        @Html.RadioButtonFor(m => ((EditorTemplateSample.Models.Sex)ViewData["Sex"]).ID, ((EditorTemplateSample.Models.Sex)ViewData["Sex"]).ID)
        @Html.LabelFor(m => ((EditorTemplateSample.Models.Sex)ViewData["Sex"]).ID, ((EditorTemplateSample.Models.Sex)ViewData["Sex"]).SexName)
    </div>
</td>

guide me how could i pass my sex data from main index view to sex view in EditorTemplates folder.

Edit

in main view i add this line

@Html.EditorFor(m => m.Students, new { Countries = Model.Countries, MainModel = Model, Sex = Model.Sex })

in student.cshtml i edit line like @Html.EditorFor(m => ((EditorTemplateSample.Models.StudentListViewModel)ViewData["MainModel"]).Sex, new { Sex = (List<EditorTemplateSample.Models.Sex>)ViewData["Sex"] })

in sex.cshtml for radio button generation i changed line likes

<div class="checkbox">
    @Html.HiddenFor(m => m.ID)
    @Html.HiddenFor(m => m.SexName)
    @Html.RadioButtonFor(m => m.ID,Model.ID)
    @Html.LabelFor(m => m.ID, Model.SexName)
</div>

but still no luck. badly stuck due to lack of control over asp.net mvc EditorTemplates now radio buttons are coming but all are selected by default which is wrong. see the latest UI.

please help me to get out of this problem. thanks

Answer 1

Your Student class contains a property string SexID which is what you are wanting to bind the selected radio button value to. But your EditorTemplate is for a model that is typeof Sex , and you Student model does not contain a property which is typeof Sex (and nor should it).

Using an EditorTemplate in this case makes no sense - your binding to a simple property, not a complex object or collection of objects. The radio buttons should be generated in your Student.cshtml template.

@model EditorTemplateSample.Models.Student
<tr>
    <td>
        @Html.HiddenFor(m => m.ID)
        @Html.DisplayFor(m => m.ID)
    </td>
    <td>@Html.TextBoxFor(m => m.Name)</td>
    <td>@Html.DropDownListFor(m => m.CountryID, new SelectList((List<SelectListItem>)ViewData["Countries"], "Value", "Text", Model.CountryID), "-- Select Country--")</td>
    <td>@Html.EditorFor(m => m.Hobbies)</td>
    <td>
        @foreach(var sex in (List<Sex>)ViewData["Sex"])
        {
            <label>
                @Html.RadioButtonFor(m => m.SexID, sex.ID, new { id = "" })
                <span>@sex.SexName</span>
            </label>
        }
    </td>
</tr>