ASP.NET MVC 5 中使用 @Html.TextBoxFor() 的浮动标签

Question

我想知道如何在我的 ASP.NET MVC 5 Web 应用程序中添加浮动标签。我在互联网上搜索过，但没有解决方案。我想使用@Html.TextBoxFor() 和@Html.LabelFor() 来实现浮动标签。有人可以帮忙吗？

Answer 1

我创建了一些编辑器模板，例如

@model string

<div class="form-floating mb-3">
    @Html.TextBoxFor(x => x, new { @class = "form-control", placeholder = " " })
    @Html.LabelFor(x => x)
    @Html.ValidationMessageFor(x => x)
</div>

占位符是浮动的正确行为所必需的。

另外我用过

    ViewContext.ValidationMessageElement = "label";

在我的 _ViewStart.chtml 中

和一些 Javascript 代码来纠正带有 jquery-validation 的验证外观：

class Validation
{
    static init = (defaults = {
        highlight: function (element, errorClass) {
            $(element).addClass("is-invalid");
            var $label = $(element).next("label");
            if ($label.length) {
                $label.hide();
            }
        },
        unhighlight: function (element) {
            $(element).removeClass("is-invalid");
            var $label = $(element).next("label");
            if ($label.length) {
                $label.show();
            }
        },
        errorClass: 'is-invalid',
        errorElement: 'label',
        errorPlacement: function (error, element) {
            var label = element.next("label");
            if (label.length) {
                error.insertAfter(label);
            } else {
                error.insertAfter(element);
            }
        }
    }) => {
        $.validator.setDefaults(defaults);

        $("form").each((idx, form) => {
            var $errors = $(form).find(".field-validation-error");
            if ($errors.length) {
                var errorList = {};

                $errors.each((i, error) => {
                    errorList[error.dataset.valmsgFor] = error.innerText;
                })

                let validator = $(form).validate();
                validator.showErrors(errorList);

                $errors.remove();
            }
        });
    }
}

我对结果很满意