1

我正在使用 ASP.NET MVC5 创建一个网站，并且我是第一次使用MaterializeCSS，这看起来是一个非常令人兴奋的框架。

但是，CheckBoxFor 助手生成的复选框被隐藏了！
当我写：

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

生成的 HTML 是：

<input name="IsAgreeTerms" type="hidden" value="false">

为什么 Materialise 将 my type=checkboxinto 变为type=hidden？
我试图添加type="checkbox"CheckboxFor 助手，但它没有改变任何东西。唯一的方法是在我的浏览器控制台中进行修改。

我找到的唯一解决方案是这个 SO thread。但是，接受的答案对我没有任何改变。
另一个答案有效，但我认为在未经我同意的情况下添加一些 JS 脚本来修改 Materialize 修改的内容很难看。

有没有办法说“嘿，我要一个type=checkbox，所以让我type=checkbox在生成的 HTML 中”？

谢谢


更新：
我完整的 ASP.NET MVC 代码是：

@Html.CheckBoxFor(m => m.IsAgreeTerms, new { @type = "checkbox" })
@Html.LabelFor(m => m.IsAgreeTerms, new { @class = "login-label" })

完整生成的 HTML 是

<input data-val="true" data-val-required="Le champ IsAgreeTerms est requis." id="IsAgreeTerms" name="IsAgreeTerms" type="checkbox" value="true"
<input name="IsAgreeTerms" type="hidden" value="false">
<label class="login-label" for="IsAgreeTerms">IsAgreeTerms</label>
4

3 回答 3

1

这是一个 html 助手形式的解决方案。它以正确的顺序构造一个复选框和标签：

public static IHtmlString CheckBoxWithLabelFor<TModel>(
        this HtmlHelper<TModel> htmlHelper,
        Expression<Func<TModel, bool>> expression,
        string labelText,
        object htmlAttributes = null
    )
{
    if (expression == null)
    {
        throw new ArgumentNullException(nameof(expression));
    }

    var checkBoxWithHidden = htmlHelper.CheckBoxFor(expression, htmlAttributes).ToHtmlString().Trim();
    var pureCheckBox = checkBoxWithHidden.Substring(0, checkBoxWithHidden.IndexOf("<input", 1, StringComparison.Ordinal));
    var labelHtml = htmlHelper.LabelFor(expression, labelText).ToHtmlString().Trim();
    var result = pureCheckBox + Environment.NewLine + labelHtml + Environment.NewLine + $"<input type=\"hidden\" name=\"{ExpressionHelper.GetExpressionText(expression)}\" value=\"false\" />";

    return new MvcHtmlString(result);
}
于 2017-10-19T12:00:46.603 回答
0

在这里。问题看起来更复杂。

实际上，在使用时@Html.CheckBoxFor，MVC5 会按顺序生成 3 个字段：

  • 您的输入与type="checkbox"绑定到您的模型属性
  • 隐藏字段（请参阅 Claudio 的链接以获取解释）
  • 您的标签，由@Html.LabelFor

问题是Materialize期望以​​另一个顺序工作。
在浏览器的控制台中，只需<label>在输入和隐藏字段之间移动元素，一切正常！

我发现这个非常有用的链接，基本上，据说生成字段的顺序@Html.checkBoxFor会改变......在 MVC6 中！

当我使用 MVC5 时，我在我的_Layout：

$(":checkbox").each(function () {
    $(this).nextAll("label").before($(this))
})

如果有人有更好的想法，请随时发布一个优雅的解决方案。

于 2016-11-12T19:38:23.893 回答
0

materialize.css 是否还有其他 html 生成？我认为发生这种情况是因为不可能将自定义 CSS 应用于复选框类型的元素输入。

因此，复选框变为隐藏状态，其他 html 组件直观地表示该复选框。许多组件都是这样工作的。

更新： 为什么 Html 复选框会生成额外的隐藏输入

于 2016-11-12T14:57:40.700 回答