ASP.NET MVC ใช่ / ไม่ใช่ปุ่มวิทยุที่มีขอบเขตอย่างแน่นหนารุ่น MVC


134

ไม่มีใครรู้วิธีผูกปุ่มตัวเลือก Yes / No กับคุณสมบัติบูลีนของ Strongly Typed Model ใน 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
"ปัญหา" ในการแก้ปัญหาเหล่านี้ (และฉันใช้สไตล์ Ben Cull ในโครงการของฉัน) คือคุณไม่สามารถใช้ป้ายกำกับได้ อินพุตปุ่มตัวเลือกทั้งสองจะมี ID และชื่อเดียวกันดังนั้นหากคุณใช้ Html.LabelFor มันจะเชื่อมโยงกับอินพุตปุ่มตัวเลือกแรกใน DOM พร้อมกับ id นั้น อย่างที่ฉันพูดฉันใช้โซลูชันนี้สำหรับปุ่มตัวเลือกเพื่อแสดงฟิลด์บูลีนฉันแค่อยากให้คนอื่นรู้ว่าป้ายกำกับจะดูไม่น่าสนใจสักหน่อย
Gromer

2
ดูคำตอบของ Jeff Bobish เพื่อดูวิธีแก้ไขปัญหาฉลากอย่างสวยงาม
René

คำตอบ:


75

พารามิเตอร์ที่สองถูกเลือกดังนั้นใช้! เพื่อเลือกค่าไม่มีเมื่อบูลีนเป็นเท็จ

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

200

หากคุณใช้ MVC 3 และ Razor คุณสามารถใช้สิ่งต่อไปนี้:

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

58

นี่คือตัวอย่างที่สมบูรณ์ยิ่งขึ้นโดยใช้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 ("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>

การคลิกที่ข้อความจะเป็นการเลือกปุ่มตัวเลือกที่เหมาะสม



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> ไม่ใช่ </span> @ Html.RadioButtonFor (Function (Model) 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.