一个Asp.net MVC 控件项目分析---Telerik.Web.Mvc-优快云博客

探讨在ASP.NET MVC框架下使用jQuery开发控件的方法，介绍了一个开源项目如何通过继承和封装实现自定义控件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在写本文之前，本人一直抱着‘不宜’在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元素输出方法，因为其类也是抽象类，所以其中大部分方法均为定义，而未进行具体实现。我们只要关注一下其构造方法就可以了：

<bgsound cep="0">///<summary> ///Viewcomponentbaseclass. ///</summary> publicabstractclassViewComponentBase:IStyleableComponent,IScriptableComponent { privatestringname; privatestringstyleSheetFilesLocation; privatestringscriptFilesLocation; ///<summary> ///初始化相关Initializesanewinstanceofthe<seecref="ViewComponentBase"/>class. ///</summary> ///<paramname="viewContext">当前视图的上下文，将会在子类中使用</param> ///<paramname="clientSideObjectWriterFactory">传入当前所使用的Writer工厂实例.通过子类注入，子类最终延伸到相对应的控件实例</param> protectedViewComponentBase(ViewContextviewContext,IClientSideObjectWriterFactoryclientSideObjectWriterFactory) { Guard.IsNotNull(viewContext,"viewContext"); Guard.IsNotNull(clientSideObjectWriterFactory,"clientSideObjectWriterFactory"); ViewContext=viewContext; ClientSideObjectWriterFactory=clientSideObjectWriterFactory; StyleSheetFilesPath=WebAssetDefaultSettings.StyleSheetFilesPath; StyleSheetFileNames=newList<string>(); ScriptFilesPath=WebAssetDefaultSettings.ScriptFilesPath; ScriptFileNames=newList<string>(); HtmlAttributes=newRouteValueDictionary(); } </bgsound>

通过上述的构造方法，就可以将控件的一些通用默认属性值进行初始化了。

下面以“Accordion”的源码来分析一下，这里还是从构造方法入手：

<bgsound cep="1">publicclassAccordion:jQueryViewComponentBase,IAccordionItemContainer { …… ///<summary> ///Initializesanewinstanceofthe<seecref="Accordion"/>class. ///</summary> ///<paramname="viewContext">Theviewcontext.</param> ///<paramname="clientSideObjectWriterFactory">Theclientsideobjectwriterfactory.</param> publicAccordion(ViewContextviewContext,IClientSideObjectWriterFactoryclientSideObjectWriterFactory):base(viewContext,clientSideObjectWriterFactory) { Items=newList<AccordionItem>(); autoHeight=true; } </bgsound>

注：上面的构程方法后面加入了base(viewContext, clientSideObjectWriterFactory)，以实现向基类构造方法传参，也就是实现了上面所说的将当前控件所使用的viewContext，clientSideObjectWriterFactory传递到基类ViewComponentBase 中去。（注：最终的clientSideObjectWriterFactory为ClientSideObjectWriterFactory实例类型）。

当然，因为该控件的中相应属性比较简单，只是一些set,get语法，所以就不过多介绍了，相信做过控件开发的对这些再熟悉不过了。

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

<bgsound cep="2">///<summary> ///创建并写入初始化脚本对象和相应属性. ///</summary> ///<paramname="writer">Thewriter.</param> publicoverridevoidWriteInitializationScript(TextWriterwriter) { intselectedIndex=Items.IndexOf(GetSelectedItem()); IClientSideObjectWriterobjectWriter=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+"'}"); } elseif(!string.IsNullOrEmpty(Icon)) { objectWriter.Append("icons:{'header':'"+Icon+"'}"); } elseif(!string.IsNullOrEmpty(SelectedIcon)) { objectWriter.Append("icons:{'headerSelected':'"+SelectedIcon+"'}"); } } objectWriter.Append("change",OnChange).Complete(); base.WriteInitializationScript(writer); } </bgsound>

可以看出，objectWriter （IClientSideObjectWriter 类型实例）中被绑定了相关的控件属性，并通过其类的WriteInitializationScript(writer)进行脚本的输出。而基本类的相应方法如下：

<bgsound cep="3">///<summary> ///Writestheinitializationscript. ///</summary> ///<paramname="writer">Thewriter.</param> publicvirtualvoidWriteInitializationScript(TextWriterwriter) { } </bgsound>

大家看到该方法为空，但其又是如何运行起来的呢，这里先卖个关子，稍后再说。接着再看一下另一个方法：WriteHtml()

<bgsound cep="4">///<summary> ///输出当前的HTML代码. ///</summary> protectedoverridevoidWriteHtml() { AccordionItemselectedItem=GetSelectedItem(); TextWriterwriter=ViewContext.HttpContext.Response.Output; if(!string.IsNullOrEmpty(Theme)) { writer.Write("<divclass=\"{0}\">".FormatWith(Theme)); } HtmlAttributes.Merge("id",Id,false); HtmlAttributes.AppendInValue("class","","ui-accordionui-widgetui-helper-reset"); writer.Write("<div{0}>".FormatWith(HtmlAttributes.ToAttributeString())); foreach(AccordionItemiteminItems) { item.HtmlAttributes.AppendInValue("class","","ui-accordion-headerui-helper-resetui-state-default"); item.ContentHtmlAttributes.AppendInValue("class","","ui-accordion-contentui-helper-resetui-widget-contentui-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}><ahref=\"#\">{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(); } </bgsound>

该方法首先获取当前所选属性页标签（GetSelectedItem()方法），然后用foreach方法对属性页标签集合进行遍历，并判断当前属性页是否就是被选中的属性页，并绑定上相应的css属性。其最终也是调用相应的基类方法进行输出。当然这里基类方法也是为空，呵呵。

准备好了这个控件类之后，Telerik还为Accordion控件‘准备’了一些辅助组件，比如属性页组件（AccordionItem），以及相关的组件构造器（AccordionItemBuilder，AccordionBuilder），这样我们就可以通过这些构造器很方便的创建相应的控件和组件了，下面就以AccordionItemBuilder为例，解释一下其构造器结构：

Code
<bgsound cep="5">publicclassAccordionBuilder:ViewComponentBuilderBase<Accordion,AccordionBuilder>,IHideObjectMembers { ///<summary> ///初始化方法Initializesanewinstanceofthe<seecref="AccordionBuilder"/>class. ///</summary> ///<paramname="component">Thecomponent.</param> publicAccordionBuilder(Accordioncomponent):base(component) {} ///<summary> ///指定一个属性页选项 ///</summary> ///<paramname="addAction">要添加的action.</param> ///<returns></returns> publicvirtualAccordionBuilderItems(Action<AccordionItemFactory>addAction) { Guard.IsNotNull(addAction,"addAction"); AccordionItemFactoryfactory=newAccordionItemFactory(Component); addAction(factory); returnthis; } ///<summary> ///属性页动态效果显示名称（鼠标在属性页移入移出时） ///</summary> ///<paramname="effectName">Nameoftheeffect.</param> ///<returns></returns> publicvirtualAccordionBuilderAnimate(stringeffectName) { Component.AnimationName=effectName; returnthis; } ///<summary> ///是否高度自适用. ///</summary> ///<paramname="value">ifsetto<c>true</c>value.</param> ///<returns></returns> publicvirtualAccordionBuilderAutoHeight(boolvalue) { Component.AutoHeight=value; returnthis; } ///<summary> ///指定要触发的属性页事件名称. ///</summary> ///<paramname="eventName">Nameoftheevent.</param> ///<returns></returns> publicvirtualAccordionBuilderOpenOn(stringeventName) { Component.OpenOn=eventName; returnthis; } ///<summary> ///所使用的Icons名称. ///</summary> ///<paramname="name">Thename.</param> ///<returns></returns> publicvirtualAccordionBuilderIcon(stringname) { Component.Icon=name; returnthis; } ///<summary> ///被选中的属性页所使用的Icons名称 ///</summary> ///<paramname="name">Thename.</param> ///<returns></returns> publicvirtualAccordionBuilderSelectedIcon(stringname) { Component.SelectedIcon=name; returnthis; } ///<summary> ///当属性页发生变化时要传递的action脚本. ///</summary> ///<paramname="javaScript">Thejavascript.</param> ///<returns></returns> publicvirtualAccordionBuilderOnChange(ActionjavaScript) { Component.OnChange=javaScript; returnthis; } ///<summary> ///Specifythenameofthethemeappliestotheaccordion. ///</summary> ///<paramname="name">Thename.</param> ///<returns></returns> publicvirtualAccordionBuilderTheme(stringname) { Component.Theme=name; returnthis; } }</bgsound>

对于上面的OnChange方法，可以使用下面的方法将相应的js脚本传入并执行

<bgsound cep="6">.OnChange(()=> {%> function(event,ui) { $('#trace').append('Changefired:'+newDate()+' '); } <%} ) </bgsound>

这样，当属性页发生变化时，就会在页面的指定区域将变化时间显示出来了，如下图：

Telerik在jQueryViewComponentFactory中对项目中每一个控件提供了一个方法用以初始化相应的构造器，以便于创建相应的控件，比如Accordion，形如：

<bgsound cep="7">///<summary> ///CreatesaaccordionforASP.NETMVCview. ///</summary> ///<returns></returns> [DebuggerStepThrough] publicvirtualAccordionBuilderAccordion() { returnnewAccordionBuilder(Create(()=>newAccordion(ViewContext,clientSideObjectWriterFactory))); } </bgsound>

而对于其在VIEW中的使用，则通过扩展方法来加以声明：

<bgsound cep="8">publicstaticclassHtmlHelperExtension { privatestaticreadonlyIClientSideObjectWriterFactoryfactory=newClientSideObjectWriterFactory(); ///<summary> ///GetsthejQueryviewcomponentsinstance. ///</summary> ///<paramname="helper">Thehtmlhelper.</param> ///<returns>jQueryViewComponentFactory</returns> [DebuggerStepThrough] publicstaticjQueryViewComponentFactoryjQuery(thisHtmlHelperhelper) { returnnewjQueryViewComponentFactory(helper,factory); } } </bgsound>

这样在页面视图中，我们这可以使用下面的写法来构造一个Accordion控件了：

上面只是介绍了前台和底层代码如果显示的问题，但还没有解释之前所说的WriteInitializationScript(TextWriter writer)方法以及WriteHtml()
方法如何被调用的问题，正如之前所看到的，因为Accordion的基类ViewComponentBase中未实现具体的代码，所以这里我们要将注意力转移到 jQueryViewComponentFactory中，请看如下代码：

<bgsound cep="10">privateTViewComponentCreate<TViewComponent>(Func<span style="color: