Model binding on radio button(s) returns null for that property (ASP.NET Core)

Question

So I have four radio buttons that are bound to one of my model's properties all with different values. However, when the form submits, that property is returning null (while everything else returns correctly). Code:

<div id="RadioButtonGroup">
    <label asp-for="Object.PropertyOne" class="radio-inline">
         <input asp-for="Object.PropertyOne" value="A"  type="radio" name="optradio" >Option One
    </label>
    <label asp-for="Object.PropertyOne" class="radio-inline">
         <input asp-for="Object.PropertyOne" value="B"  type="radio" name="optradio" >Option Two
    </label>
    <label asp-for="Object.PropertyOne" class="radio-inline">
         <input asp-for="Object.PropertyOne" value="C"  type="radio" name="optradio" >Option Three
    </label>
     <label asp-for="Object.PropertyOne" class="radio-inline">
         <input asp-for="Object.PropertyOne" value="D"  type="radio" name="optradio" >Option Four
    </label>
</div>

I select one, submit the form, and Object.PropertyOne returns null. But if I manually set Object.PropertyOne in my ViewModel, it displays correctly. What am I missing?

Answer 1

Do not specify a name for your radio buttons manually. If you remove name="optradio" you will see that the tag helper will emit a name. The Model Binder will not correctly process your property if you specify your own name.

You can see this in action by adding a second property PropertyTwo and looking at the source code and debugging the controller. You will find that PropertyTwo has a name of Object_PropertyTwo for each radio button, and that it will bind correctly (whereas Object.PropertyOne still fails to bind):

Model

 public class MyObject
   {
      public string PropertyOne { get; set; }
      public string PropertyTwo { get; set; }
   }

   public class MyModel
   {
      public MyObject Object { get; set; }
   }

Controller

 public ActionResult Foo()
  {
     return View(new MyModel() { Object = new MyObject() });
  }

  [HttpPost]
  public ActionResult Foo(MyModel model)
  {
     return View();
  }

View

@{
   ViewData["Title"] = "Test Page";
}

@model MyModel

<form asp-controller="Home" asp-action="Foo" method="post">
   <div id="RadioButtonGroup">
      <label asp-for="Object.PropertyOne" class="radio-inline">
         <input asp-for="Object.PropertyOne" value="A" type="radio" name="optradio" >Option One
      </label>
      <label asp-for="Object.PropertyOne" class="radio-inline">
         <input asp-for="Object.PropertyOne" value="B" type="radio" name="optradio" >Option Two
      </label>
      <label asp-for="Object.PropertyOne" class="radio-inline">
         <input asp-for="Object.PropertyOne" value="C" type="radio" name="optradio" >Option Three
      </label>
      <label asp-for="Object.PropertyOne" class="radio-inline">
         <input asp-for="Object.PropertyOne" value="D" type="radio" name="optradio" >Option Four
      </label>
   </div>
   <div id="RadioButtonGroup">
      <label asp-for="Object.PropertyOne" class="radio-inline">
         <input asp-for="Object.PropertyTwo" value="A" type="radio">Option One
      </label>
      <label asp-for="Object.PropertyOne" class="radio-inline">
         <input asp-for="Object.PropertyTwo" value="B" type="radio">Option Two
      </label>
      <label asp-for="Object.PropertyOne" class="radio-inline">
         <input asp-for="Object.PropertyTwo" value="C" type="radio">Option Three
      </label>
      <label asp-for="Object.PropertyOne" class="radio-inline">
         <input asp-for="Object.PropertyTwo" value="D" type="radio">Option Four
      </label>
   </div>
   <input type="submit" />
</form>