如何利用扩展方法来链式的对MVC 3中的页面进行验证

.Net 3.0 添加了一个语法糖就是扩展方法,其实扩展方法的本质就是对类的静态方法的调用,虽然扩展方法只是改变了我们写代码的方式,但是如果我们使用得当,可以给我们带来巨大的编码效率的提升。对于C#扩展方法的使用,我就不细说了,贴段代码说明扩展方法的使用,大家就会回忆起来。


代码如下:

public static class Extensions
{
public static string EndWith(this string str)
{
return str + "@";
}
}

对于这段非常简单的代码,相信大家应该会很明白,可以看到扩展方法的使用,就是在一个静态类中定义一个静态方法,在方法参数中添加this。

那么使用扩展方法就更加的简单了。以下代码片段就是扩展方法对于string的扩展,会在页面上显示@


代码如下:

string str = "";
Response.Write(str.EndWith());

扩展方法不是本次课题的重点,本次课题的重点是说明如何利用扩展方法来链式的对MVC 3中的页面进行验证。对于Mvc的验证,有很多种方式,其中我们经常使用的就是Model的验证,这是最直接最有效的我们操作的方式,可以对一个字段进行多个条件的验证。但是这种验证方式有一个弊端,就是我们不能在页面上直接看到对该字段进行了哪些验证,除非我们去Model层查看,但是通常一个项目是分项目组的,我们不一定负责开发Model层,所以这就会遇到一个沟通的问题。我们都知道,程序员的沟通成本是很高的。

现在提供另一种进行页面验证的方式,这种方式也可以对一个页面元素进行多个条件的验证,并且是在客户端进行的。要使用这个验证,我们必须了解一个jquery的插件,那就是jquery.validation.js文件,这个是对元素进行验证的js文件。

还有一个我们必须了解的知识点就是?Mvc 3的Razor 视图直接继承自哪个类?相信很多朋友都会毫不犹豫的说是ViewPage,当然这不能说是错的,因为Mvc 2 确实是继承自ViewPage基类,但是在Razor 视图下,是继承自WebViewPage类的,如果你的扩展方法扩展的是ViewPage,那么对不起,你在页面上是无法看到这个扩展方法的,除非继承自WebViewPage。希望大家扩展页面方法的时候注意一下类的继承问题。

说了准备工作,那么我们切入正题,先贴出来代码,然后我们再逐渐的分析。


代码如下:

namespace MvcWeb.Extensions
{
public class JqueryHelper
{
public ViewContext ViewContext { get; private set; }
public WebViewPage ViewPage { get; private set; }
public RouteCollection RouteCollection { get; private set; }
public JqueryHelper(ViewContext viewContext, WebViewPage page, RouteCollection routeCollection)
{
this.ViewContext = viewContext;
this.ViewPage = page;
this.RouteCollection = routeCollection;
}
public JqueryHelper(ViewContext viewContext, WebViewPage viewPage) : this(viewContext, viewPage, RouteTable.Routes) { }
}
public static class JqueryExtensions
{
public static JqueryHelper Jquery(this WebViewPage page)
{
var key = typeof(JqueryHelper);
var jquery = page.PageData[key] as JqueryHelper;
if (jquery == null)
{
page.PageData[key] = jquery = new JqueryHelper(page.ViewContext, page);
}
return jquery;
}
}
public class JqueryValidations
{
public WebViewPage Page { get; private set; }
public JqueryValidations(WebViewPage page)
{
this.Page = page;
}
private Dictionary<string, Dictionary<string, object>> m_rules = new Dictionary<string, Dictionary<string, object>>();
private Dictionary<string, Dictionary<string, object>> m_message = new Dictionary<string, Dictionary<string, object>>();
public void Required(string name,string message)
{
this.AddRuleAndMessage(name, "required", true, message);
}
public void Email(string name, string message)
{
this.AddRuleAndMessage(name,"email",true,message);
}
public void Number(string name, string message)
{
this.AddRuleAndMessage(name, "number", true, message);
}
public void Range(string name,int min,int max, string message)
{
this.AddRuleAndMessage(name, "range", new int[] { min, max }, message);
}
public string ToScripts(string form)
{
JavaScriptSerializer serializer = new JavaScriptSerializer();
StringBuilder builder = new StringBuilder();
builder.Append("$(");
serializer.Serialize(form, builder);
builder.Append(").validate(");
serializer.Serialize(
new
{
rules = this.m_rules,
messages = this.m_message,
onkeyup = false
}, builder);
builder.Append(");");
return builder.ToString();
}
public ValidationElement Element(string name)
{
return new ValidationElement(name, this);
}
private void AddRuleAndMessage(string name, string rule, object value, string message)
{
if (!this.m_rules.ContainsKey(name))
{
this.m_rules[name] = new Dictionary<string, object>();
}
this.m_rules[name][rule] = value;
if (!string.IsNullOrEmpty(message))
{
if (!this.m_message.ContainsKey(name))
{
this.m_message[name] = new Dictionary<string, object>();
}
this.m_message[name][rule] = message;
}
}
}
public class ValidationElement
{
public ValidationElement(string name, JqueryValidations validations)
{
this.Name = name;
this.Validations = validations;
}
public string Name { get; private set; }
public JqueryValidations Validations { get; private set; }
public ValidationElement Required(string message)
{
this.Validations.Required(this.Name, message);
return this;
}
public ValidationElement Email(string message)
{
this.Validations.Email(this.Name, message);
return this;
}
public ValidationElement Number(string message)
{
this.Validations.Number(this.Name, message);
return this;
}
public ValidationElement Range(int min, int max, string message)
{
this.Validations.Range(this.Name, min, max, message);
return this;
}
}
public static class JQueryValidationExtensions
{
public static JqueryValidations Validations(this JqueryHelper jquery)
{
return jquery.Validations("(default)");
}
public static JqueryValidations Validations(this JqueryHelper jquery, string name)
{
var key = typeof(JqueryValidations) + "+" + name;
var page = jquery.ViewPage;
var validations = page.PageData[key] as JqueryValidations;
if (validations == null)
{
page.PageData[key] = validations = new JqueryValidations(page);
}
return validations;
}
}
}

在这段代码中定义了JqueryHelper 类,是对WebViewPage的扩展,其中有一个方法ToScript 我们要特别注意一下,这个方法是在页面上显示一段拼接的js,也就是jquery.validation.js会用到的验证页面元素的js。

具体代码我就不细说了,我介绍一下基本思想吧。首先我们定义了一个JqueryHelper类,然后顶一个JqueryValidation类来定义对页面元素可以进行的验证。这里面有一个链式方法必须用到的就是每个验证方法返回的结果都是JqueryValidation类的对象,这样我们才可以进行链式操作。

通过Dictionary来存储验证的标签Name属性值,错误信息,以及验证规则,最后根据这些值在ToScript中拼接出可以提交的js。

好了,来看个结果,大家就会更加清楚这个链式方法的用途所在了。


代码如下:

@{
Layout = null;
}
@using MvcWeb.Extensions
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<script src="http://www.cnblogs.com/Scripts/jquery-1.5.1.js" type="text/javascript"></script>
<script type="text/javascript" src="@Url.Content("http://www.cnblogs.com/Scripts/jquery-1.5.1-vsdoc.js")"></script>
<script type="text/javascript" src="@Url.Content("http://www.cnblogs.com/scripts/jquery.validate.js")"></script>
</head>
<body>
<div>
<form id="form" action="" method="post">
<input type="text" id="user.Name" name="user.Name" />
@{ this.Jquery().Validations().Required("user.Name","用户名是必填的 亲");}
<select name="user.Gender">
<option value="">Please select...</option>
<option value="1">Male</option>
<option value="2">Femle</option>
</select>
@{ this.Jquery().Validations().Required("user.Gender", null);}
<input type="text" name="user.Email" />
@{this.Jquery().Validations().Element("user.Email").Required("邮箱是必填的").Email("请填写正确的邮箱格式");}
<input type="submit" value="提交" />
</form>
</div>
<script type="text/javascript">
@Html.Raw(this.Jquery().Validations().ToScripts("#form"))
</script>
</body>
</html>

对于在页面中实现验证的方法,我介绍一下咱们应该注意的地方
1.就是我们必须引入对应的js文件,如果我们不引入jquery.validation.js文件,那么验证也是不成功的
2.必须把要验证的元素放到form标签内
3.就是我们在通过链式方法验证元素的时候应该注意顺序,虽然说任何顺序都是可以的,但是我们也要按照业务逻辑来对验证顺序进行调整
4.最后我们通过一个submit按钮来进行提交,可能有人要用ajax等其他方式来提交页面,我可以告诉你,我尝试了一下,这样不会触发前端js的验证
5.最后我们必须要通过ToScript方法来拼接出验证的js,在Mvc中框架会自动进行编码,所以我们要求框架不要编码。如果没有要求框架
不要编码,那么最后得到的js结果就是编码过的js,这不是我们要的结果。具体你可以查看源代码看一下执行结果

最后还是有图有真相
1。初始界面显示

2.如果有些条件不满足,那么就会在界面上显示错误信息,当然这是可定制的。在我

在我调试代码的时候,我发现在IE9下,有时候错误信息显示的不是很实时,在火狐下显示的很正常,可能有些问题需要解决。但是不影响使用。

总结一下,链式方法我们其实也经常看到,在我们使用linq的时候,有时会有很多个方法链接使用,提高了程序的可读性。但是我们在设计可以用来进行链式方法操作的时候一定要注意的就是所有的链式方法的返回值类型尽量相同,因为这便于我们不需要掌握顺序。有的园友会提出不同意见,linq语法就不是所有的返回值类型都相同,但是我们要知道,我们在使用linq的时候,方法的调用顺序是很重要的对吧。

强调一下,扩展方法不是真的在原有类中添加了一个方法,而是相当于调用的静态类中的静态方法实现的。
天色已黑,我们还在努力。坚强的我们,肯定会有美好的明天。

(0)

相关推荐

  • ASP.NET MVC3关于生成纯静态后如何不再走路由直接访问静态页面

    要解决这个问题,我们需要先了解ASP.NET应用程序的生命周期,先看下面作者整理的一张图片: 从图中我们可以清楚的看到:通用IIS访问应用程序时,每次的单个页面URL访问时,都会先经过HttpApplication 管线处理请求,走过BeginRequest 事件之后才会去走路由访问具体的Controller和Action,最后结束的时候会请求EndRequest事件.下面用一张图来表示这个顺序: 注意图中标示的红色部分就是我们要实现的部分,实现如下:1 新建MyHandler.cs 复制代码

  • ASP.NET MVC3的伪静态实现代码

    现在开始研究第一步,如何定义自己的路由规则,达到伪静态的功能需求. 基本实现原理如下图: 首先,关于命名空间. 路由的功能是为了让所有Asp.net网站开发都可以使用,所以dll并没有在MVC中,而是在System.Web中的System.web.Routing. 现在我们为了我们实际的需求,实现MVC3中的自定义路由功能(继承RouteBase,重写RouteData和VirtualPathData). 下面的例子实现以下目的:输入一个youdomin.com/product/123.html

  • 使用Asp.net Mvc3 Razor视图方式扩展JQuery UI Widgets方法介绍

    JQuery UI Widgets是本人非常喜欢的一套前端JS组件,日常开发中基于原有的jquery ui widget js代码进行开发,需要写非常多的重复代码,同时一些现有组件无法满足需求的情况下,需要对现有组件进行扩展,本文使用一套基于jquery ui 的扩展js组件---jtable (http://www.jtable.org),包含了基本的列表和编辑窗口,比起jqGrid,jquery easyui grid或者extjs grid,jtable的代码非常简洁.对于grid功能要求

  • 如何利用扩展方法来链式的对MVC 3中的页面进行验证

    .Net 3.0 添加了一个语法糖就是扩展方法,其实扩展方法的本质就是对类的静态方法的调用,虽然扩展方法只是改变了我们写代码的方式,但是如果我们使用得当,可以给我们带来巨大的编码效率的提升.对于C#扩展方法的使用,我就不细说了,贴段代码说明扩展方法的使用,大家就会回忆起来. 复制代码 代码如下: public static class Extensions { public static string EndWith(this string str) { return str + "@"

  • js实现封装jQuery的简单方法与链式操作详解

    我用这篇文章来理一理如何用js去实现封装jQuery的简单方法. 本文js实现了下面jquery的几种方法,我将它分为8个小目标 实现$(".box1").click( )方法 实现$("div").click( )方法 考虑$( )中参数的三种情况 实现jq中的on方法 实现链式操作 实现jq中的eq方法 实现jq中的end方法 实现jq中的css方法 有不正确的地方还望大家在评论区指出来,谢谢啦. 1. 实现$(".box1").click(

  • c#中的扩展方法学习笔记

    前言 最近在看王清培前辈的.NET框架设计时,当中有提到扩展方法 . 开头的一句话是:扩展方法是让我们在不改变类原有代码的情况下动态地添加方法的方式,这给面向对象设计 模块设计带来了质的提升 很明显,扩展方法在框架设计或者平时码代码中,是能够提升我们整个架构的灵活性的 简介 扩展方法被定义为静态方法,但它们是通过实例方法语法进行调用的. 它们的第一个参数指定该方法作用于哪个类型,并且该参数以 this 修饰符为前缀. 扩展方法当然不能破坏面向对象封装的概念,所以只能是访问所扩展类的public成

  • 实例详解jQuery的链式编程风格

    链式编程的实现原理 jQuery可以让我们开发者一直使用点语法调用自身方法的原理,主要原因是jQuery内部利用了js的对象来实现. 在jQuery中,如果一直对同一个元素或元素的其他关系元素(兄弟元素,父子元素)进行操作,那么可以使用 .语法(点语法),一直写下去. $("#box").css("background", "pink").css("font-size":"29px"); $("#

  • JavaScript 链式结构序列化详解

    一.概述 在JavaScript中,链式模式代码,太多太多,如下: if_else: if(...){ //TODO }else if(...){ //TODO }else{ //TODO } switch: switch(name){ case ...:{ //TODO break; } case ...:{ //TODO break; } default:{ //TODO } } 疑问:诸如上述这些链式代码,倘若,我们想将其扁平化链式处理呢?如下: //fn1,f2,f3为处理函数 _if(

  • PHP对象链式操作实现原理分析

    本文实例讲述了PHP对象链式操作实现原理.分享给大家供大家参考,具体如下: 什么是链式操作呢?使用jQuery的同学印象应该会很深刻.在jQuery中,我们经常会这样的来操作DOM元素: $("p").css("color").addClass("selected"); 连贯操作看起来的确很酷,也非常的方便代码的阅读.那么在PHP里面是否可以实现呢?答案是肯定的,当然了必须是在OOP中用才行,在过程化的程序中,就没有必要用这种方法了. 在PHP中

  • 详解JavaScript中的链式调用

    链模式 链模式是一种链式调用的方式,准确来说不属于通常定义的设计模式范畴,但链式调用是一种非常有用的代码构建技巧. 描述 链式调用在JavaScript语言中很常见,如jQuery.Promise等,都是使用的链式调用,当我们在调用同一对象多次其属性或方法的时候,我们需要多次书写对象进行.或()操作,链式调用是一种简化此过程的一种编码方式,使代码简洁.易读. 链式调用通常有以下几种实现方式,但是本质上相似,都是通过返回对象供之后进行调用. this的作用域链,jQuery的实现方式,通常链式调用

  • 详解Java 缺失的特性扩展方法

    目录 什么是扩展方法 传统写法: 使用 Stream 写法: 在 Java 中怎么实现扩展方法 准备条件 编写扩展方法 数组扩展方法 扩展静态方法 建议 什么是扩展方法 扩展方法,就是能够向现有类型直接“添加”方法,而无需创建新的派生类型.重新编译或以其他方式修改现有类型.调用扩展方法的时候,与调用在类型中实际定义的方法相比没有明显的差异. 为什么需要扩展方法 考虑要实现这样的功能:从 Redis 取出包含多个商品ID的字符串后(每个商品ID使用英文逗号分隔),先对商品ID进行去重(并能够维持元

  • C# 9.0新特性——扩展方法GetEnumerator支持foreach循环

    1.介绍 我们知道,我们要使一个类型支持foreach循环,就需要这个类型满足下面条件之一: 该类型实例如果实现了下列接口中的其中之一: System.Collections.IEnumerable System.Collections.Generic.IEnumerable<T> System.Collections.Generic.IAsyncEnumerable<T> 该类型中有公开的无参GetEnumerator()方法,且其返回值类型必须是类,结构或者接口,同时返回值类型

  • Node.js实现链式回调

    由于异步的关系,代码的书写顺序可能和执行顺序并不一样,可能想先执行A再执行B,但由于异步可能B要先于A执行.例如在OC中使用AFnetworking请求数据然后刷新页面,由于网络请求是用block实现的异步方法,所以刷新的时候并没有数据,为了解决这个问题,一般会在请求响应结束在block中刷新页面(这就回出现循环引用的问题,不过node中不会出现). 上面是OC中异步执行中的链式回调,在node.js中也是使用这样的方法在回调中调用方法来实现链式回调. function logCar(car,c

随机推荐