在 ASP.Net MVC3 中使用数据注释进行客户端验证答案

【问题标题】：Client Side Validation with Data Annotations in ASP.Net MVC3在 ASP.Net MVC3 中使用数据注释进行客户端验证
【发布时间】：2011-07-18 21:35:20
【问题描述】：

我正在使用带有 VB 的 ASP.Net MVC3。

我已经能够使用数据注释进行服务器端验证。以下是我的相关代码：

在我的视图模型中：

   <Required(ErrorMessage:="Last Name is Required.")>
        Public Property SearchLName() As String

        <Required(ErrorMessage:="First Name is Required.")>
        Public Property SearchFName() As String

        <Required(ErrorMessage:="Zip Code is Required.")>
        <RegularExpression("^[0-9]{5}", ErrorMessage:="Zip Code must be 5 digits long and contain only numbers.")>

在我的表单上查看：

  <div><%= Html.LabelFor(Function(model) model.SearchFName)%>
       <%= Html.TextBoxFor(Function(model) model.SearchFName)%></div>
    <p><%= Html.ValidationMessageFor(Function(model) model.SearchFName)%></p>

 <div><%= Html.LabelFor(Function(model) model.SearchLName)%>
      <%= Html.TextBoxFor(Function(model) model.SearchLName)%></div>
   <p><%= Html.ValidationMessageFor(Function(model) model.SearchLName)%></p>

  <div><%= Html.LabelFor(Function(model) model.SearchZip)%>
       <%= Html.TextBoxFor(Function(model) model.SearchZip)%></div>
    <p><%= Html.ValidationMessageFor(Function(model) model.SearchZip)%></p>

服务器端验证完美运行。但是，我不确定如何让客户端工作。我导入了以下 JQuery 脚本，但似乎没有什么不同。

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

谁能告诉我我错过了什么步骤？谢谢。

编辑：

作为后续，以下信息可能会有所帮助。我的网络配置有以下设置：

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

我的母版页在 Head 中有以下内容，并且我已验证我的 jquery 文件与参考文件的版本相同。

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

我可以让客户端验证正常工作 - 通过放入引用可能发生的确切错误类型的特定 html 元素（参见答案之一：http://msdn.microsoft.com/en-us/vs2010trainingcourse_aspnetmvccustomvalidation_topic5）。但是，这有两个问题：1）它从不进行服务器端验证，所以如果有人禁用了 javascript，这将是一个问题；2）我的观点必须意识到可能发生的错误类型，因此对于每个数据注释我添加到模型中，我必须向视图添加另一种错误类型。

我发现这篇文章很有帮助，讨论了如何设置以启用客户端和服务器端验证：http://weblogs.asp.net/scottgu/archive/2010/01/15/asp-net-mvc-2-model-validation.aspx

但是，它对我不起作用，我的想法可能是因为它专注于 MVC2。我能够获得服务器端功能，但不是客户端。

编辑： 在这一点上，我不再担心客户端验证，因为服务器端更重要。在应用程序的其余部分工作之后，我会看看我可以做些什么来设置客户端。如果我知道我做错了什么，我会更新这篇文章。

【问题讨论】：

参考：stackoverflow.com/questions/9349766/…

标签： jquery asp.net asp.net-mvc-3

【解决方案1】：

你也有

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

在您的 web.config 中？

在您引用的脚本之上，您还需要引用 jQuery

// put in the reference to whatever version of jQuery you're using 
<script src="<%: Url.Content("~/Scripts/jquery-1.6.2.min.js") %>" type="text/javascript"></script>
<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>

另外，看看 MSDN Exercise 4: Using Unobtrusive jQuery at Client Side.

【讨论】：

我确实有适当的 appsettings - 我没有提到，但是是的，我引用了 jquery - 它在母版页中，它适用于我正在运行的其他一些脚本。
我看过本教程 - 这将允许客户端，但不允许服务器端。我用更多细节编辑了我的问题。

【解决方案2】：

你一定是做错了什么。以下是对我来说非常适合的步骤。

使用 Internet 模板创建一个新的 ASP.NET MVC 3 项目

定义模型：

Imports System.ComponentModel.DataAnnotations

Public Class MyViewModel
    <Required(ErrorMessage:="Last Name is Required.")>
    Public Property SearchLName() As String

    <Required(ErrorMessage:="First Name is Required.")>
    Public Property SearchFName() As String

    <Required(ErrorMessage:="Zip Code is Required.")>
    <RegularExpression("^[0-9]{5}", ErrorMessage:="Zip Code must be 5 digits long  and contain only numbers.")>
    Public Property SearchZip() As String
End Class

像这样修改HomeController：

Public Class HomeController
    Inherits System.Web.Mvc.Controller

    Function Index() As ActionResult
        Return View(New MyViewModel)
    End Function

    <HttpPost()>
    Function Index(model As MyViewModel) As ActionResult
        Return View(model)
    End Function
End Class

像这样修改Index.aspx视图视图：

<%@ Page Language="VB" Inherits="System.Web.Mvc.ViewPage(Of MvcApplication1.MyViewModel)" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script src="<%= Url.Content("~/Scripts/jquery-1.5.1.min.js") %>" type="text/javascript"></script>
    <script src="<%= Url.Content("~/Scripts/jquery.validate.js") %>" type="text/javascript"></script>
    <script src="<%= Url.Content("~/Scripts/jquery.validate.unobtrusive.js") %>" type="text/javascript"></script>
</head>
<body>
    <% Using Html.BeginForm() %>
        <div>
            <%= Html.LabelFor(Function(model) model.SearchFName)%>
            <%= Html.TextBoxFor(Function(model) model.SearchFName)%>
        </div>
        <p><%= Html.ValidationMessageFor(Function(model) model.SearchFName)%></p>

        <div>
            <%= Html.LabelFor(Function(model) model.SearchLName)%>
            <%= Html.TextBoxFor(Function(model) model.SearchLName)%>
        </div>
        <p><%= Html.ValidationMessageFor(Function(model) model.SearchLName)%></p>

        <div>
            <%= Html.LabelFor(Function(model) model.SearchZip)%>
            <%= Html.TextBoxFor(Function(model) model.SearchZip)%>
        </div>
        <p><%= Html.ValidationMessageFor(Function(model) model.SearchZip)%></p>

        <input type="submit" value="OK" />
    <% End Using %>
</body>
</html>

【讨论】：

乍一看像我的 - 我今天会仔细检查它，看看是否有任何细节被关闭。（但我同意 - 我显然做错了什么，否则它会起作用！:-) 我会看看我能通过你的例子找到什么。）