web-dev-qa-db-ja.com

ASP.NET 5 MVC 6のラジオボタンタグヘルパー

ASP.NET 5 MVC 6にはラジオボタンのタグヘルパーが表示されません。ラジオボタンを使用する必要があるフォーム要素を処理する正しい方法は何ですか？

asp.net-mvcasp.net-coreasp.net-core-mvctag-helpers
24
Sam

ラジオボタンタイプも含むすべての入力タイプ用の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属性値を持つ入力要素を生成することに注意してください。上記の例では、Idおよびname属性値がSelectedRoleに設定された3つの入力要素（ラジオボタンタイプ）を生成します。モデルバインディングは、ビューモデルのプロパティ名（name）と一致するSelectedRole属性値として機能しますが、重複したId属性値により、クライアント側のコードで問題が発生する可能性があります（重複したId文書が無効です）

37
Shyju

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にチェックされたラジオボタンの値が入力されます。

3
Better Budget