ASP.NET MVCはい/いいえ強くバインドされたモデルMVCのラジオボタン


132

はい/いいえラジオボタンをASP.NET MVCの厳密に型指定されたモデルのブールプロパティにバインドする方法を知っている人はいますか?

型番

public class MyClass
{
     public bool Blah { get; set; }
}

見る

<%@  Page Title="blah"  Inherits="MyClass"%>
    <dd>
        <%= Html.RadioButton("blah", Model.blah) %> Yes
        <%= Html.RadioButton("blah", Model.blah) %> No
    </dd>

ありがとう

解決:

ブライアンの指示に感謝しますが、それは彼が書いたものとは逆でした。そのように-

<%@  Page Title="blah"  Inherits="MyClass"%>
<dd>
    <%= Html.RadioButton("blah", !Model.blah) %> Yes
    <%= Html.RadioButton("blah", Model.blah) %> No
</dd>

4
これらのソリューションの "問題"(および私はプロジェクトでベンカルスタイルを使用しています)は、それらを使用してラベルを付けることができないことです。両方のラジオボタン入力は同じIDと名前を持つため、Html.LabelForを使用すると、そのIDを持つDOMの最初のラジオボタン入力にリンクされます。私が言ったように、私はブールボタンを表すためにラジオボタンにこのソリューションを使用しています。ラベルが少し不安定になることを人々に知らせたかっただけです。
Gromer、

2
ラベルの問題をエレガントに修正する方法については、Jeff Bobishの回答を参照してください。
ルネ

回答:


74

2番目のパラメーターが選択されているので、!ブール値がfalseの場合、値なしを選択します。

<%= Html.RadioButton("blah", !Model.blah) %> Yes 
<%= Html.RadioButton("blah", Model.blah) %> No 

198

MVC 3とRazorを使用している場合は、以下も使用できます。

@Html.RadioButtonFor(model => model.blah, true) Yes
@Html.RadioButtonFor(model => model.blah, false) No

56

fieldsetアクセシビリティの理由でを使用し、最初のボタンをデフォルトとして指定する、より完全な例を次に示します。がなければ、fieldsetラジオボタン全体の目的をプログラムで決定することはできません。

型番

public class MyModel
{
    public bool IsMarried { get; set; }
}

見る

<fieldset>
    <legend>Married</legend>

    @Html.RadioButtonFor(e => e.IsMarried, true, new { id = "married-true" })
    @Html.Label("married-true", "Yes")

    @Html.RadioButtonFor(e => e.IsMarried, false, new { id = "married-false" })
    @Html.Label("married-false", "No")
</fieldset>

@checked匿名オブジェクトに引数を追加して、ラジオボタンをデフォルトとして設定できます。

new { id = "married-true", @checked = 'checked' }

あなたが交換することにより、文字列に結合することができることを注意trueし、false文字列値で。


実際にはnew {id = Html.Id( "married-true")}を使用して、生成されたID接頭辞の潜在的なスコープの問題を減らす必要があります。
eoleary

26

ベンの答えに少し基づいて、ラベルを使用できるようにIDの属性を追加しました。

<%: Html.Label("isBlahYes", "Yes")%><%= Html.RadioButtonFor(model => model.blah, true, new { @id = "isBlahYes" })%>
<%: Html.Label("isBlahNo", "No")%><%= Html.RadioButtonFor(model => model.blah, false, new { @id = "isBlahNo" })%>

これがお役に立てば幸いです。


7
通常、ラベルはラジオボタンの後ろにあります。
Daniel Imms

6
ラジオボタンの周りにラベルを付けることは完全に有効です。
スコットベイカー

23

通常のHTMLを使用してラジオボタンの周囲にラベルタグを追加すると、「labelfor」の問題も修正されます。

<label><%= Html.RadioButton("blah", !Model.blah) %> Yes</label>
<label><%= Html.RadioButton("blah", Model.blah) %> No</label>

テキストをクリックすると、適切なラジオボタンが選択されます。



5

私が帽子をリングに入れることができれば、ラジオボタンの機能を再利用するために、既存の回答よりもきれいな方法があると思います。

ViewModelに次のプロパティがあるとします。

Public Class ViewModel
    <Display(Name:="Do you like Cats?")>
    Public Property LikesCats As Boolean
End Class

このプロパティは、再利用可能なエディターテンプレートを介して公開できます。

まず、ファイルを作成します Views/Shared/EditorTemplates/YesNoRadio.vbhtml

次に、次のコードをYesNoRadio.vbhtmlに追加します。

@ModelType Boolean?

<fieldset>
    <legend>
        @Html.LabelFor(Function(model) model)
    </legend>

    <label>
        @Html.RadioButtonFor(Function(model) model, True) Yes
    </label>
    <label>
        @Html.RadioButtonFor(Function(model) model, False) No
    </label>
</fieldset>

ビューでテンプレート名を手動で指定して、プロパティのエディターを呼び出すことができます

@Html.EditorFor(Function(model) model.LikesCats, "YesNoRadio")

長所:

  • コードビハインドで文字列を追加する代わりに、HTMLエディターでHTMLを記述します。
  • DisplayName DataAnnotationを保持します
  • ラベルをクリックしてラジオボタンを切り替えることができます
  • フォーム(1行)で維持することができる最も少ないコード。レンダリングの方法に問題がある場合は、テンプレートを使用してください。

これは良いですが、ブール値の3番目のオプションはどうですか?@ Html.RadioButtonFor(Function(Model)Model.IsVerified、True)<span>はい</ span> @ Html.RadioButtonFor(Function(Model)Model.IsVerified、False)<span>いいえ</ span> @ Html.RadioButtonFor (Function(Model)Model.IsVerified、Nothing))<span> Pending </ span>
JoshYates1980

1

これを拡張メソッドにパッケージ化したので、(1)ラベルとラジオを一度に生成でき、(2)自分のIDを指定する手間を省くことができました。

public static class HtmlHelperExtensions
{
    public static MvcHtmlString RadioButtonAndLabelFor<TModel, TProperty>(this HtmlHelper<TModel> self, Expression<Func<TModel, TProperty>> expression, bool value, string labelText)
    {
        // Retrieve the qualified model identifier
        string name = ExpressionHelper.GetExpressionText(expression);
        string fullName = self.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName(name);

        // Generate the base ID
        TagBuilder tagBuilder = new TagBuilder("input");
        tagBuilder.GenerateId(fullName);
        string idAttr = tagBuilder.Attributes["id"];

        // Create an ID specific to the boolean direction
        idAttr = String.Format("{0}_{1}", idAttr, value);

        // Create the individual HTML elements, using the generated ID
        MvcHtmlString radioButton = self.RadioButtonFor(expression, value, new { id = idAttr });
        MvcHtmlString label = self.Label(idAttr, labelText);

        return new MvcHtmlString(radioButton.ToHtmlString() + label.ToHtmlString());
    }
}

使用法:

@Html.RadioButtonAndLabelFor(m => m.IsMarried, true, "Yes, I am married")
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.