ช่องทำเครื่องหมายสำหรับบูลีนที่เป็นโมฆะ

Question 1

โมเดลของฉันมีบูลีนที่ต้องเป็นโมฆะ

public bool? Foo
{
   get;
   set;
}

ดังนั้นใน Razor cshtml ของฉันฉันมี

@Html.CheckBoxFor(m => m.Foo)

ยกเว้นไม่ได้ผล ไม่หล่อด้วย (บูล) ถ้าฉันทำ

@Html.CheckBoxFor(m => m.Foo.Value)

ที่ไม่สร้างข้อผิดพลาด แต่ไม่ผูกกับโมเดลของฉันเมื่อโพสต์และ foo ถูกตั้งค่าเป็น null วิธีใดเป็นวิธีที่ดีที่สุดในการแสดง Foo บนเพจและทำให้มันเชื่อมโยงกับโมเดลของฉันในโพสต์

Question 2

ฉันได้มันไปทำงานด้วย

@Html.EditorFor(model => model.Foo)

จากนั้นสร้างไฟล์ที่ Views / Shared / EditorTemplates / Boolean.cshtml ดังต่อไปนี้:

@model bool?

@Html.CheckBox("", Model.GetValueOrDefault())

Question 3

คำตอบที่พบในคำถามที่คล้ายกัน - การแสดงผล Nullable Bool เป็นช่องทำเครื่องหมาย ตรงไปตรงมามากและใช้งานได้จริง:

@Html.CheckBox("RFP.DatesFlexible", Model.RFP.DatesFlexible ?? false)
@Html.Label("RFP.DatesFlexible", "My Dates are Flexible")

เหมือนกับคำตอบที่ได้รับการยอมรับจาก @afinkelstein ยกเว้นว่าเราไม่ต้องการ 'เทมเพลตตัวแก้ไข' แบบพิเศษ

Question 4

ฉันมีbool? IsDisabled { get; set; }ในรุ่น แทรกหากอยู่ใน View

<div class="inputClass" id="disabled">
    <div>
    @if(Model.IsDisabled==null)
    {
        Model.IsDisabled = false;
    }           
    @Html.CheckBoxFor(model => model.IsDisabled.Value)         
    </div>
</div>

Question 5

โมเดลของฉันมีบูลีนที่ต้องเป็นโมฆะ

ทำไม? นี่ไม่สมเหตุสมผลเลย ช่องทำเครื่องหมายมีสองสถานะ: เลือก / ไม่เลือกหรือจริง / เท็จหากคุณต้องการ ไม่มีรัฐที่สาม

หรือรอให้คุณใช้โมเดลโดเมนของคุณในมุมมองของคุณแทนที่จะเป็นโมเดลมุมมอง? นั่นคือปัญหาของคุณ ดังนั้นวิธีแก้ปัญหาสำหรับฉันคือใช้โมเดลมุมมองซึ่งคุณจะกำหนดคุณสมบัติบูลีนอย่างง่าย:

public class MyViewModel
{
    public bool Foo { get; set; }
}

และตอนนี้คุณจะมีการดำเนินการควบคุมของคุณผ่านโมเดลมุมมองนี้ไปยังมุมมองและสร้างช่องทำเครื่องหมายที่เหมาะสม

Question 6

การรวมฟิลด์ดั้งเดิมกับฟิลด์ที่ซ่อนไว้เพื่อชี้แจงว่าไม่แนะนำให้ใช้ False หรือ Null

ช่องทำเครื่องหมายไม่ใช่สิ่งที่คุณควรใช้ แต่มีเพียงสถานะเดียวเท่านั้น: การยืม มิฉะนั้นอาจเป็นอะไรก็ได้

เมื่อฟิลด์ฐานข้อมูลของคุณเป็นบูลีนที่เป็นโมฆะ ( bool?) UX ควรใช้ 3-Radio Buttons โดยที่ปุ่มแรกแสดงถึง "Checked" ของคุณปุ่มที่สองหมายถึง "Not Checked" และปุ่มที่สามแทนค่า null ของคุณไม่ว่าจะเป็นความหมายใดก็ตาม หมายถึงโมฆะ คุณสามารถใช้รายการ<select><option>แบบเลื่อนลงเพื่อบันทึกอสังหาริมทรัพย์ได้ แต่ผู้ใช้ต้องคลิกสองครั้งและตัวเลือกต่างๆยังไม่ชัดเจนในทันที

  1     0      null 
True  False  Not Set
Yes   No     Undecided
Male  Female Unknown
On    Off    Not Detected

RadioButtonList กำหนดเป็นส่วนขยายชื่อ RadioButtonForSelectList สร้างปุ่มตัวเลือกสำหรับคุณรวมทั้งค่าที่เลือก / ตรวจสอบและตั้งค่า <div class="RBxxxx">เพื่อให้คุณสามารถใช้ css เพื่อทำให้ปุ่มตัวเลือกของคุณเป็นแนวนอน (display: inline-block), แนวตั้งหรือ ในรูปแบบตาราง (display: inline-block; width: 100px;)

ในโมเดล (ฉันใช้สตริงสตริงสำหรับคำจำกัดความตามพจนานุกรมเป็นตัวอย่างการสอนคุณสามารถใช้บูล?, สตริง)

public IEnumerable<SelectListItem> Sexsli { get; set; }
       SexDict = new Dictionary<string, string>()
        {
                { "M", "Male"},
                { "F", "Female" },
                { "U", "Undecided" },

        };

        //Convert the Dictionary Type into a SelectListItem Type
        Sexsli = SexDict.Select(k =>
              new SelectListItem
              {
                  Selected = (k.Key == "U"),
                  Text = k.Value,
                  Value = k.Key.ToString()
              });

<fieldset id="Gender">
<legend id="GenderLegend" title="Gender - Sex">I am a</legend>
    @Html.RadioButtonForSelectList(m => m.Sexsli, Model.Sexsli, "Sex") 
        @Html.ValidationMessageFor(m => m.Sexsli)
</fieldset>

public static class HtmlExtensions
{
public static MvcHtmlString RadioButtonForSelectList<TModel, TProperty>(
    this HtmlHelper<TModel> htmlHelper,
    Expression<Func<TModel, TProperty>> expression,
    IEnumerable<SelectListItem> listOfValues,
    String rbClassName = "Horizontal")
{
var metaData = ModelMetadata.FromLambdaExpression(expression, htmlHelper.ViewData);
var sb = new StringBuilder();

if (listOfValues != null)
{
    // Create a radio button for each item in the list 
    foreach (SelectListItem item in listOfValues)
    {
        // Generate an id to be given to the radio button field 
        var id = string.Format("{0}_{1}", metaData.PropertyName, item.Value);

        // Create and populate a radio button using the existing html helpers 
        var label = htmlHelper.Label(id, HttpUtility.HtmlEncode(item.Text));

        var radio = String.Empty;

        if (item.Selected == true)
        {
            radio = htmlHelper.RadioButtonFor(expression, item.Value, new { id = id, @checked = "checked" }).ToHtmlString();
        }
        else
        {
            radio = htmlHelper.RadioButtonFor(expression, item.Value, new { id = id }).ToHtmlString();

        }// Create the html string to return to client browser
        // e.g. <input data-val="true" data-val-required="You must select an option" id="RB_1" name="RB" type="radio" value="1" /><label for="RB_1">Choice 1</label> 

        sb.AppendFormat("<div class=\"RB{2}\">{0}{1}</div>", radio, label, rbClassName);
    }
}

return MvcHtmlString.Create(sb.ToString());
}
}

Question 7

สำหรับฉันวิธีแก้ปัญหาคือเปลี่ยนโมเดลมุมมอง พิจารณาว่าคุณกำลังค้นหาใบแจ้งหนี้ ใบแจ้งหนี้เหล่านี้สามารถชำระหรือไม่ก็ได้ ดังนั้นการค้นหาของคุณจึงมีสามตัวเลือก: ชำระเงินยังไม่ได้ชำระหรือ "ฉันไม่สนใจ"

เดิมฉันตั้งค่านี้เป็นบูล? สนาม:

public bool? PaidInvoices { get; set; }

สิ่งนี้ทำให้ฉันสะดุดกับคำถามนี้ ฉันได้สร้างประเภท Enum และจัดการสิ่งนี้ดังนี้:

@Html.RadioButtonFor(m => m.PaidInvoices, PaidStatus.NotSpecified, new { @checked = true })
@Html.RadioButtonFor(m => m.PaidInvoices, PaidStatus.Yes) 
@Html.RadioButtonFor(m => m.PaidInvoices, PaidStatus.No)

แน่นอนว่าฉันมีป้ายกำกับและมีข้อความระบุไว้ฉันแค่หมายถึงนี่เป็นอีกทางเลือกหนึ่งที่ควรพิจารณา

Question 8

ช่องทำเครื่องหมายให้คุณ 2 ค่าเท่านั้น (จริงเท็จ) บูลีนที่เป็นโมฆะมี 3 ค่า (จริงเท็จโมฆะ) ดังนั้นจึงไม่สามารถทำได้โดยใช้ช่องทำเครื่องหมาย

ตัวเลือกที่ดีคือใช้เมนูแบบเลื่อนลงแทน

รุ่น

public bool? myValue;
public List<SelectListItem> valueList;

ตัวควบคุม

model.valueList = new List<SelectListItem>();
model.valueList.Add(new SelectListItem() { Text = "", Value = "" });
model.valueList.Add(new SelectListItem() { Text = "Yes", Value = "true" });
model.valueList.Add(new SelectListItem() { Text = "No", Value = "false" });

ดู

@Html.DropDownListFor(m => m.myValue, valueList)

Question 9

ฉันจะสร้างเทมเพลตสำหรับมันและใช้เทมเพลตนั้นกับ EditorFor ()

นี่คือวิธีที่ฉันทำ:

สร้างเทมเพลตของฉันซึ่งโดยพื้นฐานแล้วเป็นมุมมองบางส่วนที่ฉันสร้างขึ้นในไดเร็กทอรี EditorTemplates ภายใต้ Shared ภายใต้ Views ตั้งชื่อเป็น (ตัวอย่าง) CheckboxTemplate::
```
@using System.Globalization    
@using System.Web.Mvc.Html    
@model bool?

@{
    bool? myModel = false;
    if (Model.HasValue)
    {
        myModel = Model.Value;
    }
}

<input type="checkbox" checked="@(myModel)" name="@ViewData.TemplateInfo.HtmlFieldPrefix" value="True" style="width:20px;" />
```
ใช้แบบนี้ (ในทุกมุมมอง):

@ Html.EditorFor (x => x.MyNullableBooleanCheckboxToBe, "CheckboxTemplate")

นั่นคือทั้งหมด

เทมเพลตมีประสิทธิภาพมากใน MVC ใช้มัน .. คุณสามารถสร้างทั้งหน้าเป็นเทมเพลตซึ่งคุณจะใช้กับ@Html.EditorFor(); โดยที่คุณส่งผ่านโมเดลมุมมองในนิพจน์แลมบ์ดา ..

Question 10

แนวทางที่สะอาดที่สุดที่ฉันสามารถทำได้คือการขยายส่วนขยายที่มีให้HtmlHelperในขณะที่ยังคงใช้ฟังก์ชันการทำงานที่ให้มาจากเฟรมเวิร์กซ้ำ

public static MvcHtmlString CheckBoxFor<T>(this HtmlHelper<T> htmlHelper, Expression<Func<T, bool?>> expression, IDictionary<string, object> htmlAttributes) {

    ModelMetadata modelMeta = ModelMetadata.FromLambdaExpression(expression, htmlHelper.ViewData);
    bool? value = (modelMeta.Model as bool?);

    string name = ExpressionHelper.GetExpressionText(expression);

    return htmlHelper.CheckBox(name, value ?? false, htmlAttributes);
}

ฉันทดลอง 'สร้าง' นิพจน์เพื่อให้สามารถส่งผ่านไปยังเจ้าของภาษาได้โดยตรงCheckBoxFor<Expression<Func<T, bool>>>แต่ฉันไม่คิดว่าจะเป็นไปได้

Question 11

ฉันเคยมีปัญหาคล้าย ๆ กันในอดีต

สร้างช่องทำเครื่องหมายใน HTML และตั้งค่าแอตทริบิวต์ name = "Foo" ซึ่งยังควรโพสต์อย่างถูกต้อง

<input type="checkbox" name="Foo" checked="@model.Foo.Value" /> Foo Checkbox<br />

Question 12

เพียงตรวจสอบค่า null และคืนค่าเท็จ:

@{ bool nullableValue = ((Model.nullableValue == null) || (Model.nullableValue == false)) ? false : true; }
@Html.CheckBoxFor(model => nullableValue)

Question 13

ฉันก็ประสบปัญหาเดียวกัน ฉันลองใช้วิธีการต่อไปนี้เพื่อแก้ปัญหาเพราะฉันไม่ต้องการเปลี่ยน DB และสร้าง EDMX อีกครั้ง

@{

   bool testVar = (Model.MYVar ? true : false);

 }

<label>@Html.CheckBoxFor(m => testVar)testVar</label><br />

Question 14

เมื่อสร้าง EditorTemplate สำหรับโมเดลที่มีบูลที่เป็นโมฆะ ...

แบ่งบูลที่เป็นโมฆะออกเป็น 2 บูลีน:

// Foo is still a nullable boolean.
public bool? Foo 
{
    get 
    { 
        if (FooIsNull)
            return null;

        return FooCheckbox;  
    }
    set
    {
        FooIsNull   = (value == null);
        FooCheckbox = (value ?? false);
    }
}

// These contain the value of Foo. Public only so they are visible in Razor views.
public bool FooIsNull { get; set; }
public bool FooCheckbox { get; set; }

ภายในเทมเพลตตัวแก้ไข:

@Html.HiddenFor(m => m.FooIsNull)

@if (Model.FooIsNull)
{
    // Null means "checkbox is hidden"
    @Html.HiddenFor(m => m.FooCheckbox)
}
else
{
    @Html.CheckBoxFor(m => m.FooCheckbox)
}

อย่าโพสต์แบ็คพร็อพเพอร์ตี้ Foo เดิมเนื่องจากตอนนี้คำนวณจาก FooIsNull และ FooCheckbox

Question 15

คำตอบทั้งหมดข้างต้นมาพร้อมกับปัญหาของมันเอง วิธีที่ง่ายที่สุด / สะอาดที่สุด IMO คือการสร้างตัวช่วย

มีดโกน MVC5

App_Code / Helpers.cshtml

@helper CheckBoxFor(WebViewPage page, string propertyName, bool? value, string htmlAttributes = null)
{
    if (value == null)
    {
        <div class="checkbox-nullable">
            <input type="checkbox" @page.Html.Raw(htmlAttributes)>
        </div>
    }
    else if (value == true)
    {
        <input type="checkbox" value="true" @page.Html.Raw(htmlAttributes) checked>
    }
    else
    {
        <input type="checkbox" value="false" @page.Html.Raw(htmlAttributes)>
    }
}

การใช้งาน

@Helpers.CheckBoxFor(this, "IsPaymentRecordOk", Model.IsPaymentRecordOk)

ในสถานการณ์ของฉันช่องทำเครื่องหมายที่เป็นโมฆะหมายความว่าเจ้าหน้าที่ยังไม่ได้ถามคำถามกับลูกค้าดังนั้นจึงรวมเข้าด้วยกัน.checkbox-nullableเพื่อให้คุณสามารถจัดรูปแบบได้อย่างเหมาะสมและช่วยให้ผู้ใช้ระบุได้ว่าไม่ใช่trueหรือfalse

CSS

.checkbox-nullable {
    border: 1px solid red;
    padding: 3px;
    display: inline-block;
}

Question 16

วิธีการขยาย:

        public static MvcHtmlString CheckBoxFor<TModel>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, bool?>> expression)
        {
            return htmlHelper.CheckBoxFor<TModel>(expression, null);
        }
        public static MvcHtmlString CheckBoxFor<TModel>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, bool?>> expression, object htmlAttributes)
        {
            ModelMetadata metadata = ModelMetadata.FromLambdaExpression(expression, htmlHelper.ViewData);
            bool? isChecked = null;
            if (metadata.Model != null)
            {
                bool modelChecked;
                if (Boolean.TryParse(metadata.Model.ToString(), out modelChecked))
                {
                    isChecked = modelChecked;
                }
            }
            return htmlHelper.CheckBox(ExpressionHelper.GetExpressionText(expression), isChecked??false ,  htmlAttributes);
        }

Question 17

ปุ่มมีประโยชน์ แต่พวกเขาไม่ได้ช่วยให้คุณสามารถยกเลิกการเลือก หากคุณต้องการพฤติกรรมนี้ให้ลองใช้เมนูแบบเลื่อนลง / เลือก รหัสต่อไปนี้จะสร้างSelectListและเชื่อมโยงกับบูลีนที่เป็นโมฆะได้สำเร็จ:

public static SelectList GetBoolTriState()
{
    var items = new List<SelectListItem>
    {
        new SelectListItem {Value = "", Text = ""},
        new SelectListItem {Value = "True", Text = "Yes"},
        new SelectListItem {Value = "False", Text = "No"},
    };

    return new SelectList(items, "Value", "Text");
}

Question 18

@{  bool testVar = ((bool)item.testVar ? true : false); }
  @Html.DisplayFor(modelItem => testVar)

Question 19

ลองแบบนี้ก็ได้

@Html.TextBoxFor(m => m.foo, new {   type = "checkbox" })

Question 20

นี่เป็นคำถามเก่าและคำตอบที่มีอยู่อธิบายทางเลือกส่วนใหญ่ แต่มีทางเลือกง่ายๆอย่างหนึ่งถ้าคุณมีบูล? ใน viewmodel ของคุณและคุณไม่สนใจเรื่อง null ใน UI ของคุณ:

@Html.CheckBoxFor(m => m.boolValue ?? false);