ASP.NET MVC Ya / Tidak Radio Buttons dengan Strong Bound Model MVC

132

Adakah yang tahu cara mengikat tombol radio Ya / Tidak ke properti boolean dari Model yang diketik dengan kuat di ASP.NET MVC.

Model

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

Melihat

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

Terima kasih

LARUTAN:

Terima kasih untuk Brian untuk arahannya, tapi itu kebalikan dari apa yang ditulisnya. Seperti itu -

<%@  Page Title="blah"  Inherits="MyClass"%>
<dd>
    <%= Html.RadioButton("blah", !Model.blah) %> Yes
    <%= Html.RadioButton("blah", Model.blah) %> No
</dd>
brianstewey
sumber
4
"Masalah" dengan solusi ini (dan saya menggunakan gaya Ben Cull dalam proyek saya) adalah Anda tidak dapat membuat label dengan mereka. Kedua input tombol radio akan memiliki id dan nama yang sama, jadi jika Anda menggunakan Html.LabelFor, itu akan terhubung ke input tombol radio pertama di DOM dengan id itu. Seperti saya katakan, saya menggunakan solusi ini untuk tombol radio untuk mewakili bidang boolean, saya hanya ingin orang tahu bahwa label akan menjadi agak miring.
Gromer
2
Lihat jawaban Jeff Bobish untuk melihat cara memperbaiki masalah label secara elegan.
René

Jawaban:

74

Parameter kedua dipilih, jadi gunakan! untuk memilih nilai tidak ketika boolean salah.

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

Jika Anda menggunakan MVC 3 dan Razor, Anda juga dapat menggunakan yang berikut ini:

@Html.RadioButtonFor(model => model.blah, true) Yes
@Html.RadioButtonFor(model => model.blah, false) No
Ben Cull
sumber
56

Berikut adalah contoh yang lebih lengkap menggunakan fieldsetalasan aksesibilitas dan menetapkan tombol pertama sebagai default. Tanpa sebuahfieldset , untuk apa tombol radio secara keseluruhan tidak dapat ditentukan secara pemrograman.

Model

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

Melihat

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

Anda dapat menambahkan @checkedargumen ke objek anonim untuk mengatur tombol radio sebagai default:

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

Perhatikan bahwa Anda dapat mengikat string dengan mengganti truedan falsedengan nilai-nilai string.

Daniel Imms
sumber
Anda harus benar-benar menggunakan {id = Html.Id ("menikah-benar")} baru, mengurangi masalah ruang lingkup potensial dari prefiks id yang dihasilkan.
eoleary
26

Membangun sedikit dari jawaban Ben, saya menambahkan atribut untuk ID sehingga saya bisa menggunakan label.

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

Saya harap ini membantu.

ctc
sumber
7
Biasanya labelnya adalah setelah tombol radio.
Daniel Imms
6
Menempatkan label di sekitar tombol radio sangat valid.
Scott Baker
23

Menambahkan tag label di sekitar tombol radio menggunakan HTML biasa akan memperbaiki masalah 'labelfor':

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

Mengklik pada teks sekarang memilih tombol radio yang sesuai.

Jeff Bobish
sumber
8

atau MVC 2.0:

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

Jika saya bisa melemparkan topi saya ke atas ring, saya pikir ada cara yang lebih bersih daripada jawaban yang ada untuk menggunakan kembali fungsi tombol radio.

Katakanlah Anda memiliki properti berikut di ViewModel Anda :

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

Anda dapat mengekspos properti itu melalui templat editor yang dapat digunakan kembali :

Pertama, buat file Views/Shared/EditorTemplates/YesNoRadio.vbhtml

Kemudian tambahkan kode berikut ke 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>

Anda dapat menghubungi editor untuk properti dengan menentukan secara manual nama templat di Tampilan Anda :

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

Pro:

  • Dapatkan untuk menulis HTML dalam editor HTML alih-alih menambahkan string dalam kode di belakang.
  • Mempertahankan DisplayName DataAnnotation
  • Mengizinkan klik Label untuk mengaktifkan tombol radio
  • Kode seminimal mungkin untuk dipertahankan dalam bentuk (1 baris). Jika ada yang salah dengan cara render, ambil dengan template.
KyleMit
sumber
Ini bagus, tapi bagaimana dengan opsi Ketiga untuk Boolean? @ Html.RadioButtonFor (Function (Model) Model.IsVerified, True) <span> Ya </span> @ Html.RadioButtonFor (Function (Model) Model) Apakah Diverifikasi, Salah) <span> Tidak </span> @ Html.RadioButtonFor (Fungsi (Model) Model. Diverifikasi, Tidak Ada)) <span> Tertunda </span>
JoshYates1980
1

Saya akhirnya mengemas ini menjadi metode ekstensi sehingga (1) saya bisa membuat label dan radio sekaligus dan (2) jadi saya tidak perlu repot menentukan ID saya sendiri:

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

Pemakaian:

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