RadioButton Not Persisting on Submit When There's an Error - asp.net-mvc

Question

I have two groups of Radio Buttons on a page:
Phone 1: [ ] Home | [x] Work | [ ] Cell
Phone 2: [ ] Home | [ ] Work | [x] Cell
When you see the page, I'm setting the defaults for Phone 1, "Work", and for Phone 2, "Cell". What is happening is that when a user submits and does not enter a required FirstName, AND selects Home (for Phone 1) and Home (Phone 2) - when the page refreshes, Phone 1 is "Home" and Phone 2 is "Cell".
How is this so? Phone 2 should be "Home" because that's what I selected before I got the error message. Any feedback is greatly appreciated!
Here's the view:
#using (Html.BeginForm("create", "PetSittingRequest"))
{
<label class="labelleft" style="width: 100px">First Name:</label>
<div class="formfield" style="width: 205px">
#Html.TextBoxFor(model => model.ClientDetails[0].NameFirst, new { style = "width: 195px" })
#Html.ValidationMessageFor(model => model.ClientDetails[0].NameFirst, null )
</div>
// Phone #1 START
<label class="labelleft" style="width: 100px">Phone 1:</label>
<div class="formfield" style="width: 60px">
#Html.TextBoxFor(model => model.Phones[0].PhoneNumber, new { style = "width: 195px" })
#Html.ValidationMessageFor(model => model.Phones[0].PhoneNumber, null)
</div>
<div class="formfield" style="width: 60px"></div>
<div class="formfield" style="width: 95px"></div>
<div class="formfield" style="width: 60px">
#Html.RadioButtonFor(model => model.Phones[0].Location, "Home", new { #class="radiobtn" } ) Home
</div>
<div class="formfield" style="width: 60px">
#Html.RadioButtonFor(model => model.Phones[0].Location, "Work", new { #class="radiobtn", #checked = true } ) Work
</div>
<div class="formfield" style="width: 60px">
#Html.RadioButtonFor(model => model.Phones[0].Location, "Cell", new { #class="radiobtn" } ) Cell
</div>
// Phone #2 START
<label class="labelleft" style="width: 100px">Phone 2:</label>
<div class="formfield" style="width: 60px">
#Html.TextBoxFor(model => model.Phones[1].PhoneNumber, new { style = "width: 195px" })
#Html.ValidationMessageFor(model => model.Phones[1].PhoneNumber, null)
</div>
<div class="formfield" style="width: 60px"></div>
<div class="formfield" style="width: 95px"></div>
<div class="formfield" style="width: 60px">
#Html.RadioButtonFor(model => model.Phones[1].Location, "Home", new { #class="radiobtn" } ) Home
</div>
<div class="formfield" style="width: 60px">
#Html.RadioButtonFor(model => model.Phones[1].Location, "Work", new { #class="radiobtn" } ) Work
</div>
<div class="formfield" style="width: 60px">
#Html.RadioButtonFor(model => model.Phones[1].Location, "Cell", new { #class="radiobtn", #checked = true } ) Cell
</div>
}
The controller that handles the post is this:
[HttpPost]
public ActionResult Create(ClientUser x)
{
try
{
return View("Index", x);
}
catch
{
return View();
}
}
Here are the models:
public class ClientUser
{
public List<ClientDetail> ClientDetails { get; set; }
public List<Phone> Phones { get; set; }
}
public class ClientDetail
{
[Required(ErrorMessage="This field is required.")]
public string NameFirst { get; set; }
}
public class Phone
{
[Required(ErrorMessage="This field is required.")]
public string PhoneNumber { get; set; }
[Required(ErrorMessage="This field is required.")]
public string Location { get; set; }
}

Answer 1

The problem is that at one side you are checking values of your radios using html attributes and on the other side you want your model value to set the same value. so what you want to do can be done by simply removing the #checked = true from your view for each radio buttons and if you need some specific value to be selected when first time form is rendered you can do something like
public ActionResult Create()
{
ClientUser clientUser = new ClientUser();
clientUser.ClientDetails = new List<ClientDetail> { new ClientDetail()};
clientUser.Phones = new List<Phone> { new Phone{Location = "Work"}, new Phone{Location = "Cell"} };
return View(clientUser);
}
this will set value of first radio group to "Work" and second group to "Cell" and will also change the values accordingly when you make changes on form and it is rendered back in case of an error. Moreover, why are you having list of clientDetails when you are showing just one user on the form. i would suggest changing your viewmodel to
public class ClientUser
{
public ClientDetail ClientDetails { get; set; }
public List<Phone> Phones { get; set; }
}