How to Bind ViewModal to Dropdownlist in asp.net mvc - asp.net

Question

Suppose that we have a doctor with its weekday schedule. I want to display this weekday schedule and update it in the view. My WeekDay class looks like this:
public class WeekDay
{
public int Id { get; set; }
public string DayName { get; set; }
public string EightTen { get; set; }
public string TenTwelve { get; set; }
public string TwelveFourteen { get; set; }
public string FourteenSixteen { get; set; }
public int DoctorId { get; set; }
public Doctor Doctor { get; set; }
}
And Here is the ViewModel I've created to pass it to the view:
public class DoctorWeekDaysViewModel
{
public DoctorWeekDaysViewModel()
{
WeekDays = new List<WeekDay>();
}
public DoctorWeekDaysViewModel(IEnumerable<WeekDay> weekDay = null)
{
WeekDays = weekDay ?? new List<WeekDay>();
}
public IEnumerable<WeekDay> WeekDays { get; set; }
}
In the controller, the corresponding action will return 6 objects of WeekDay Class. In this situation, I've converted it into list and created a ViewModel and returned the ViewModel to the view:
public ActionResult EditTimeTable()
{
string username = Session["Username"].ToString();
var doctor = _context.Doctors.FirstOrDefault(a => a.Username.Equals(username));
var weekdays = _context.WeekDays.Include(a => a.Doctor).Where(a => a.DoctorId.Equals(doctor.Id)).ToList();
DoctorWeekDaysViewModel viewModel = new DoctorWeekDaysViewModel(weekdays);
return View(viewModel);
}
Then In the view I've took it and showed it this way:
#model ClinicWebApp.Models.ViewModel.DoctorWeekDaysViewModel
#using (Html.BeginForm(FormMethod.Post))
{
#Html.AntiForgeryToken()
<div class="calendar-main mb-30">
<div class="row">
#{
var listItems = new List<ListItem> {
new ListItem { Text = "استراحت", Value = "استراحت" },
new ListItem { Text = "ویزیت", Value = "ویزیت" },
new ListItem { Text = "نهار", Value = "نهار" },
new ListItem { Text = "صبحانه", Value = "صبحانه" },
new ListItem { Text = "خالی", Value = "خالی" },
};
}
<table class="mb-0 table table-hover table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">8 تا 10</th>
<th scope="col">10 تا 12</th>
<th scope="col">12 تا 14</th>
<th scope="col">14 تا 16</th>
</tr>
</thead>
<tbody>
#foreach (var weekday in Model.WeekDays)
{
<tr>
<th scope="row">#weekday.DayName</th>
<td>
#Html.DropDownListFor(model => weekday.EightTen, new SelectList(listItems), weekday.EightTen, new {#class = "custom-select my-1 mr-sm-2"})
</td>
<td>
#Html.DropDownListFor(model => weekday.TenTwelve, new SelectList(listItems), weekday.TenTwelve, new {#class = "custom-select my-1 mr-sm-2"})
</td>
<td>
#Html.DropDownListFor(model => weekday.TwelveFourteen, new SelectList(listItems), weekday.TwelveFourteen, new {#class = "custom-select my-1 mr-sm-2"})
</td>
<td>
#Html.DropDownListFor(model => weekday.FourteenSixteen, new SelectList(listItems), weekday.FourteenSixteen, new {#class = "custom-select my-1 mr-sm-2"})
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
<footer class="bg-white p-4">
<div class="row">
<div class="col-md-12">
<div class="pull-left">
<button type="submit" class="btn btn-primary">save</button>
</div>
</div>
</div>
</footer>
}
The Output of This View is fine and everything is shown correctly:
Actual Html Output
But when I change the dropdownlist values and submit it to the corresponding action, The ViewModel will be null. here is my ActionResult:
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult EditTimeTable(DoctorWeekDaysViewModel viewModel)
{
...
}
I think the problem is my viewModel or dropdownlist that configured incorrectly. please help me to solve this problem.

Answer 1

You should custome Name of dropdown to make it correctly.
#Html.DropDownListFor(model => weekday.EightTen, new SelectList(listItems), weekday.EightTen, new {#class = "custom-select my-1 mr-sm-2", Name = "WeekDays[0].EightTen"})
Note: Name = WeekDays[0].EightTen
0: Index, increase for each loop.
EightTen: Name of each property follow up your dropdown accordingly.

Answer 2

Instead of using foreach, use for loop to iterate the weekday list.
#for (var weekday=0; weekday < Model.WeekDays.Count; weekday++)
{
<tr>
<th scope="row">#weekday.DayName</th>
<td>
#Html.DropDownListFor(m => m.WeekDays.ElementAt(weekday).EightTen, new SelectList(listItems), Model.WeekDays.ElementAt(weekday).EightTen, new {#class = "custom-select my-1 mr-sm-2"})
</td>
<td>
#Html.DropDownListFor(m => m.WeekDays.ElementAt(weekday).TenTwelve, new SelectList(listItems), Model.WeekDays.ElementAt(weekday).TenTwelve, new {#class = "custom-select my-1 mr-sm-2"})
</td>
<td>
#Html.DropDownListFor(m => m.WeekDays.ElementAt(weekday).TwelveFourteen, new SelectList(listItems), Model.WeekDays.ElementAt(weekday).TwelveFourteen, new {#class = "custom-select my-1 mr-sm-2"})
</td>
<td>
#Html.DropDownListFor(m => m.WeekDays.ElementAt(weekday).FourteenSixteen, new SelectList(listItems), Model.WeekDays.ElementAt(weekday).FourteenSixteen, new {#class = "custom-select my-1 mr-sm-2"})
</td>
</tr>
}