【51CTO編者按】對于ASP.NET MVC框架大家一定不會陌生，但是對于很多人來說，弄好一個ASP.NET MVC控件項目實在是費勁的事情。這里由作者來介紹他的一個ASP.NET MVC控件項目經歷。51CTO編輯推薦《ASP.NET MVC框架視頻教程》

在寫本文之前，本人一直抱著‘不宜’在ASP.NET MVC框架下搞什么控件開發的想法，因為一提到控件就會讓人想起‘事件’，‘VIEWSTATE’等一些問題，而ASP.NET MVC下是Controller, Action, Viewpage, Filter等特性的‘天下’。所以總感覺‘驢唇對不上馬嘴’。

但直到前陣子在郵箱中收到了關于telerik關于MVC框架擴展的一些信息之后，才發現這家商業控件公司也開始打MVC的主意了。而這個項目（開源）就是該公司在理解了asp.net mvc的基礎上所做的一些嘗試，當然其所實現的所謂控件與之前我們在項目中所開發或使用的web服務器控件有很大的不同，可以說是拋棄了以往的設計方式。盡管目前它的這種做法我心里還打著問號，但必定是一種嘗試（不管你贊同還是不贊同）。下面就做一個簡單的分析，希望能給研究MVC架構的朋友提供一些的思考。

首先要聲明的是該開源項目中所使用的js就是jquery，而那些顯示效果也基本上就是基于jQuery中的那件插件為原型，并進行相應的屬性封裝，以便于在viewpage中用C#等語言進行聲明綁定。下面就其中一些控件的顯示截圖：

在該開源項目中，所有控件均基于jQueryViewComponentBase (abstract 類型)，但其自身屬性并不多，而所有的控件基類屬性都被jQueryViewComponentBase 的父類ViewComponentBase所定義，下面以控件中的“Accordion（屬性頁控件）”為例進行說明，見下圖：

上圖中左側的就是ViewComponentBase類，其定義了多數控件屬性，比如js腳本名稱和路徑以及相關樣式以及最終的html元素輸出方法，因為其類也是抽象類，所以其中大部分方法均為定義，而未進行具體實現。我們只要關注一下其構造方法就可以了：

/// <summary> 
/// View component base class.  
/// </summary> 
    public abstract class ViewComponentBase : IStyleableComponent, IScriptableComponent  
{  
private string name;  
private string styleSheetFilesLocation;  
private string scriptFilesLocation;  
/// <summary> 
/// 初始化相關Initializes a new instance of the <see cref="ViewComponentBase"/> class.  
/// </summary> 
/// <param name="viewContext">當前視圖的上下文，將會在子類中使用</param> 
/// <param name="clientSideObjectWriterFactory">傳入當前所使用的Writer工廠實例.通過子類注入，子類最終延伸到相對應的控件實例</param> 
        protected ViewComponentBase(ViewContext viewContext, IClientSideObjectWriterFactory clientSideObjectWriterFactory)  
{  
Guard.IsNotNull(viewContext, "viewContext");  
Guard.IsNotNull(clientSideObjectWriterFactory, "clientSideObjectWriterFactory");  
ViewContext = viewContext;  
ClientSideObjectWriterFactory = clientSideObjectWriterFactory;  
StyleSheetFilesPath = WebAssetDefaultSettings.StyleSheetFilesPath;  
StyleSheetFileNames = new List<string>();  
ScriptFilesPath = WebAssetDefaultSettings.ScriptFilesPath;  
ScriptFileNames = new List<string>();  
HtmlAttributes = new RouteValueDictionary();  
}  

通過上述的構造方法，就可以將控件的一些通用默認屬性值進行初始化了。

下面以“Accordion”的源碼來分析一下，這里還是從構造方法入手：

public class Accordion : jQueryViewComponentBase, IAccordionItemContainer  
{  
……  
/// <summary> 
/// Initializes a new instance of the <see cref="Accordion"/> class.  
/// </summary> 
/// <param name="viewContext">The view context.</param> 
/// <param name="clientSideObjectWriterFactory">The client side object writer factory.</param> 
       public Accordion(ViewContext viewContext, IClientSideObjectWriterFactory clientSideObjectWriterFactory) : base(viewContext, clientSideObjectWriterFactory)  
{  
Items = new List<AccordionItem>();  
autoHeight = true;  
}  

注：上面的構程方法后面加入了base(viewContext, clientSideObjectWriterFactory)，以實現向基類構造方法傳參，也就是實現了上面所說的將當前控件所使用的viewContext，clientSideObjectWriterFactory傳遞到基類ViewComponentBase 中去。（注：最終的clientSideObjectWriterFactory為ClientSideObjectWriterFactory實例類型）。

當然，因為該控件的中相應屬性比較簡單，只是一些set,get語法，所以就不過多介紹了，相信做過控件開發的對這些再熟悉不過了。

下面主要介紹一下其write html元素時所使用的方法，如下：

/// <summary> 
/// 創建并寫入初始化腳本對象和相應屬性.  
/// </summary> 
/// <param name="writer">The writer.</param> 
      public override void WriteInitializationScript(TextWriter writer)  
{  
int selectedIndex = Items.IndexOf(GetSelectedItem());  
IClientSideObjectWriter objectWriter = ClientSideObjectWriterFactory.Create(Id, "accordion", writer);  
objectWriter.Start()  
.Append("active", selectedIndex, 0)  
.Append("animated", AnimationName)  
.Append("autoHeight", AutoHeight, true)  
.Append("clearStyle", ClearStyle, false)  
.Append("collapsible", CollapsibleContent, false)  
.Append("event", OpenOn)  
.Append("fillSpace", FillSpace, false);  
if (!string.IsNullOrEmpty(Icon) || !string.IsNullOrEmpty(SelectedIcon))  
{  
if (!string.IsNullOrEmpty(Icon) && !string.IsNullOrEmpty(SelectedIcon))  
{  
objectWriter.Append("icons:{'header':'" + Icon + "','headerSelected':'" + SelectedIcon + "'}");  
}  
else if (!string.IsNullOrEmpty(Icon))  
{  
objectWriter.Append("icons:{'header':'" + Icon + "'}");  
}  
else if (!string.IsNullOrEmpty(SelectedIcon))  
{  
objectWriter.Append("icons:{'headerSelected':'" + SelectedIcon + "'}");  
}  
}  
objectWriter.Append("change", OnChange).Complete();  
base.WriteInitializationScript(writer);  
}  

可以看出，objectWriter （IClientSideObjectWriter 類型實例）中被綁定了相關的控件屬性，并通過其類的WriteInitializationScript(writer)進行腳本的輸出。而基本類的相應方法如下：    

 /// <summary> 
/// Writes the initialization script.  
/// </summary> 
/// <param name="writer">The writer.</param> 
      public virtual void WriteInitializationScript(TextWriter writer)  
{  
}  

大家看到該方法為空，但其又是如何運行起來的呢，這里先賣個關子，稍后再說。接著再看一下另一個方法：WriteHtml()

/// <summary> 
/// 輸出當前的 HTML代碼.  
/// </summary> 
      protected override void WriteHtml()  
{  
AccordionItem selectedItem = GetSelectedItem();  
TextWriter writer = ViewContext.HttpContext.Response.Output;  
if (!string.IsNullOrEmpty(Theme))  
{  
writer.Write("<div class=\"{0}\">".FormatWith(Theme));  
}  
HtmlAttributes.Merge("id", Id, false);  
HtmlAttributes.AppendInValue("class", " ", "ui-accordion ui-widget ui-helper-reset");  
writer.Write("<div{0}>".FormatWith(HtmlAttributes.ToAttributeString()));  
foreach (AccordionItem item in Items)  
{  
item.HtmlAttributes.AppendInValue("class", " ", "ui-accordion-header ui-helper-reset ui-state-default ");  
item.ContentHtmlAttributes.AppendInValue("class", " ", "ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom");  
if (item == selectedItem)  
{  
item.ContentHtmlAttributes.AppendInValue("class", " ", "ui-accordion-content-active");  
}  
else  
{  
item.HtmlAttributes.AppendInValue("class", " ", "ui-corner-all");  
}  
writer.Write("<h3{0}><a href=\"#\">{1}</a></h3>".FormatWith(item.HtmlAttributes.ToAttributeString(), item.Text));  
item.ContentHtmlAttributes.AppendInValue("style", ";", (item == selectedItem) ? "display:block" : "display:none");  
writer.Write("<div{0}>".FormatWith(item.ContentHtmlAttributes.ToAttributeString()));  
item.Content();  
writer.Write("</div>");  
}  
writer.Write("</div>");  
if (!string.IsNullOrEmpty(Theme))  
{  
writer.Write("</div>");  
}  
base.WriteHtml();  
}  

該方法首先獲取當前所選屬性頁標簽（GetSelectedItem()方法），然后用foreach方法對屬性頁標簽集合進行遍歷，并判斷當前屬性頁是否就是被選中的屬性頁，并綁定上相應的css屬性。其最終也是調用相應的基類方法進行輸出。當然這里基類方法也是為空，呵呵。

準備好了這個控件類之后，Telerik還為Accordion控件‘準備’了一些輔助組件，比如屬性頁組件（AccordionItem），以及相關的組件構造器（AccordionItemBuilder，AccordionBuilder），這樣我們就可以通過這些構造器很方便的創建相應的控件和組件了，下面就以AccordionItemBuilder為例，解釋一下其構造器結構：

public class AccordionBuilder : ViewComponentBuilderBase<Accordion, AccordionBuilder>, IHideObjectMembers  
{  
/// <summary> 
/// 初始化方法Initializes a new instance of the <see cref="AccordionBuilder"/> class.  
/// </summary> 
/// <param name="component">The component.</param> 
      public AccordionBuilder(Accordion component) : base(component)  
{}  
/// <summary> 
/// 指定一個屬性頁選項  
/// </summary> 
/// <param name="addAction">要添加的action.</param> 
/// <returns></returns> 
      public virtual AccordionBuilder Items(Action<AccordionItemFactory> addAction)  
{  
Guard.IsNotNull(addAction, "addAction");  
AccordionItemFactory factory = new AccordionItemFactory(Component);  
addAction(factory);  
return this;  
}  
/// <summary> 
/// 屬性頁動態效果顯示名稱（鼠標在屬性頁移入移出時）  
/// </summary> 
/// <param name="effectName">Name of the effect.</param> 
/// <returns></returns> 
      public virtual AccordionBuilder Animate(string effectName)  
{  
Component.AnimationName = effectName;  
return this;  
}  
/// <summary> 
/// 是否高度自適用.  
/// </summary> 
/// <param name="value">if set to <c>true</c> value.</param> 
/// <returns></returns> 
      public virtual AccordionBuilder AutoHeight(bool value)  
{  
Component.AutoHeight = value;  
return this;  
}  
 
/// <summary> 
/// 指定要觸發的屬性頁事件名稱.  
/// </summary> 
/// <param name="eventName">Name of the event.</param> 
/// <returns></returns> 
      public virtual AccordionBuilder OpenOn(string eventName)  
{  
Component.OpenOn = eventName;  
return this;  
}  
/// <summary> 
/// 所使用的Icons名稱.  
/// </summary> 
/// <param name="name">The name.</param> 
/// <returns></returns> 
      public virtual AccordionBuilder Icon(string name)  
{  
Component.Icon = name;  
return this;  
}  
/// <summary> 
/// 被選中的屬性頁所使用的Icons 名稱  
/// </summary> 
/// <param name="name">The name.</param> 
/// <returns></returns> 
      public virtual AccordionBuilder SelectedIcon(string name)  
{  
Component.SelectedIcon = name;  
return this;  
}  
/// <summary> 
/// 當屬性頁發生變化時要傳遞的action 腳本.  
/// </summary> 
/// <param name="javaScript">The java script.</param> 
/// <returns></returns> 
      public virtual AccordionBuilder OnChange(Action javaScript)  
{  
Component.OnChange = javaScript;  
return this;  
}  
/// <summary> 
/// Specify the name of the theme applies to the accordion.  
/// </summary> 
/// <param name="name">The name.</param> 
/// <returns></returns> 
      public virtual AccordionBuilder Theme(string name)  
{  
Component.Theme = name;  
return this;  
}  
}  

對于上面的OnChange方法，可以使用下面的方法將相應的js腳本傳入并執行

.OnChange(() => 
{%> 
function(event, ui)  
{  
$('#trace').append('Change fired: ' + new Date() + '<br/>');  
}  
<%}  
)  

這樣，當屬性頁發生變化時，就會在頁面的指定區域將變化時間顯示出來了，如下圖：

Telerik在jQueryViewComponentFactory中對項目中每一個控件提供了一個方法用以初始化相應的構造器，以便于創建相應的控件，比如Accordion，形如： 

 /// <summary> 
/// Creates a accordion for ASP.NET MVC view.  
/// </summary> 
/// <returns></returns> 
     [DebuggerStepThrough]  
public virtual AccordionBuilder Accordion()  
{  
return new AccordionBuilder(Create(() => new Accordion(ViewContext, clientSideObjectWriterFactory)));  
}  

而對于其在VIEW中的使用，則通過擴展方法來加以聲明：

public static class HtmlHelperExtension  
{  
private static readonly IClientSideObjectWriterFactory factory = new ClientSideObjectWriterFactory();  
/// <summary> 
/// Gets the jQuery view components instance.  
/// </summary> 
/// <param name="helper">The html helper.</param> 
/// <returns>jQueryViewComponentFactory</returns> 
       [DebuggerStepThrough]  
public static jQueryViewComponentFactory jQuery(this HtmlHelper helper)  
{  
return new jQueryViewComponentFactory(helper, factory);  
}  
}  

這樣在頁面視圖中，我們這可以使用下面的寫法來構造一個Accordion控件了：

<% Html.jQuery().Accordion()  
.Name("myAccordion")  
.Animate("bounceslide")  
.Items(parent => 
……  

上面只是介紹了前臺和底層代碼如果顯示的問題，但還沒有解釋之前所說的WriteInitializationScript(TextWriter writer)方法以及WriteHtml()
方法如何被調用的問題，正如之前所看到的，因為Accordion的基類ViewComponentBase中未實現具體的代碼，所以這里我們要將注意力轉移到 jQueryViewComponentFactory中，請看如下代碼： 

private TViewComponent Create<TViewComponent>(Func<TViewComponent> factory) where TViewComponent : ViewComponentBase  
{  
TViewComponent component = factory();  
if (component is jQueryViewComponentBase)  
{  
component.AssetKey = DefaultAssetKey;  
}  
htmlHelper.Telerik().StyleSheetRegistrar().ToRegistrar().Register(component);  
htmlHelper.Telerik().ScriptRegistrar().ToRegistrar().Register(component);  
return component;  
}  

上面的方法其實就是之前在該類方法Accordion()中所調用并執行的：

return new AccordionBuilder(Create(() => new Accordion(ViewContext, clientSideObjectWriterFactory))); 

 
       /// <summary> 
/// Registers the scriptable component.  
/// </summary> 
/// <param name="component">The component.</param> 
       public virtual void Register(IScriptableComponent component)  
{  
Guard.IsNotNull(component, "component");  
if (!scriptableComponents.Contains(component))  
{  
scriptableComponents.Add(component);  
}  
}  

    /// <summary> 
/// Writes the scripts in the response.  
/// </summary> 
      public void Render()  
{  
if (hasRendered)  
{  
throw new InvalidOperationException(Resources.TextResource.YouCannotCallRenderMoreThanOnce);  
}  
if (ViewContext.HttpContext.Request.Browser.EcmaScriptVersion.Major >= 1)  
{  
Write(ViewContext.HttpContext.Response.Output);  
}  
hasRendered = true;  
}  

    /// <summary> 
/// 寫出所有腳本資源和腳本 statements.  
/// </summary> 
/// <param name="writer">The writer.</param> 
      protected virtual void Write(TextWriter writer)  
{  
WriteScriptSources(writer);  
WriteScriptStatements(writer);  
}  

    /// <summary> 
/// Renders the component.  
/// </summary> 
    public virtual void Render()  
{  
Component.Render();  
}  

  /// <summary> 
/// Renders the component.  
/// </summary> 
     public void Render()  
{  
EnsureRequired();  
WriteHtml();  
}