浅谈ASP.NET MVC中的FluentHtml与连续接口

开发 后端
本文将简单谈谈ASP.NET MVC中的FluentHtml与连续接口,其目的是为了能够在View中能够简洁清晰的构造HTML元素。

我们力求页面层代码简洁并具有较好的可读性,在ASP.NET MVC的平台上,我们以新的起点来实现这一目标.MvcContrib.FluentHtml和Spark ViewEngine给我们做出了榜样.本文将以MvcContrib.FluentHtml为例探究它的实现机制:Fluent Interface.

在MvcContrib.FluentHtml的应用中,我们随处可以见到下面的代码:

  1. < %= this.TextBox(x => x.Person.Name).Title("Enter the person's name").Label("Name:") %> 
  2. ……   
  3.  < %= this.Select(x => x.Person.Gender).Options(Model.Genders).Size(5).Label("Gender:")  
  4. .Title("Select the person's gender") %> 

 浏览器中生成的代码为:

  1. < LABEL id=Person_Name_Label for=Person_Name>Name:< /LABEL> 
  2. < INPUT id=Person_Name title="Enter the person's name" value=Jeremy maxLength=50 name=Person.Name> 
  3.  .  
  4. < SELECT id=Person_Gender title="Select the person's gender" size=5 name=Person.Gender>< OPTION selected value=M>Male< /OPTION>< OPTION value=F>Female< /OPTION>< /SELECT> 

上面对动态生成TextBox和Select的代码很有意思,我们使用普通的方式在页面上生成同样的客户端代码,CS代码大致是这样的: 

  1. Label label = new Label();  
  2.  label.Text = "Name";  
  3.  TextBox textboxnew TextBox();  
  4.  textbox.ToolTip ="Enter the person's name";  
  5.  textbox.ID = "No.10001";  
  6.  textbox.ID = "Person.Name"

而FluentHtml创建页面元素的方式让我们很容易联想到StringBuilder的使用: 

  1. StringBuilder stringbuilder = new StringBuilder();  
  2.  stringbuilder.Append("Hello").Append(" ").Append("World!"); 

Fulent Interface 这种实现编程方式就是"Fluent Interface",这并不是什么新概念,2005年Eric Evans 和Martin Fowler就为这种实现方式命名.源文档 <http://www.martinfowler.com/bliki/FluentInterface.html> 可以通过维基百科中对Fluent Interface的描述获得一个基本的了解:In software engineering, a fluent interface (as first coined by Eric Evans and Martin Fowler) is a way of implementing an object oriented API in a way that aims to provide for more readable code.

我们分解上面的话:

它是面向对象API的一种实现方式,目的是增加代码的可读性.。既然我们最熟悉的是StringBuilder,我们就从这个线索追下去:打开Reflector,很容易找到StringBuilder的Append方法:

  1. public StringBuilder Append(string value)  
  2. {  
  3. if (value != null)  
  4. {  
  5.  string stringValue = this.m_StringValue;  
  6.  IntPtr currentThread = Thread.InternalGetCurrentThread();  
  7.  if (this.m_currentThread != currentThread)  
  8.  {  
  9.  stringstringValue = string.GetStringForStringBuilder(stringValue, stringValue.Capacity);  
  10.  }  
  11.  int length = stringValue.Length;  
  12.  int requiredLength = length + value.Length;  
  13.  if (this.NeedsAllocation(stringValue, requiredLength))  
  14.  {  
  15.  string newString = this.GetNewString(stringValue, requiredLength);  
  16.  newString.AppendInPlace(value, length);  
  17.  this.ReplaceString(currentThread, newString);  
  18.  }  
  19.  else  
  20.  {  
  21.  stringValue.AppendInPlace(value, length);  
  22.  this.ReplaceString(currentThread, stringValue);  
  23.  }  
  24. }  
  25. return this;  

阅读这段有两个特别要注意的点:1.方法的返回值是StringBuilder类型 2.***一句:return this;为了深刻理解,我们写一个简单的StringBuilder:

  1. public interface IContentBuilder  
  2. {  
  3.  void WriteContent();  
  4.  IContentBuilder Append(string partialContent);  
  5. }  
  6. public class TestContentBuilder : IContentBuilder  
  7. {  
  8.  string temp;  
  9.  #region IContentBuilder Members  
  10.  
  11.  void IContentBuilder.WriteContent()  
  12.  {  
  13.  Console.Write(temp);  
  14.  }  
  15.  
  16.  IContentBuilder IContentBuilder.Append(string partialContent)  
  17.  {  
  18.  temp += partialContent;  
  19.  return this;  
  20.  }  
  21.  
  22.  #endregion  
  23. }  
  24. … …  
  25. //调用代码  
  26. IContentBuilder t = new TestContentBuilder();  
  27.  t.Append("test").Append("Hello").WriteContent(); 

跑一下代码,和StringBuilder效果是一样的.从上面的应用也可以看出:Fluent Interface经常用来完成对象的构造和属性赋值.

言归正传:FluentHTML了解了Fluent Interface,我们来看一下MVCContrib.FluentHTML的实现,这里以TextBox为例进行考察,首先看一下它的继承关系:

  1. public class TextBox : TextInput  
  2. public abstract class TextInput : Input, ISupportsMaxLength where T : TextInput  
  3. public abstract class Input : FormElement where T : Input, Ielement 

泛型是一种高层次的算法抽象,我们就通过Input一窥端倪:

  1. public abstract class Input : FormElement where T : Input, IElement  
  2. {  
  3. protected object elementValue;  
  4. protected Input(string type, string name) : base(HtmlTag.Input, name)  
  5. {  
  6.  builder.MergeAttribute(HtmlAttribute.Type, type, true);  
  7. }  
  8. protected Input(string type, string name, MemberExpression forMember, IEnumerable behaviors)  
  9.  : base(HtmlTag.Input, name, forMember, behaviors)  
  10. {  
  11.  builder.MergeAttribute(HtmlAttribute.Type, type, true);  
  12. }  
  13. ///   
  14. /// Set the 'value' attribute.  
  15. ///   
  16. /// The value for the attribute.  
  17. public virtual T Value(object value)  
  18. {  
  19.  elementValue = value;  
  20.  return (T)this;  
  21. }  
  22. ///   
  23. /// Set the 'size' attribute.  
  24. ///   
  25. /// The value for the attribute.  
  26. public virtual T Size(int value)  
  27. {  
  28.  Attr(HtmlAttribute.Size, value);  
  29.  return (T)this;  
  30. }  
  31. protected override void PreRender()  
  32. {  
  33.  Attr(HtmlAttribute.Value, elementValue);  
  34.  base.PreRender();  
  35. }  
  36. }  
  37. 以Size方法为例,可以看出这是一种典型的Fluent Interface实现:  
  38. public virtual T Size(int value)  
  39. {  
  40. Attr(HtmlAttribute.Size, value);  
  41. return (T)this;  

分析到这里,上面的语句中还有一点比较奇怪,就是Lambda表达式的部分:

  1. this.TextBox(x => x.Person.Name).Title("Enter the person's name").Label("Name:") 

TextBox的实现代码里面我们没有看到对Lambda表达式的支持.那是在什么地方完成的呢?通过跟进,我们来到了ViewDataContainerExtensions,它是IViewDataCon

  1. namespace MvcContrib.FluentHtml  
  2. {  
  3. ///   
  4. /// Extensions to IViewDataContainer  
  5. ///   
  6. public static class ViewDataContainerExtensions  
  7. {  
  8.  ///   
  9.  /// Generate an HTML input element of type 'text' and set its value from ViewData based on the name provided.  
  10.  ///   
  11.  /// The view.  
  12.  /// Value of the 'name' attribute of the element.Also used to derive the 'id' attribute.  
  13.  public static TextBox TextBox(this IViewDataContainer view, string name)  
  14.  {  
  15.  return new TextBox(name).Value(view.ViewData.Eval(name));  
  16.  }  
  17. … …  

tainer 的Extension Method:

看一下return new TextBox(name).Value(view.ViewData.Eval(name));所以这里就成了TextBox定义方法链的***步.

FluentHtml与连续接口总结

为了能够在View中能够简洁清晰的构造HTML元素,Asp.net MVC中通过htmlHelper.InputHelper来实现页面元素的构造. 页面层所使用的<%= Html.TextBox("username") %>,HTML也是htmlHelper的Extension Method.相比较起来,htmlHelper提供了基础的页面控件定义和构造,而FluentHTML表现的更为灵活.除了FluentHTML,著名的Spark View Engine也有类似的实现,大家可以关注一下.

【编辑推荐】

  1. VS2010 Beta 1的ASP.NET MVC安装包发布
  2. ASP.NET中性能和扩展性的秘密
  3. ASP.NET 3.5图表控件亲密接触
  4. 自己动手实现Asp.net的MVC框架
  5. ASP.NET中防止用户多次登录的方法
责任编辑:彭凡 来源: cnblogs
相关推荐

2009-07-20 12:42:04

MvcContrib.ASP.NET MVC

2009-07-22 13:24:24

ASP.NET MVC

2009-07-23 15:44:39

ASP.NET MVC

2009-12-21 10:05:10

ASP.NET MVC

2011-01-28 09:45:29

ASP.NET MVC

2009-12-07 09:23:05

ASP.NET MVC

2009-07-27 13:01:28

TreeViewASP.NET

2009-06-09 11:37:51

ViewStateViewDataASP.NET

2009-07-07 10:14:57

基于URL权限控制

2009-07-29 09:38:06

Web开发ASP.NET

2009-07-22 13:16:04

MvcAjaxPaneASP.NET MVC

2011-06-08 11:36:16

ASP.NETrender

2009-07-24 10:52:42

ASP.NET ISA

2009-07-31 12:43:59

ASP.NET MVC

2009-07-24 13:20:44

MVC框架ASP.NET

2009-12-08 08:57:21

ASP.NET MVC

2009-07-20 15:30:11

ASP.NET应用

2009-07-22 16:11:43

ASP.NET AJA

2009-03-13 10:58:48

ASP.NetMVC框架编程

2009-08-24 09:18:34

ASP.NET MVC
点赞
收藏

51CTO技术栈公众号