[转载]返璞归真 asp.net mvc (8) - asp.net mvc 3.0 新特性之 Model

[转载]返璞归真 asp.net mvc (8) – asp.net mvc 3.0 新特性之 Model – webabcd – 博客园.

[索引页]
[源码下载]

返璞归真 ASP.NET mvc (8) – ASP.NET mvc 3.0 新特性之 Model

作者:webabcd

介绍
ASP.NET MVCASP.NET MVC 3.0 新特性之 Model:

  • 通过 Data Annotations 与 JQuery 的结合实现服务端和客户端的双重验证
  • 双重验证中,使客户端实现远程的异步验证
  • 自定义 Data Annotations 与 JQuery,以实现自定义的双重验证

示例
1、Model 中通过 Data Annotations 与 JQuery 的结合实现服务端和客户端的双重验证
Web.config


<!--         要实现服务端和客户端的双重验证,需要做如下配置,因为双重验证中的客户端验证需要依赖此配置     -->

User.cs

/*
* 在 asp.net mvc 3.0 中支持通过 Data Annotations 来实现服务端和客户端的双重验证,需要 jQuery 的支持
* 所有 Data Annotations 相关的 Attribute 直接用类视图看 System.ComponentModel.DataAnnotations 就行了,详细说明以前写过好多遍了,这里就不重复了
* 另外 System.Web.Mvc 下有一些新增的 Data Annotations
*/

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
using System.Web.Mvc;

namespace MVC30.Models
{
public class User
{
public int ID { get; set; }

[DisplayName("名字")]
[Required(ErrorMessage = "名字不能为空")]
public string Name { get; set; }

[DisplayName("密码")]
[Required(ErrorMessage = "密码不能为空")]
public string Password { get; set; }

[DisplayName("确认密码")]
[Required(ErrorMessage = "确认密码不能为空")]
[Compare("Password", ErrorMessage="两次密码输入不一致")]
public string ConfirmPassword { get; set; }

public DateTime DateOfBirth { get; set; }

// 请求时,允许此字段包含 HTML 标记
[AllowHtml]
public string Comment { get; set; }
}
}

Validation_DataAnnotations.cshtml

@model MVC30.Models.User

@{
ViewBag.Title = "Validation_DataAnnotations";
}
<h2>ClientValidation</h2>
<!--     通过 jQuery 实现客户端验证的逻辑,需要引用此 js -->
<script src="@Url.Content(" type="text/javascript"></script> <!--     服务端验证与客户端验证的一一对应需要引用此 js --> <script src="@Url.Content(" type="text/javascript"></script>

@*
在 MVC3 中实现客户端验证,不需要添加以下代码
@{ Html.EnableClientValidation(); }
*@

@using (Html.BeginForm())
{
<fieldset> <legend>User</legend>
<div class="editor-label">@Html.LabelFor(model =&gt; model.Name)
(测试方法:空着文本框,然后提交)</div>
<div class="editor-field">@Html.EditorFor(model =&gt; model.Name)
@Html.ValidationMessageFor(model =&gt; model.Name)</div>
<input type="submit" value="Create" /></fieldset>
}

2、Model 中通过 Data Annotations 与 jQuery 的结合实现服务端和客户端的双重验证,其中客户端可以实现远程的异步验证
User.cs

/*
* System.Web.Mvc.Remote(string action, string controller) - 让客户端可以通过 ajax 的方式远程验证
*     action - 实现验证逻辑的 action,即处理客户端的异步请求的 action
*     controller - 实现验证逻辑的 controller,即处理客户端的异步请求的 controller
*/

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
using System.Web.Mvc;

namespace MVC30.Models
{
public class User
{
public int ID { get; set; }

[DisplayName("名字")]
[Required(ErrorMessage = "名字不能为空")]
[Remote("CheckUserNameExists", "ValidationDemo", ErrorMessage = "名字已存在")]
public string Name { get; set; }

[DisplayName("密码")]
[Required(ErrorMessage = "密码不能为空")]
public string Password { get; set; }

[DisplayName("确认密码")]
[Required(ErrorMessage = "确认密码不能为空")]
[Compare("Password", ErrorMessage="两次密码输入不一致")]
public string ConfirmPassword { get; set; }

public DateTime DateOfBirth { get; set; }

// 请求时,允许此字段包含 HTML 标记
[AllowHtml]
public string Comment { get; set; }
}
}

3、Model 中使用更多的 Data Annotations 以及实现自定义的 Data Annotations 和自定义 jQuery 的相关逻辑
User.cs

/*
* 如何使用更多的 Data Annotation
*     1、在“Tools”中选择“Extension Manager”(安装 NuGet 后会有此选项)
*     2、搜索“DataAnnotationsExtensions”,然后安装“DataAnnotationsExtensions.MVC3”项目
*     3、之后就可以使用此项目所支持的多个新的 Data Annotation
* 如何自定义 Data Annotation
*     详见:IntegerAttribute.cs
*/

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
using System.Web.Mvc;

namespace MVC30.Models
{
public class User
{
public int ID { get; set; }

[DisplayName("名字")]
[Required(ErrorMessage = "名字不能为空")]
[Remote("CheckUserNameExists", "ValidationDemo", ErrorMessage = "名字已存在")]
public string Name { get; set; }

[DisplayName("密码")]
[Required(ErrorMessage = "密码不能为空")]
[Integer(ErrorMessage = "密码必须是整型")]
public string Password { get; set; }

[DisplayName("确认密码")]
[Required(ErrorMessage = "确认密码不能为空")]
[Compare("Password", ErrorMessage="两次密码输入不一致")]
public string ConfirmPassword { get; set; }

public DateTime DateOfBirth { get; set; }

// 请求时,允许此字段包含 HTML 标记
[AllowHtml]
public string Comment { get; set; }
}
}

IntegerAttribute.cs

/*
* 自定义 Data Annotation,以实现与 jQuery 结合的客户端和服务端双重验证
*/

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

using System.ComponentModel.DataAnnotations;
using System.Text.RegularExpressions;
using System.Web.Mvc;

namespace MVC30.Models
{
// 继承 ValidationAttribute 抽象类,重写 IsValid() 方法,以实现服务端验证
// 实现 IClientValidatable 接口的 GetClientValidationRules() 方法,以实现客户端验证
public class IntegerAttribute : ValidationAttribute, IClientValidatable
{
// 服务端验证逻辑,判断输入是否为整型
public override bool IsValid(object value)
{
var number = Convert.ToString(value);
return Regex.IsMatch(number, @"^[0-9]+$");
}

// 客户端验证逻辑,需要结合客户端验证代码,详见 Validation_Custom.cshtml 文件
public IEnumerable GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
{
var rule = new ModelClientValidationRule
{
ErrorMessage = this.ErrorMessage,

// ValidationType - 指定一个 key(字符串),该 key 用于关联服务端验证逻辑与客户端验证逻辑。注:这个 key 必须都是由小写字母组成
ValidationType = "isinteger"
};

// 向客户端验证代码传递参数
rule.ValidationParameters.Add("param1", "value1");
rule.ValidationParameters.Add("param2", "value2");

yield return rule;
}
}
}

ValidationDemoController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

using MVC30.Models;

namespace MVC30.Controllers
{
public class ValidationDemoController : Controller
{
// 用于演示如何使用更多的 Data Annotations 来实现服务端和客户端的双重验证,以及如何自定义 Data Annotations 来实现服务端和客户端的双重验证
public ActionResult Validation_Custom()
{
var user = new User { ID = 1, Name = "webabcd", DateOfBirth = new DateTime(1980, 2, 14), Comment = "<strong>mvp</strong>" };

return View(new User());
}

[HttpPost]
public ActionResult Validation_Custom(User user)
{
return View(user);
}
}
}

Validation_Custom.cshtml

@model MVC30.Models.User

@{
ViewBag.Title = "ClientValidation";
}
<h2>ClientValidation</h2>
<script src="@Url.Content(" type="text/javascript"></script> <script src="@Url.Content(" type="text/javascript"></script>

<script type="text/javascript">// <!&#91;CDATA&#91;
    // 客户端验证逻辑,判断输入是否为整型
    jQuery.validator.addMethod(
        'checkInteger',
        function (value, element) {
            var reg = new RegExp("^&#91;0-9&#93;+$");
            return (reg.test(value));
        }
    );

    // 将客户端验证逻辑通过 ValidationType 与服务端的相关验证逻辑结合起来
    jQuery.validator.unobtrusive.adapters.add(
        'isinteger', // ValidationType,必须全为小写
        &#91;'param1', 'param2'&#93;, // 接收 ModelClientValidationRule 中的参数信息
        function (options) {
            options.rules&#91;'checkInteger'&#93; = true; // 启用名为 checkInteger 的客户端验证逻辑
            options.messages&#91;'checkInteger'&#93; = options.message; // 发生验证错误后的显示信息
            var param1 = options.params.param1; // ModelClientValidationRule 中的参数信息
            var param2 = options.params.param2; // ModelClientValidationRule 中的参数信息
            alert(param1 + " " + param2);
        }
    );
// &#93;&#93;></script>

@using (Html.BeginForm())
{
<fieldset> <legend>User</legend>
<div class="editor-label">@Html.LabelFor(model =&gt; model.Name)</div>
<div class="editor-field">@Html.EditorFor(model =&gt; model.Name)
@Html.ValidationMessageFor(model =&gt; model.Name)</div>
<div class="editor-label">@Html.LabelFor(model =&gt; model.Password)
(测试方法:在文本框中输入非整型的字符串)</div>
<div class="editor-field">@Html.EditorFor(model =&gt; model.Password)
@Html.ValidationMessageFor(model =&gt; model.Password)</div>
<input type="submit" value="Create" /></fieldset>
}

源码下载:
[源码下载]

赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏