无法使ASP.NET MVC客户端验证正常工作
[英]Cannot get ASP.NET MVC client side validation working
问题描述
实际上，我已经在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>
2 个解决方案
解决方案1
0 已采纳 2011-03-17 21:06:31
您需要在FORM开始之前添加以下内容：
<% Html.EnableClientValidation();%>
另外，请确保已引用此脚本：
<script src="<%=Url.Content("~/Scripts/MicrosoftMvcJQueryValidation.js")%>"
以及jQuery本身。
解决方案2
0 2011-03-18 04:01:32
答案是： <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> 。 或...接受转到不是我唯一的答案。
使用MvcContrib FluentHtml的ASP.NET MVC客户端验证
[英]ASP.NET MVC Client-side validation with MvcContrib FluentHtml
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.