ASP.NET 5 MVC 6中的单选按钮标记助手

Question

我没有在ASP.NET 5 MVC 6中看到任何用于单选按钮的标记助手.在我需要使用单选按钮的情况下,处理表单元素的正确方法是什么？

Answer 1

所有输入类型都有一个TagHelper,其中包括单选按钮类型.假设你有一个像这样的视图模型

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; }        
}

在你的GET行动中,

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);
}

在视图中,您只需使用标记作为输入标记.

@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>

发布表单时,所选角色的Rold Id将位于该SelectedRole属性中

请记住,上面的剃刀代码将为循环生成的每个输入生成具有相同 Id属性值和name属性值的输入元素.在上述例子中,它会产生3个输入元件(单选按钮类型)与Id 和name属性值设置为SelectedRole.模型绑定将作为name属性值与SelectedRole视图模型中的属性name()匹配,但重复的Id属性值可能会给您带来客户端代码的麻烦(文档中的重复ID无效)

Answer 2

虽然有使用的解决方案asp-for="SomeField"，但我发现最简单的解决方案是将视图模型字段与单选按钮的name字段匹配。

查看型号：

public class MyViewModel
{
   public string MyRadioField { get; set; }
}

形式（为了清楚起见，没有标签）：

@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>

提交表单时，MyRadioField会填充选中单选按钮的值。