Radio Button Tag Helpers in ASP.NET 5 MVC 6
There is a TagHelper for all the input types which includes the radio button type as well. Assuming you have a view model like this
public class CreateUserVm
{
public string UserName { set; get; }
public IEnumerable<RoleVm> Roles { set; get; }
public int SelectedRole { set; get; }
}
public class RoleVm
{
public int Id { set; get; }
public string RoleName { set; get; }
}
And in your GET action,
public IActionResult Index()
{
var vm = new CreateUserVm
{
Roles = new List<RoleVm>
{
new RoleVm {Id = 1, RoleName = "Admin"},
new RoleVm {Id = 2, RoleName = "Editor"},
new RoleVm {Id = 3, RoleName = "Reader"}
}
};
return View(vm);
}
In the view, You can simply use markup for the input tag.
@model YourNamespaceHere.CreateUserVm
<form asp-action="Index" asp-controller="Home">
<label class="label">User name</label>
<div class="col-md-10">
<input type="text" asp-for="UserName" />
</div>
<label class="label">Select a Role</label>
<div class="col-md-10">
@foreach (var item in Model.Roles)
{
<input asp-for="SelectedRole" type="radio" value="@item.Id" /> @item.RoleName
}
</div>
<input type="submit" />
</form>
When you post your form, The Rold Id for the selected role will be in the SelectedRole
property
Keep in mind that, the above razor code will generate input element with same Id
attribute value and name
attribute value for each input generated by the loop. In the above example, it will generate 3 input elements(radio button type) with the Id
and name
attribute value set to SelectedRole
. Model binding will work as the name
attribute value matches with the property name(SelectedRole
) in our view model, but the duplicate Id attribute values might give you trouble with client side code (duplicate Ids in a document is invalid)
While there are solutions to use asp-for="SomeField"
, I found that the easiest solution was to just match a view model field with the radio button's name
field.
View Model:
public class MyViewModel
{
public string MyRadioField { get; set; }
}
Form (without labels for clarity):
@model MyViewModel
<form asp-action="SomeAction" asp-controller="SomeController">
<input type="radio" name="MyRadioField" value="option1" checked />
<input type="radio" name="MyRadioField" value="option2" />
<input type="radio" name="MyRadioField" value="option3" />
<input type="submit" />
</form>
When the form is submitted, MyRadioField
is populated with value of the checked radio button.