2010-04-01 11 views
114

Czy ktoś wie, jak powiązać przycisk radiowy Tak/Nie z właściwością boolowską silnie wpisanego modelu w środowisku ASP.NET MVC.ASP.NET MVC Tak/Nie Przyciski radiowe z mocno powiązanym modelem MVC

model

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

Zobacz

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

Dzięki

ROZWIĄZANIE:

Dzięki Brian dla kierunku, ale to było przeciwieństwem tego, co pisał. Jako tak -

+4

"Problem" z tymi rozwiązaniami (i używam stylu Ben Cull w moim projekcie) polega na tym, że nie można z nimi tworzyć etykiet. Oba wejścia przycisku radiowego będą miały ten sam identyfikator i nazwę, więc jeśli użyjesz Html.LabelFor, połączy on pierwsze wejście przycisku radiowego w DOM z tym identyfikatorem. Tak jak mówiłem, używam tego rozwiązania dla przycisków radiowych do reprezentowania pola logicznego, po prostu chciałem, aby ludzie wiedzieli, że etykiety będą nieco nieporęczne. – Gromer

+2

Zobacz odpowiedź Jeffa Bobisha, aby sprawdzić, jak rozwiązać problem z etykietą elegancko. –

Odpowiedz

67

Drugi parametr jest wybrany, więc użyj! aby wybrać brak wartości, gdy wartość logiczna jest fałszywa.

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

Jeśli używasz MVC 3 i Razor Można również użyć następujących:

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

lub MVC 2.0:

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

budynek nieco poza odpowiedzią Bena, dodałem atrybuty dla identyfikatora, abym mógł używać etykiet.

<%: 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" })%> 

Mam nadzieję, że to pomoże.

+7

Normalnie etykieta jest po przycisku radiowym. –

+4

Umieszczanie etykiety wokół przycisku opcji jest całkowicie poprawne. –

23

dodawania tagów etykiet wokół przycisków radiowych wykorzystujących regularne HTML będzie rozwiązać problem „” labelfor także:

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

kliknięcie na tekście teraz wybiera odpowiednią opcję.

49

Oto pełniejszy przykład z wykorzystaniem fieldset dla ułatwień dostępu i określania pierwszego przycisku jako domyślnego. Bez parametru fieldset nie można programowo określić znaczenia przycisków opcji jako całości.

model

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

Zobacz

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

Możesz dodać @checked argument anonimowego obiektu, aby ustawić opcję jako domyślną:

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

Należy pamiętać, że można powiązać łańcuch znaków, zastępując wartości true i false wartościami ciągu.

+0

To jest poprawna odpowiedź. Dzięki! –

+0

Powinieneś używać nowego {id = Html.Id ("married-true")}, redukując potencjalne problemy z zasięgiem generowanych prefiksów id. – eoleary

1

skończyło się to do pakowania metodą wydłużania tak (1) mógłby wygenerować etykietę i radio na raz i (2), więc nie trzeba było zamieszanie z określając własne identyfikatory:

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

Zastosowanie:

@Html.RadioButtonAndLabelFor(m => m.IsMarried, true, "Yes, I am married") 
5

Jeśli mogę wyrzucić mój kapelusz na ring, myślę, że jest bardziej przejrzysty sposób niż istniejących odpowiedzi na ponowne wykorzystanie funkcjonalności przycisku radiowego.

Powiedzmy masz następującą właściwość w swoim ViewModel:

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

można odsłonić tę właściwość przez wielokrotnego użytku editor template:

Najpierw utwórz plik Views/Shared/EditorTemplates/YesNoRadio.vbhtml

Następnie dodać następujący kod: 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> 

Można wywołać edytor właściwości ręcznie podając nazwę szablonu w View:

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

Plusy:

  • Get napisać HTML w edytorze HTML zamiast dołączania ciągów w kodzie za.
  • zachowuje NazwaWyświetlana DataAnnotation
  • Pozwala kliknie na etykiecie, aby włączyć przycisk radiowy
  • najmniejszym możliwym kod do utrzymania w postaci (1 linia). Jeśli coś jest nie tak ze sposobem renderowania, weź go za pomocą szablonu.
+0

To jest dobre, ale co z trzecią opcją dla Boolean? @ Html.RadioButtonFor (function (model) Model.IsVerified, True) Tak @ Html.RadioButtonFor (function (model) Model.IsVerified, False) Nie @ Html.RadioButtonFor (function (model) Model.IsVerified , Nic)) W oczekiwaniu na JoshYates1980