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
"Проблема" цих рішень (і я використовую стиль Бен Кулл у своєму проекті) полягає в тому, що ви не можете робити етикетки з ними. На обох входах радіо кнопок буде однаковий ідентифікатор та ім'я, тому якщо ви використовуєте Html.LabelFor, він посилатиметься на перший вхід перемикача в DOM з цим ідентифікатором. Як я вже говорив, я використовую ці рішення для перемикачів, щоб зобразити булеве поле, я просто хотів, щоб люди знали, що мітки будуть трохи химерними.
Громер

2
Дивіться відповідь Джеффа Бобіша, щоб дізнатися, як виправити проблему етикетки на елегантному рівні.
Рене

Відповіді:


74

Вибраний другий параметр, тому використовуйте! щоб вибрати значення 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' }

Зауважте, що ви можете прив'язати до рядка, замінивши trueі falseзначення рядка.


Справді слід використовувати новий {id = Html.Id ("одружений-правдивий")}, зменшуючи потенційні проблеми щодо обсягу генерованих префіксів id.
eoleary

26

Відштовхуючись від відповіді Бена, я додав атрибути для ідентифікатора, щоб я міг використовувати мітки.

<%: 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
Зазвичай мітка є після перемикача.
Даніель Іммс

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 рядок). Якщо щось не в порядку із способом його відтворення, візьміть його за шаблон.

This is good, but what about a Third option for Boolean? @Html.RadioButtonFor(Function(Model) Model.IsVerified, True) <span>Yes</span> @Html.RadioButtonFor(Function(Model) Model.IsVerified, False) <span>No</span> @Html.RadioButtonFor(Function(Model) Model.IsVerified, Nothing)) <span>Pending</span>
JoshYates1980

1

I ended up packaging this into an extension method so (1) I could generate the label and radio at once and (2) so I didn't have to fuss with specifying my own IDs:

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

Usage:

@Html.RadioButtonAndLabelFor(m => m.IsMarried, true, "Yes, I am married")
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.