如何在 Web 应用程序 Asp.Net MVC 中配置复选框 Materialize Css答案

【问题标题】：How to configure Checkboxes Materialize Css in Web application Asp.Net MVC如何在 Web 应用程序 Asp.Net MVC 中配置复选框 Materialize Css
【发布时间】：2018-09-25 02:46:35
【问题描述】：

如何在 Asp.Net MVC Razor 中配置复选框。

由于在文档中，我们有以下配置物化复选框：

<p>
   <label>
     <input type = "checkbox" />
     <span> Network </span>
   </label>
</p>

在 Razor 中我无法执行此配置。

<div class = "input-field col s12">
        @Html.EditorFor (model => model.AnnualDestaque)
        @Html.LabelFor (model => model.AnnualDestaque)
        @Html.ValidationMessageFor (model => model.AnnualDestaque, "", new {@class = "text-danger"})
</div>

【问题讨论】：

您需要修改 css 以使用通用同级组合器 (~) - 请参阅 Styling @Html.CheckBoxFor as a slider 以解决类似问题（materialize.css 使用相邻的同级组合器，但这不起作用，因为您的 @987654324 @ 正在生成隐藏输入

标签： asp.net-mvc razor materialize html-helper

【解决方案1】：

请在您的 cshtml 页面中包含模型名称

@model WebApplication3.Models.Test
@{
 ViewBag.Title = "Home Page";
 }


@using (Html.BeginForm("Save", "Home", FormMethod.Post))
 {
  <div class="row">
  <div class="col-md-4">
    @Html.TextBoxFor(m => m.EmployeeName)
    @Html.CheckBoxFor(m=>m.IsSelected)

  </div>

   <input type="submit" value="Save" />

  </div>
}

型号

public class Test
{
    public string EmployeeName { get; set; }
    public bool IsSelected { get; set; }
}

【讨论】：

这种方式虽然上面没有描述，但是checkbox没有出现在屏幕上，注意我用的是MaterializeCss，这个checkbox也没有出现在屏幕上

【解决方案2】：

如果您只想将复选框与您的模型绑定：

public class Network
{
    public bool Selected { get; set; }
    public string Name { get; set; }
}

只需使用：

@Html.CheckBoxFor(m=>m.Selected)
@Html.LabelFor(m=>m.Name)

【讨论】：

这种方式虽然上面没有描述，但是checkbox没有出现在屏幕上，注意我用的是MaterializeCss，这个checkbox也没有出现在屏幕上
不幸的是，您没有提到您正在为复选框使用自定义插件这一事实。在这种情况下，正确的方法是实现自定义助手。

【解决方案3】：

我能够解决它，我正在传递答案。

我使用了 Html Helper Documentation Html Helper MVC

它按预期的方式完美运行，没有出错。

<div class="input-field col s12">
    <label>
        <input data-val="true"
                data-val-required="The Advertisement field is required."
                id="Advertisement"/**** m => m.Advertisement ****/
                name="Advertisement"/**** m => m.Advertisement ****/
                type="checkbox"
                value="true" />

        <span>Anuncio Destaque</span>

        <input name="Advertisement" type="hidden" value="false" />
    </label>
</div>

【讨论】：

【解决方案4】：

你可以这样做：

<label>
<input type="checkbox" name="FIELDNAME" id="FIELDNAME" value="true" class="filled-in" @(Model.FIELDNAME? "checked" : "") />
<span>@Html.DisplayNameFor(model => model.FIELDNAME)</span>
</label>
<input name="FIELDNAME" type="hidden" value="false" />

【讨论】：