Флажки, сгенерированные с помощью помощника CheckBoxFor, из-за MaterializeCSS превращаются в type = hidden
Я создаю веб-сайт с ASP.NET MVC5 и впервые использую MaterializeCSS, который выглядит как очень интересный фреймворк.
Однако, флажки, сгенерированные помощником CheckBoxFor, становятся скрытыми!
Когда я пишу:
@Html.CheckBoxFor(m => m.IsAgreeTerms)
Сгенерированный HTML-код:
<input name="IsAgreeTerms" type="hidden" value="false">
Почему Материализация меняет мой type=checkbox
в type=hidden
?
Я пытался добавить type="checkbox"
в помощнике CheckboxFor, но это ничего не меняет. Единственный способ это изменить в консоли моего браузера.
Единственное решение, которое я нашел, это эта тема. Однако принятый ответ ничего не меняет для меня.
Другой ответ работает, но я думаю, что некрасиво добавлять какой-либо 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>
3 ответа
Вот решение в виде помощника 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);
}
ОП здесь. Проблема выглядит более сложной.
На самом деле, при использовании @Html.CheckBoxFor
MVC5 генерирует 3 поля в следующем порядке:
- Ваш вклад, с
type="checkbox"
привязано к вашей модели - Скрытое поле (см. Ссылку Клаудио для объяснения)
- Ваш ярлык, созданный
@Html.LabelFor
Проблема в Materialize
рассчитывает, что в другом порядке сработает.
В консоли вашего браузера просто переместите <label>
элемент между входом и скрытым полем, и все работает отлично!
Я нашел эту очень полезную ссылку, где, в основном, сказано, что порядок сгенерированных полей @Html.checkBoxFor
изменится... в MVC6!
Поскольку я работаю с MVC5, я использую это очень уродливое решение в своем _Layout
:
$(":checkbox").each(function () {
$(this).nextAll("label").before($(this))
})
Если у кого-то есть идея получше, пожалуйста, не стесняйтесь опубликовать элегантное решение.
Есть ли другой html, сгенерированный materialize.css? Я думаю, что это происходит потому, что невозможно применить пользовательский CSS к элементу ввода типа флажка.
Таким образом, флажок становится скрытым, а другой компонент HTML визуально представляет флажок. Многие компоненты работают так.
ОБНОВЛЕНИЕ: Почему флажок HTML генерирует дополнительный скрытый ввод