ASP.NET MVC控件項(xiàng)目開(kāi)發(fā)的簡(jiǎn)單分析

作者：代震軍 2009-09-09 09:09:17

作者從一個(gè)ASP.NET MVC控件項(xiàng)目開(kāi)始，對(duì)ASP.NET MVC控件進(jìn)行了簡(jiǎn)單的分析，十分深入透徹，希望對(duì)大家有所幫助。

【51CTO編者按】對(duì)于ASP.NET MVC框架大家一定不會(huì)陌生，但是對(duì)于很多人來(lái)說(shuō)，弄好一個(gè)ASP.NET MVC控件項(xiàng)目實(shí)在是費(fèi)勁的事情。這里由作者來(lái)介紹他的一個(gè)ASP.NET MVC控件項(xiàng)目經(jīng)歷。51CTO編輯推薦《ASP.NET MVC框架視頻教程》

在寫(xiě)本文之前，本人一直抱著‘不宜’在ASP.NET MVC框架下搞什么控件開(kāi)發(fā)的想法，因?yàn)橐惶岬娇丶蜁?huì)讓人想起‘事件’，‘VIEWSTATE’等一些問(wèn)題，而ASP.NET MVC下是Controller, Action, Viewpage, Filter等特性的‘天下’。所以總感覺(jué)‘驢唇對(duì)不上馬嘴’。

但直到前陣子在郵箱中收到了關(guān)于telerik關(guān)于MVC框架擴(kuò)展的一些信息之后，才發(fā)現(xiàn)這家商業(yè)控件公司也開(kāi)始打MVC的主意了。而這個(gè)項(xiàng)目（開(kāi)源）就是該公司在理解了asp.net mvc的基礎(chǔ)上所做的一些嘗試，當(dāng)然其所實(shí)現(xiàn)的所謂控件與之前我們?cè)陧?xiàng)目中所開(kāi)發(fā)或使用的web服務(wù)器控件有很大的不同，可以說(shuō)是拋棄了以往的設(shè)計(jì)方式。盡管目前它的這種做法我心里還打著問(wèn)號(hào)，但必定是一種嘗試（不管你贊同還是不贊同）。下面就做一個(gè)簡(jiǎn)單的分析，希望能給研究MVC架構(gòu)的朋友提供一些的思考。

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

在該開(kāi)源項(xiàng)目中，所有控件均基于jQueryViewComponentBase (abstract 類(lèi)型)，但其自身屬性并不多，而所有的控件基類(lèi)屬性都被jQueryViewComponentBase 的父類(lèi)ViewComponentBase所定義，下面以控件中的“Accordion（屬性頁(yè)控件）”為例進(jìn)行說(shuō)明，見(jiàn)下圖：

上圖中左側(cè)的就是ViewComponentBase類(lèi)，其定義了多數(shù)控件屬性，比如js腳本名稱(chēng)和路徑以及相關(guān)樣式以及最終的html元素輸出方法，因?yàn)槠漕?lèi)也是抽象類(lèi)，所以其中大部分方法均為定義，而未進(jìn)行具體實(shí)現(xiàn)。我們只要關(guān)注一下其構(gòu)造方法就可以了：

/// <summary> 
/// View component base class.  
/// </summary> 
    public abstract class ViewComponentBase : IStyleableComponent, IScriptableComponent  
{  
private string name;  
private string styleSheetFilesLocation;  
private string scriptFilesLocation;  
/// <summary> 
/// 初始化相關(guān)Initializes a new instance of the <see cref="ViewComponentBase"/> class.  
/// </summary> 
/// <param name="viewContext">當(dāng)前視圖的上下文，將會(huì)在子類(lèi)中使用</param> 
/// <param name="clientSideObjectWriterFactory">傳入當(dāng)前所使用的Writer工廠實(shí)例.通過(guò)子類(lèi)注入，子類(lèi)最終延伸到相對(duì)應(yīng)的控件實(shí)例</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();  
}

通過(guò)上述的構(gòu)造方法，就可以將控件的一些通用默認(rèn)屬性值進(jìn)行初始化了。

下面以“Accordion”的源碼來(lái)分析一下，這里還是從構(gòu)造方法入手：

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;  
}

注：上面的構(gòu)程方法后面加入了base(viewContext, clientSideObjectWriterFactory)，以實(shí)現(xiàn)向基類(lèi)構(gòu)造方法傳參，也就是實(shí)現(xiàn)了上面所說(shuō)的將當(dāng)前控件所使用的viewContext，clientSideObjectWriterFactory傳遞到基類(lèi)ViewComponentBase 中去。（注：最終的clientSideObjectWriterFactory為ClientSideObjectWriterFactory實(shí)例類(lèi)型）。

當(dāng)然，因?yàn)樵摽丶闹邢鄳?yīng)屬性比較簡(jiǎn)單，只是一些set,get語(yǔ)法，所以就不過(guò)多介紹了，相信做過(guò)控件開(kāi)發(fā)的對(duì)這些再熟悉不過(guò)了。

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

/// <summary> 
/// 創(chuàng)建并寫(xiě)入初始化腳本對(duì)象和相應(yīng)屬性.  
/// </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 類(lèi)型實(shí)例）中被綁定了相關(guān)的控件屬性，并通過(guò)其類(lèi)的WriteInitializationScript(writer)進(jìn)行腳本的輸出。而基本類(lèi)的相應(yīng)方法如下：

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

大家看到該方法為空，但其又是如何運(yùn)行起來(lái)的呢，這里先賣(mài)個(gè)關(guān)子，稍后再說(shuō)。接著再看一下另一個(gè)方法：WriteHtml()

/// <summary> 
/// 輸出當(dāng)前的 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();  
}

該方法首先獲取當(dāng)前所選屬性頁(yè)標(biāo)簽（GetSelectedItem()方法），然后用foreach方法對(duì)屬性頁(yè)標(biāo)簽集合進(jìn)行遍歷，并判斷當(dāng)前屬性頁(yè)是否就是被選中的屬性頁(yè)，并綁定上相應(yīng)的css屬性。其最終也是調(diào)用相應(yīng)的基類(lèi)方法進(jìn)行輸出。當(dāng)然這里基類(lèi)方法也是為空，呵呵。

準(zhǔn)備好了這個(gè)控件類(lèi)之后，Telerik還為Accordion控件‘準(zhǔn)備’了一些輔助組件，比如屬性頁(yè)組件（AccordionItem），以及相關(guān)的組件構(gòu)造器（AccordionItemBuilder，AccordionBuilder），這樣我們就可以通過(guò)這些構(gòu)造器很方便的創(chuàng)建相應(yīng)的控件和組件了，下面就以AccordionItemBuilder為例，解釋一下其構(gòu)造器結(jié)構(gòu)：

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> 
/// 指定一個(gè)屬性頁(yè)選項(xiàng)  
/// </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> 
/// 屬性頁(yè)動(dòng)態(tài)效果顯示名稱(chēng)（鼠標(biāo)在屬性頁(yè)移入移出時(shí)）  
/// </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> 
/// 指定要觸發(fā)的屬性頁(yè)事件名稱(chēng).  
/// </summary> 
/// <param name="eventName">Name of the event.</param> 
/// <returns></returns> 
      public virtual AccordionBuilder OpenOn(string eventName)  
{  
Component.OpenOn = eventName;  
return this;  
}  
/// <summary> 
/// 所使用的Icons名稱(chēng).  
/// </summary> 
/// <param name="name">The name.</param> 
/// <returns></returns> 
      public virtual AccordionBuilder Icon(string name)  
{  
Component.Icon = name;  
return this;  
}  
/// <summary> 
/// 被選中的屬性頁(yè)所使用的Icons 名稱(chēng)  
/// </summary> 
/// <param name="name">The name.</param> 
/// <returns></returns> 
      public virtual AccordionBuilder SelectedIcon(string name)  
{  
Component.SelectedIcon = name;  
return this;  
}  
/// <summary> 
/// 當(dāng)屬性頁(yè)發(fā)生變化時(shí)要傳遞的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;  
}  
}

對(duì)于上面的OnChange方法，可以使用下面的方法將相應(yīng)的js腳本傳入并執(zhí)行

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

這樣，當(dāng)屬性頁(yè)發(fā)生變化時(shí)，就會(huì)在頁(yè)面的指定區(qū)域?qū)⒆兓瘯r(shí)間顯示出來(lái)了，如下圖：

Telerik在jQueryViewComponentFactory中對(duì)項(xiàng)目中每一個(gè)控件提供了一個(gè)方法用以初始化相應(yīng)的構(gòu)造器，以便于創(chuàng)建相應(yīng)的控件，比如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)));  
}

而對(duì)于其在VIEW中的使用，則通過(guò)擴(kuò)展方法來(lái)加以聲明：

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);  
}  
}

這樣在頁(yè)面視圖中，我們這可以使用下面的寫(xiě)法來(lái)構(gòu)造一個(gè)Accordion控件了：

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

上面只是介紹了前臺(tái)和底層代碼如果顯示的問(wèn)題，但還沒(méi)有解釋之前所說(shuō)的WriteInitializationScript(TextWriter writer)方法以及WriteHtml()
方法如何被調(diào)用的問(wèn)題，正如之前所看到的，因?yàn)锳ccordion的基類(lèi)ViewComponentBase中未實(shí)現(xiàn)具體的代碼，所以這里我們要將注意力轉(zhuǎn)移到 jQueryViewComponentFactory中，請(qǐng)看如下代碼：

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;  
}

上面的方法其實(shí)就是之前在該類(lèi)方法Accordion()中所調(diào)用并執(zhí)行的：

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

通過(guò)該方法，就可以將該控件及其相關(guān)組件信息注冊(cè)到相應(yīng)的視圖中。因?yàn)槲覀儽容^關(guān)注WriteHtml()方法，所以這里就直接分析一下這一行代碼：

ScriptRegistrar().ToRegistrar().Register(component);

ScriptRegistrar類(lèi)中的Register方法承擔(dān)著將當(dāng)前要?jiǎng)?chuàng)建的組件添加到當(dāng)前的腳本組件列表中的任務(wù)（scriptableComponents為list列表）

 
       /// <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);  
}  
}

當(dāng)組件被成功添加到該list列表中后，系統(tǒng)就會(huì)調(diào)用Render()方法將其顯示出來(lái)（注：該方法與以前web控件開(kāi)發(fā)中的顯示方法同名，所以比較好理解），如下：

    /// <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;  
}

注意上面的這一行代碼：

Write(ViewContext.HttpContext.Response.Output);

其所實(shí)現(xiàn)的功能如下：

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

而就是WriteScriptStatements這行代碼開(kāi)始執(zhí)行之前所說(shuō)的那個(gè)WriteInitializationScript(TextWriter writer)。而WriteHtml()方法的執(zhí)行入口要更加復(fù)雜一些，因?yàn)門(mén)elerik提供了ViewComponentBuilderBase這個(gè)類(lèi)來(lái)進(jìn)行視圖組件的構(gòu)造，而該類(lèi)中的Render方法就是對(duì)相應(yīng)組件的Render方法（組件中已定義）進(jìn)行調(diào)用，如下：

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

而之前的“Accordion”控件是繼承自ViewComponentBase類(lèi)，所以相應(yīng)組件的Render方法就在該類(lèi)中進(jìn)行了聲明定義，如下：

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

大家看到了第二行代碼了吧，這就是我們之前看到的那個(gè)方法，也就是Accordion組件中WriteHtml()重寫(xiě)方法的調(diào)用入口。

繞了這么一大圈，才把這個(gè)流程理清，是不是有些暈了。的確，剛開(kāi)始接觸時(shí)我也有點(diǎn)暈，但暈呀暈呀就‘暈過(guò)去了’，現(xiàn)在再回頭看起來(lái)感常見(jiàn)其整體的架構(gòu)思路還是很清晰的。可以說(shuō)有了這瓶酒墊底，再分析該項(xiàng)目中的其它控件就‘如魚(yú)得水’了。

***不妨總結(jié)一下：

這是對(duì)ASP.NET MVC控件項(xiàng)目開(kāi)發(fā)做的一次嘗試，但如果之前做過(guò)控件特別是web服務(wù)器端控件開(kāi)發(fā)的朋友，可以看出項(xiàng)目中有非常重的web控件開(kāi)發(fā)味道，基本連方法名稱(chēng)都有一定的重疊。

另外就是其自身還是引用了組件對(duì)象模型的概念，就拿屬性頁(yè)控件來(lái)說(shuō)，就將其分為Accordion和AccordionItem兩種類(lèi)型，其中可以將Accordion看成是AccordionItem的集合封裝（包括遍歷操作），而這里AccordionItem就成了Accordion的一個(gè)組件，而Accordion又是當(dāng)前view中的一個(gè)組件。而組件開(kāi)發(fā)一直是.NET平臺(tái)上所倡導(dǎo)的。其優(yōu)勢(shì)在于可復(fù)用，維護(hù)方便，簡(jiǎn)化復(fù)雜問(wèn)題等。

原文標(biāo)題：一個(gè)Asp.net MVC 控件項(xiàng)目分析---Telerik.Web.Mvc

鏈接：http://www.cnblogs.com/daizhj/archive/2009/09/09/1562966.html

【編輯推薦】