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

Question

I have in the fact copied the code of Login page in the ASP.NET MVC application template (provided with VS). 实际上，我已经在ASP.NET MVC应用程序模板（随VS提供）中复制了“登录”页面的代码。 In the original template, client side validation is working but when I copy all the connected code I get only server side validation (no red fields, post back even if data are incorrect). 在原始模板中，客户端验证有效，但是当我复制所有连接的代码时，我仅获得服务器端验证（没有红色字段，即使数据不正确也要发回）。

Here is my model code: 这是我的模型代码：

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; }
}

Here is the controller: 这是控制器：

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);
    }
}

And this is the View: 这是视图：

<%@ 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>
<% } %>

I also have following lines in my Web.config file: 我的Web.config文件中还包含以下几行：

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

Edit 编辑

I include here the output html code: 我在这里包括输出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>

For comparison this is the output of VS MVC template where client side validation is working: 为了进行比较，这是客户端验证有效的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>

Answer 1

You need to add the following before the FORM begins: 您需要在FORM开始之前添加以下内容：

<% Html.EnableClientValidation();%>

Also, ensure you have this script referenced: 另外，请确保已引用此脚本：

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

As well as jQuery itself. 以及jQuery本身。

Answer 2

The answer is: <script src="<%: Url.Content("~/Scripts/jquery-1.4.4.min.js") %>" type="text/javascript"></script> was not in my Master page header tag at first. 答案是： <script src="<%: Url.Content("~/Scripts/jquery-1.4.4.min.js") %>" type="text/javascript"></script>不在首先是我的母版页标题标签。 When I added it it should work but it did not for next 4 hours. 当我添加它时，它应该可以工作，但是接下来的四个小时都没有。

Probably because Firefox kept showing me the old version with no reference to <script src="<%: Url.Content("~/Scripts/jquery-1.4.4.min.js") %>" type="text/javascript"></script> . 可能是因为Firefox一直向我显示旧版本，但未引用<script src="<%: Url.Content("~/Scripts/jquery-1.4.4.min.js") %>" type="text/javascript"></script> 。 Or... Accept goes to the only answer that is not mine there. 或...接受转到不是我唯一的答案。

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

问题描述

Edit 编辑

2 个解决方案

解决方案1
0 已采纳 2011-03-17 21:06:31

解决方案2
0 2011-03-18 04:01:32

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

问题描述

Edit 编辑

2 个解决方案

解决方案1 0 已采纳 2011-03-17 21:06:31

解决方案2 0 2011-03-18 04:01:32

解决方案1
0 已采纳 2011-03-17 21:06:31

解决方案2
0 2011-03-18 04:01:32