无法使 ASP.NET MVC 客户端验证正常工作答案

【问题标题】：Cannot get ASP.NET MVC client side validation working无法使 ASP.NET MVC 客户端验证正常工作
【发布时间】：2011-03-17 21:02:09
【问题描述】：

事实上，我已经将登录页面的代码复制到了 ASP.NET MVC 应用程序模板（VS 提供）中。在原始模板中，客户端验证正在工作，但是当我复制所有连接的代码时，我只得到服务器端验证（没有红色字段，即使数据不正确也可以回发）。

这是我的型号代码：

public class LogOnModel {
    [Required]
    [Display(Name = "User name")]
    public string UserName { get; set; }

    [Required]
    [DataType(DataType.Password)]
    [Display(Name = "Password")]
    public string Password { get; set; }

    [Display(Name = "Remember me?")]
    public bool RememberMe { get; set; }
}

这里是控制器：

public class LogOnController : Controller
{
    public ActionResult Index() {
        return View();
    }

    [HttpPost]
    public ActionResult Index(LogOnModel model)
    {
        if (ModelState.IsValid) {
            return RedirectToAction("Index", "Games");
        }

        return View(model);
    }
}

这是视图：

<%@ Page Title="" Language="C#" Inherits="System.Web.Mvc.ViewPage<PuzzleHunter.Web.Models.LogOnModel>" MasterPageFile="~/Views/Shared/SiteMasterPage.master" %>
<asp:Content runat="server" ID="Content" ContentPlaceHolderID="MainContent">

<script src="<%: Url.Content("~/Scripts/jquery.validate.min.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js") %>" type="text/javascript"></script>

<% using (Html.BeginForm()) { %>
    <%: Html.ValidationSummary(true, "Login was unsuccessful. Please correct the errors and try again.") %>
    <div>
        <fieldset>
            <legend>Account Information</legend>
            <div class="editor-label">
                <%: Html.LabelFor(m => m.UserName) %>
            </div>
            <div class="editor-field">
                <%: Html.TextBoxFor(m => m.UserName) %>
                <%: Html.ValidationMessageFor(m => m.UserName) %>
            </div>

            <div class="editor-label">
                <%: Html.LabelFor(m => m.Password) %>
            </div>
            <div class="editor-field">
                <%: Html.PasswordFor(m => m.Password) %>
                <%: Html.ValidationMessageFor(m => m.Password) %>
            </div>

            <div class="editor-label">
                <%: Html.CheckBoxFor(m => m.RememberMe) %>
                <%: Html.LabelFor(m => m.RememberMe) %>
            </div>
            <p>
                <input type="submit" value="Log On" />
            </p>
        </fieldset>
    </div>
<% } %>

我的Web.config 文件中还有以下几行：

<appSettings>
    <add key="ClientValidationEnabled" value="true"/>
    <add key="UnobtrusiveJavaScriptEnabled" value="true"/>
</appSettings>

编辑

我在这里包含了输出的 html 代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


<head id="Head1"><title>
    Šifrovačky  

    </title><link href="Content/Site.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
</head>
<body>
    <div class="content">


    <script src="/Scripts/jquery.validate.min.js" type="text/javascript"></script>
    <script src="/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>

    <form action="/Logon" method="post">
        <div>
            <fieldset>
                <legend>Account Information</legend>

                <div class="editor-label">
                    <label for="UserName">User name</label>
                </div>
                <div class="editor-field">
                    <input data-val="true" data-val-required="The User name field is required." id="UserName" name="UserName" type="text" value="" />
                    <span class="field-validation-valid" data-valmsg-for="UserName" data-valmsg-replace="true"></span>
                </div>

                <div class="editor-label">
                    <label for="Password">Password</label>
                </div>
                <div class="editor-field">
                    <input data-val="true" data-val-required="The Password field is required." id="Password" name="Password" type="password" />
                    <span class="field-validation-valid" data-valmsg-for="Password" data-valmsg-replace="true"></span>
                </div>

                <div class="editor-label">
                    <input data-val="true" data-val-required="The Remember me? field is required." id="RememberMe" name="RememberMe" type="checkbox" value="true" /><input name="RememberMe" type="hidden" value="false" />
                    <label for="RememberMe">Remember me?</label>
                </div>

                <p>
                    <input type="submit" value="Log On" />
                </p>
            </fieldset>
        </div>
    </form>
    </div>

</body>
</html>

作为比较，这是客户端验证工作的 VS MVC 模板的输出：

    <!DOCTYPE html>
    <html>
    <head><title>

        Log On
        </title><link href="../Content/Site.css" rel="stylesheet" type="text/css" />
        <script src="/Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
    </head>
    <body>
        <div class="page">

            <div id="main">
        <script src="/Scripts/jquery.validate.min.js" type="text/javascript"></script>
        <script src="/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>

        <form action="/Account/LogOn" method="post">
            <div>
                <fieldset>
                    <legend>Account Information</legend>

                    <div class="editor-label">
                        <label for="UserName">User name</label>
                    </div>
                    <div class="editor-field">
                        <input data-val="true" data-val-required="The User name field is required." id="UserName" name="UserName" type="text" value="" />
                        <span class="field-validation-valid" data-valmsg-for="UserName" data-valmsg-replace="true"></span>
                    </div>

                    <div class="editor-label">
                        <label for="Password">Password</label>
                    </div>
                    <div class="editor-field">
                        <input data-val="true" data-val-required="The Password field is required." id="Password" name="Password" type="password" />
                        <span class="field-validation-valid" data-valmsg-for="Password" data-valmsg-replace="true"></span>
                    </div>

                    <div class="editor-label">
                        <input data-val="true" data-val-required="The Remember me? field is required." id="RememberMe" name="RememberMe" type="checkbox" value="true" /><input name="RememberMe" type="hidden" value="false" />
                        <label for="RememberMe">Remember me?</label>
                    </div>

                    <p>
                        <input type="submit" value="Log On" />
                    </p>
                </fieldset>
            </div>
        </form>
            </div>
        </div>
    </body>
    </html>

【问题讨论】：

您是否希望排除 PropertyErrors。 ValidationSummary 的参数需要设置为 false
@HelloWorld 首先我希望进行客户端验证。然后我可能会考虑其他PropertyErrors。我有一种感觉，这是由一些非常简单和愚蠢的事情引起的。
Web.config 中是否存在可能导致客户端验证不起作用的内容？
您的脚本中是否也包含了 jQuery？您可能想使用 Firebug 并查看浏览器控制台中是否还有任何错误。
@HelloWorld 我不知道您所说的“skrip 包含”是什么意思，但如果您的意思是：<script src="<%: Url.Content("~/Scripts/jquery-1.4.4.min.js") %>" type="text/javascript"></script> 它位于我的母版页的标题标签内。

标签： c# .net asp.net asp.net-mvc validation

【解决方案1】：

您需要在FORM 开始之前添加以下内容：

<% Html.EnableClientValidation();%>

另外，请确保您引用了此脚本：

<script src="<%=Url.Content("~/Scripts/MicrosoftMvcJQueryValidation.js")%>"

以及 jQuery 本身。

【讨论】：

不，这不是问题。添加该行时，它仍然没有进行任何客户端验证。无论如何我都有验证摘要 - 第 8 行。它与 VS 提供的模板位于同一位置。
添加<script src="<%: Url.Content("~/Scripts/MicrosoftMvcJQueryValidation.js")%>" type="text/javascript"></script>（你的答案是什么语法错误）和<% Html.EnableClientValidation();%>没有任何区别。注意：视图和模型的代码与VS模板中的视图和模型的代码完全相同。模板做客户端验证。所以我想问题出在其他地方。我不明白“引用 jQuery 本身”是什么意思，但我检查了我的库，它们包括模板项目中的所有库。
请看我的编辑：我已经添加了页面的 html 输出，所以你可以准确地找到问题所在。

【解决方案2】：

答案是：<script src="<%: Url.Content("~/Scripts/jquery-1.4.4.min.js") %>" type="text/javascript"></script> 起初不在我的母版页标题标签中。当我添加它时，它应该可以工作，但在接下来的 4 个小时内都没有。

可能是因为 Firefox 一直向我显示旧版本，而没有提及 <script src="<%: Url.Content("~/Scripts/jquery-1.4.4.min.js") %>" type="text/javascript"></script>。或者... 接受去那里唯一不属于我的答案。

【讨论】：