物化 css 复选框 ASP.NET MVC答案

【问题标题】：Materialize css checkbox ASP.NET MVC物化 css 复选框 ASP.NET MVC
【发布时间】：2018-12-31 07:45:45
【问题描述】：

我正在尝试在我的 mvc 应用程序中实现材料 css，但 checkboxfor 让我很难过。问题是 materialcss 中的复选框有一个特定的使用设置，像这样

@for (int j = 0; j < Model.Questions[i].Answers.Count; j++)
{
    <label>
        <input type="checkbox" />
        <span>Red</span>
     </label>
}

如果你不这样做，它不会起作用，所以，我自然尝试过

@for (int j = 0; j < Model.Questions[i].Answers.Count; j++)
    {
    <label>
        @Html.EditorFor(model => Model.Questions[i].Answers[j].IsTrueUserChoice)
        @* or this *@
        @Html.CheckBoxFor(model => Model.Questions[i].Answers[j].IsTrueUserChoice)
        <span></span>
    </label>
}

htm.editorfor 和 checkboxfor 渲染 2 个复选框标签，一个是可见的，一个是隐藏的（复选框在 mvc 中是如何工作的），但是使用 materializecss 我不能这样做，因为<span></span> 必须低于<input type="checkbox"/> 所以这个不起作用，因为隐藏的复选框字段位于复选框下方。

您对如何解决此问题有任何建议吗？

【问题讨论】：

看起来实现复选框的人有点得意忘形了。我不明白这是如何实现的。 I would file a issue。将其命名为“Razor 渲染引擎无法渲染 materialize.css 复选框”。 PS：另外，为了完整起见，请在代码 sn-p 中包含带有 i 变量的外部 for 循环。
感谢您的评论。提交问题会花费太长时间，可能不会被修复。我相信这可以通过自定义 html 助手来完成
好点。我完全忘记了这些。
你需要修改css给我们一个兄弟选择器。示例参考this answer
@StephenMuecke 运气不好

标签： asp.net-mvc razor materialize

【解决方案1】：

使用“DisplayNameFor”...

<label>
    @Html.CheckBoxFor(model => Model.Questions[i].Answers[j].IsTrueUserChoice)
    <span>@Html.DisplayNameFor(model => Model.Questions[i].Answers[j].IsTrueUserChoice)</span>
</label>

并修改相关的CSS：

label input[type=checkbox].checkbox ~ span:before 
{
    ....
}

【讨论】：

我用自定义 html 助手修复了它