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

时间:2011-07-18 21:35:20

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

我正在使用ASP.Net MVC3和VB。

我已经能够在数据注释工作的情况下获得服务器端验证。以下是我的相关代码:

在我的视图模型中:

   <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。我能够获得服务器端功能,但不能获得客户端功能。

修改 在这一点上,我担心客户端验证,因为服务器端更重要。我会看到在应用程序的其余部分工作之后我可以做些什么来设置客户端。如果我弄清楚我做错了什么,我会更新这篇文章。

2 个答案:

答案 0 :(得分:2)

你还有吗

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

答案 1 :(得分:0)

你必须做错事。以下是对我来说完美无缺的步骤。

  1. 使用Internet模板
  2. 创建新的ASP.NET MVC 3项目
  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
    
  4. 像这样修改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
    
  5. 修改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>