ASP.NET MVC validationMessageFor 作为文本框上的引导弹出框答案

【问题标题】：ASP.NET MVC validationMessageFor as bootstrap popover on the textboxASP.NET MVC validationMessageFor 作为文本框上的引导弹出框
【发布时间】：2015-12-04 11:31:51
【问题描述】：

我有一个使用 ASP.NET MVC 创建的登录页面，我希望 MVC ValidationMessageFor 显示为引导弹出窗口并显示在相应的文本框上。

这有点工作，但不完全正确。 Popout 即将到来，但没有显示在文本框上，而且 ValidationMessageFor 也将单独显示。哪个不应该。

任何想法或帮助将不胜感激。

    @model x.Areas.Account.Models.User

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Login</title>
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    <script>
        $(function () {    
            $(".field-validation-error[data-toggle='popover']").each(function () {
                var x = $(this).text();

                if (x) {
                    $(this).popover({
                        content: x,
                        trigger: "manual",
                        template: "<div class=\"popover\"><div class=\"arrow\"></div><div class=\"popover-inner\"><div class=\"popover-content\"><p></p></div></div></div>"
                    });
                    $(this).popover('show');
                }
            });
        });
    </script>
    @Styles.Render("~/Content/css")
    <style>
        .required:after {
            content: "*";
            font-weight: bold;
            color: red;
        }

        .input-validation-error {
            border-color: red;
        }
    </style>
</head>
<body>
    @using (Html.BeginForm(null, null, FormMethod.Post, new { @class = "form-horizontal" }))
    {
        @Html.AntiForgeryToken()

        <div>
            <fieldset>
                <legend>Login</legend>
                <div>
                    @Html.LabelFor(u => u.UserName, new { @class = "required" })
                    <div>
                        @Html.TextBoxFor(u => u.UserName)
                        @Html.ValidationMessageFor(u => u.UserName, null, new { @class = "text-danger", @data_toggle = "popover", @data_placement = "top" })
                    </div>
                </div>
                <div>
                    @Html.LabelFor(u => u.Password, new { @class = "required" })
                    <div>
                        @Html.PasswordFor(u => u.Password)
                        @Html.ValidationMessageFor(u => u.Password, null, new { @class = "text-danger", @data_toggle = "popover", @data_placement = "right" })
                    </div>
                </div>
                <div style="margin-top:5px;">
                    <input type="submit" class="btn btn-primary" value="Log In" />
                </div>
                <div style="margin-top:5px; margin-left:5px;">
                    <input type="button" id="btnErrLog" class='overlay' value="Error Log" />
                </div>
            </fieldset>
        </div>
    }
</body>
</html>

更新 1：成功应用建议的回复 :)

$("input[data-toggle=popover]").each(function () {
            var id = $(this).attr('id');
            var validator = $('[data-valmsg-for=' + id + ']');
            var msg = $(validator).html();

            if (msg) {
                $(this).popover({
                    content: msg,
                    trigger: "manual",
                    template: "<div class=\"popover\"><div class=\"arrow\"></div><div class=\"popover-inner\"><div class=\"popover-content\"><p></p></div></div></div>"
                });
                $(this).popover('show');
                $(validator).hide();
            }
        });

<div>
                @Html.LabelFor(u => u.UserName, new { @class = "required" })
                <div>
                    @Html.TextBoxFor(u => u.UserName, new { @class = "text-danger", @data_toggle = "popover", @data_placement = "top" })
                    @Html.ValidationMessageFor(u => u.UserName, null, new { @class = "text-danger" })
                </div>
            </div>
            <div>
                @Html.LabelFor(u => u.Password, new { @class = "required" })
                <div>
                    @Html.PasswordFor(u => u.Password, new { @class = "text-danger", @data_toggle = "popover", @data_placement = "right" })
                    @Html.ValidationMessageFor(u => u.Password, null, new { @class = "text-danger" })
                </div>
            </div>

【问题讨论】：

您的 javascript 代码正在 document.ready() 上运行。当它运行时，我从验证器那里得到空的“味精”。你是怎么得到“味精”的？？

标签： jquery asp.net asp.net-mvc twitter-bootstrap

【解决方案1】：

我想你不应该将 @data_toggle = "popover" 类放在 ValidationMessageFor 中，而是放在 TextBoxFor 和 PasswordFor 助手中。

然后将 jquery 选择器从 $(".field-validation-error[data-toggle='popover']") 更改为 $("input[data-toggle='popover']")

最后你应该改变你的 js 以在 x 变量中获得正确的消息。

【讨论】：

谢谢，像魅力一样工作:) 我不得不手动隐藏 ValidationMessageFor 在显示弹出框的 jquery 方法中。有没有自动隐藏它的方法...