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

经过上述的结构办法，就能够将控件的一些通用默许特点值进行初始化了。

下面以“Accordion”的源码来剖析一下，这儿仍是从结构办法下手：

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

注：上面的构程办法后边加入了base(viewContext, clientSideObjectWriterFactory)，以完成向基类结构办法传参，也便是完成了上面所说的将当时控件所运用的viewContext，clientSideObjectWriterFactory传递到基类ViewComponentBase 中去。（注：终究的clientSideObjectWriterFactory为ClientSideObjectWriterFactory实例类型）。

当然，由于该控件的中相应特点比较简略，仅仅一些set,get语法，所以就不过多介绍了，信任做过控件开发的对这些再了解不过了。

下面首要介绍一下其write html元素时所运用的办法，如下：

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

能够看出，objectWriter （IClientSideObjectWriter 类型实例）中被绑定了相关的控件特点，并经过其类的WriteInitializationScript(writer)进行脚本的输出。而基本类的相应办法如下：

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

咱们看到该办法为空，但其又是怎么运转起来的呢，这儿先卖个关子，稍后再说。接着再看一下另一个办法：WriteHtml()

///<summary>
///输出当时的HTML代码. 
///</summary>