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>

감사

해결책:

지시에 대해 Brian에게 감사하지만 그가 쓴 것과 반대였습니다. 따라서-

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

4
이 솔루션의 "문제"(및 프로젝트에서 Ben Cull 스타일을 사용하고 있음)는 레이블을 사용할 수 없다는 것입니다. 두 라디오 버튼 입력의 ID와 이름은 동일하므로 Html.LabelFor를 사용하면 해당 ID가있는 DOM의 첫 번째 라디오 버튼 입력에 연결됩니다. 내가 말했듯이, 나는 라디오 버튼 에이 솔루션을 사용하여 부울 필드를 나타 내기 때문에 사람들이 레이블이 약간 기발 할 것임을 알기를 원했습니다.
Gromer

2
라벨 문제를 우아하게 해결하는 방법은 Jeff Bobish의 답변을 참조하십시오.
René

답변:


74

두 번째 매개 변수가 선택되었으므로! 부울이 false 일 때 no 값을 선택합니다.

<%= 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' }

당신은 대체하여 문자열로 결합 할 수 있습니다 truefalse문자열 값.


실제로 생성 된 id 접두사의 잠재적 범위 문제를 줄이려면 new {id = Html.Id ( "married-true")}를 사용해야합니다.
eoleary

26

Ben의 답변을 약간 벗어나서 레이블에 사용할 수 있도록 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
라디오 버튼 주위에 레이블을 붙이는 것은 완벽하게 유효합니다.
Scott Baker

23

일반 HTML을 사용하여 라디오 버튼 주위에 레이블 태그를 추가하면 'labelfor'문제도 해결됩니다.

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

텍스트를 클릭하면 적절한 라디오 버튼이 선택됩니다.


8

또는 MVC 2.0 :

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

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 행)으로 유지할 수있는 최소 코드입니다. 자르는 방식에 문제가있는 경우 템플릿으로 가져갑니다.

이것은 좋지만 부울에 대한 세 번째 옵션은 어떻습니까? @ Html.RadioButtonFor (Function (Model) Model.IsVerified, True) <span> 예 </ span> @ Html.RadioButtonFor (Function (Model) Model.IsVerified, False) <span> No </ span> @ Html.RadioButtonFor (기능 (모델) Model.IsVerified, Nothing)) <span> 보류 중 </ 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.