控件开发：JavaScript的呈现逻辑和方法
1. 首先我们要实现这个控件，大致要怎样的步骤呢？
当我们开发这样的控件的时候，主要涉及到以下的内容：
(1) 使用该控件，并封装实现Html和客户端脚本；
(2) 确定如何将客户端脚本呈现包含在页面中(控件从Control 和WebControl继承，会有不同)
(3) 控件应该包括一个确定合适呈现脚本的程序逻辑，不必总是呈现客户端脚本
(4) 当所请求的浏览器不支持客户端能力的时候，允许控件退回执行服务器端代码
2．呈现方式
2.1 将脚本呈现为Html属性值
这个比较简单，我们可以考虑这样一个例子，一个超级链接，鼠标移出或移上去，会有不同的背景。
Html代码1如下：
<a href="Http://xbf321.cnblogs.com" onmouseover="this.style.backgroundColor='Blue';this.style.color='yellow';this.style.fontSize='xx-large';this.style.fontWeight='bold';" onmouseout="this.style.backgroundColor='White';this.style.color='Blue';this.style.fontSize='small';this.style.fontWeight='normal';" style="background-color:Write;color:Blue;font-size:small;font-weight:normal;">点我</a>
下面将开发一个自定义控件CustomHyperLinkAttr。该控件可自动完成上述两个步骤。
因为我们只给链接加上属性，所以我们选择一个现成的.Net 控件HyperLink，作为这个控件的基类，我们重写此控件的AddAttributesToRender方法，该方法呈现包含Html元素的属性，代码2如下：
我们在页面上，只要使用这个控件的就可以了，而不必写上一大堆的Html代码
Code
<form id="form1" runat="server"> <custom:CustomHyperLinkAttr runat="server" NavigateUrl="Http://xbf321.cnblogs.com" Text="点我"></custom:CustomHyperLinkAttr></form>,
一定要在页面或Web.Config中引用以下哦，我想这是最基本的，不用我在详细的说了吧。呵呵，可以参考ClingingBoy的http://www.cnblogs.com/Clingingboy/archive/
2.2 在<script></script>中呈现脚本块
在上面的代码1种，我们的链接包含Css样式属性和Js代码，如果我们的页面上有好多这样的链接，那我们的页面，就会非常的臃肿，维护也是个问题，所以我们把js部分提炼出来用JavaScript来对链接操作，并在元素<a>的onmouseover 和onmouseout属性中调用这两个个函数即可
代码3
Code
接下来，我们修改一下上面的那个自定义控件，我们在此控件的Render方法中把这些的JavaScript函数给输出来，而在AddAttributesToRender方法中修改onmouseover和onmouseout二个属性。
代码4
Code 注意注释掉的部分
如上代码所示，该控件重写了Render方法，以便将客户端脚本呈现为一个脚本快，同时还重写了AddAttributesRender方法，将其呈现为包含Html元素<a>的onmouseover和onmouseout 的属性值。
如果页面开发人员在同一个页面上使用两个或多个这样的控件，会发生什么呢？
如你所想，页面上就会有多个像代码3这样的脚本快。
这就意味着自定义控件的每个事例都会调用一次Render方法，所以就会在页面上重复这样的脚本块，那我们怎么才能避免这种问题呢？
Page类提供了这样一种机制，其允许在包含页面的Render方法中注册并判断是否已经注册脚本块，代码5如下
Public void RegisterClientScriptBlock(Type type,string key,string script,bool addTag)
如果控件呈现的Html代码需要访问Javascript,那么就必须使用RegisterClientScriptBlock方法注册，因为只有呈现呈现在脚本快后面的Html才能访问该脚本，如果脚本需要访问Html那么只有使用RegisterStartupScript方法。这两个的参数都是一样的。可以举一反三明白其他的。
在控件尝试注册脚本快之前，可以调用IsClientScriptBlockRegistered/IsClientStartScriptRegister方法来检测该脚本是否已经注册过，在相同的关键字下，对相同的客户端进行多次注册时允许的，这是因为该操作，并没有将相同脚本的多个副本添加到页面的注册脚本内部列表中。因此控件应该调用IsClientScriptBlockRegistered/IsClientStartScriptRegister方法。那么应该在什么时候调用该方法呢？
如果控件必须花费大量的时间来生成已注册过的脚本，那么有可能会降低性能，在这种情况下，就首先调用IsClientScriptBlockRegistered/IsClientStartScriptRegister方法，以便脚本是没有经过注册的：
Public bool IsClientScriptBlockRegisted(String key)
在内部，该方法会调用以下方法的重写，并将包含页面的System.Type对象和key作为参数传递给该方法：
Public void RegisterStartupScript(Type type ,string key,string script,bool addScriptTags)
回顾一下代码4，该代码直接在Render方法中直接呈现控件的脚本快，上面我们说过，该控件不应该直接呈现脚本块，而是应该向包含页面注册脚本块，以便让页面自己呈现脚本块，以下是新版本的CustomHyperLinkAttr控件代码，该控件重写了OnPreRender方法，以便向页面注册客户端脚本代码5
Code强烈要求读懂下面的文字：
如以上所示，控件必须在生命周期的预呈现阶段注册脚本块，开发人员不应该在空间的呈现阶段中调用包含页面的ClientScript属性的注册方法(RegisterClientScriptBlock).
当包含页面进入生命周期的呈现阶段，叶面将在控件树内递归调用每个控件的RenderControl方法，以便呈现每个控件，这意味着页面时在控件呈现之前开始呈现。因此，如果控件在呈现阶段调用注册方法，那么将在页面进入呈现阶段后注册客户端脚本(重要)
2.3 将控件的脚本打包放在一个单独得js文件中，并在页面上引用作为<script>元素的src属性值
回顾上面的事例，其中页面开发人员直接将脚本块加入页面，则会造成以下问题
1，页面杂乱，不易维护
2，每次更新时，还要确保没有破坏其他东西
3，不允许浏览器缓存脚本，无法在使用相同脚本的页面重用脚本
4，对控件本身维护也是个问题
为了避免以上问题，所以通常把脚本打包为一个.js文件并在页面上引用这个js文件，这中方式具有以下优点
1，分离Html和js，那么页面开发人员在修改Js文件的同时，不影响Html
2，允许浏览器缓存js文件，并且在不用的页面上使用它们
3，由于页面没有包含脚本，所以减小页面大小
如代码6 所示
<head runat="server"> <title>Untitled Page</title> <script src="base.js" type="text/javascript"></script></head><body> <form id="form1" runat="server"> <custom:CustomHyperLinkAttr runat="server" NavigateUrl="Http://xbf321.cnblogs.com" Text="点我"></custom:CustomHyperLinkAttr><br /> <custom:CustomHyperLinkAttr ID="CustomHyperLinkAttr1" runat="server" NavigateUrl="Http://xbf321.cnblogs.com" Text="点我2"></custom:CustomHyperLinkAttr> </form> 注意以上代码的深蓝色部分，页面没有额外的js脚本块，只有对外部js的引用。
在代码5种，我们是在控件的OnPreRender中把脚本块用RegisterScriptBlock注册页面中，页面直接将客户端代码呈现在Html中，接着发送到请求的浏览器，但是这样是不对的。
换句话说。在OnPreRender中，不应该把脚本直接注册到页面注册脚本内部列表，而应该使用脚本文件的Url，并生成客户端脚本包含，而后再用RegisterScriptBlock方法，如代码7所示
代码7
string strJs2 = "<script src=\"base.js\" type=\"text/javascript\"></script>"; Type type = typeof(CustomHyperLinkAttr); if (!Page.ClientScript.IsClientScriptBlockRegistered(type, type.FullName))
{
Page.ClientScript.RegisterClientScriptBlock(type, type.FullName, strJs2);
} base.OnPreRender(e);Page类的ClientScript属性包括一个RegisterClientScriptInclude方法，该方法封装了代码7种红色部分，从而简化自定义控件的OnPreRender方法，如代码8
protected override void OnPreRender(EventArgs e) {Type type = typeof(CustomHyperLinkAttr); if(!Page.ClientScript.IsClientScriptIncludeRegistered(type,type.FullName))
{ Page.ClientScript.RegisterClientScriptInclude(type.FullName, "base.js");
} base.OnPreRender(e); } 注意：ClientScript中有一系列的方法都是配合来的比如：
Public void RegisterXXX 和Public bool IsRegisterXXX,这些可以通过MSDN的资料查一下，我在这就不过多的详述了，赫赫
3．部署
正如以上所述，把脚本放到一个单独得脚本文件中，这样页面可以用页面包含的方式引用，但是这样也是有缺点的，比如必须把脚本部署到客户端，这就造成了自定义脚本部署的困难，特别是当控件2个不同的版本同时在客户端运行的时候。
自定义控件的其他文件也存在同样的问题，如Css Image.Asp2.0提供了两种部署方案解救这个部署问题，一是将源文件部署到一个共享位置，另一个是将源文件嵌入到程序及中。
3.1 将源文件部署到一个共享位置
在Asp.Net 1.1 中我们都只知道在IIS下有一个aspnet_client文件夹，其实这个文件夹就是提供各个Asp.Net程序公用的一个js文件夹，里面有根据版本的问题，设置了几个不同的文件夹，来共Asp.Net 选择，我们可以把js文件放到这个里面，以达到公用的目的，然而这种部署方式也可能导致错误，因为控件和其资源在不同的文件中，每次部署控件都必须确保相应得源文件也被部署，这就造成部署困难，所以，在这我强烈建议你不用这种方式，而选择第二种部署方式。
3.2 将源文件嵌入程序集中
用这种方式，不需要部署独立的源文件，由于控件的每个版本包含js文件，所以这又解决了版本问题。
那如何使用这种部署方式呢？
首先，我们需要下列两项操作
1，把js的源文件添加到Vs的控件项目中
2，把这个源文件属性的BuildAction属性，设置为Embedded Resource.这样可以通知Vs将源文件嵌入到程序集中
一个文件嵌入到程序中，并不说明就应该使用该资源，我们必须把一下代码添加到AssemblyInfo.cs中。
[assembly: WebResource("CustomComponents.base.js", "text/javascript")]
WebResource 属性的第一个参数是资源名称，有命名控件和js文件名组成，第二个是MIME类型，如图片的MIME类型为image/jpeg一样。
代码9 是我们用这种方式实现
protected override void OnPreRender(EventArgs e) { Type type = typeof(CustomHyperLinkAttr); string strUrl = Page.ClientScript.GetWebResourceUrl(type, "CustomComponents.base.js"); if(!Page.ClientScript.IsClientScriptIncludeRegistered(type,type.FullName)) { Page.ClientScript.RegisterClientScriptInclude(type.FullName, strUrl); } base.OnPreRender(e); }注意以上红色部分，Page类的ClientScript属性包括一个RegisterClientScriptResource方法，该方法封装了代码9的红色部分，从而简化了自定义控件的OnPreRender方法，如代码10
{
Type type = typeof(CustomHyperLinkAttr);
Page.ClientScript.RegisterClientScriptResource(type,"CustomComponents.base.js");
base.OnPreRender(e);
}
注意以上代码的不同之处
4．呈现控件客户端脚本的时机
以上介绍了控件呈现客户端脚本的不同方式，然而，控件不应该总是呈现客户端脚本，请求的浏览器可能不支持Ajax功能，如果对所有的浏览器都呈现脚本，那么控件可能不会再所有的浏览器上正常工作。
同时，我们应该能关闭控件的客户端行为，而不考虑请求浏览器的Ajax功能。
4.1 禁用控件的客户端行为
如代码11所示，其包含一个bool属性，以便我们可以关闭控件的客户端行为，当该属性为false时，将不呈现客户端脚本
/// 是否启用客户端脚本
/// </summary>
public bool EnableClientScript
{
get
{
if(ViewState["EnableClientScript"] != null)
{
return (bool)ViewState["EnableClientScript"];
}
else
{
return true;
}
}
set
{
ViewState["EnableClientScript"] = value;
}
}
4.2 检查客户端浏览器是否支持Ajax功能
地定义控件必须包含逻辑，以便检查请求的浏览器Ajax功能是否满足控件需要，在没有显示禁用客户端脚本时，该逻辑才能运行。
Request对象包括一个HttpBrowerCapabilities类型的Brower属性，我们可以用它来检测一下请求的浏览器是否支持Ajax功能。
为确定呈现脚本时机，还必须包括一个私有Bool字段的_renderClientScript.以及一个受保护的虚拟方法DetermineRenderClientScript(或其他名称)，该方法使用EnabelClientScript属性来检查页面开发人员是否禁用客户端行为，如果是，则_renderClientScript为false,并返回。
如果不是，该方法则应用Request对象的Brower属性，来检查请求的浏览器Ajax功能是否符合要求。如果做了这项工作，该方法则将_renderClientScript字段设置为ture，并返回，反之。如代码12所示：
protected virtual void DetermineRenderClientScript()
{
if(!EnableClientScript)
{
_renderClientScript = false;
return;
}
System.Web.HttpBrowserCapabilities browser = Page.Request.Browser;
if(browser.MajorVersion >=4)
{
_renderClientScript = true;
}
}
注意DetermineRenderClientScript方法不负责呈现脚本，他只设置_renderClientScript的值，也就是控件的呈现方法必须首先检查这个私有变量，以后，才能尝试呈现客户端脚本。
由于控件的脚本在包含页面的生命周期的呈现阶段，所以控件必须重写OnPreRender方法来调用DetermineRenderClientScript方法，从而设置_renderClientScript私有字段的值，只有才能进入呈现阶段。如代码13所示：
{
DetermineRenderClientScript();
if(_renderClientScript)
{
Type type = typeof(CustomHyperLinkAttr);
Page.ClientScript.RegisterClientScriptResource(type, "CustomComponents.base.js");
}
base.OnPreRender(e);
}
注： 在读THIN 的<<控件开发-道不远人>>一书的时候，里面也有类此的代码，当初知道其意思是检测是否支持脚本，但是就是不明白其为什么要这样写，到这我才知道其原理。。赫赫
5．呈现控件客户端脚本的位置
根据控件的客户端脚本的呈现方式，可以重写下列方法中的一个或者多个来呈现脚本：
Void OnPreRender()
Void AddAttributesToRender()
Void RenderContents()
Void Render()
选择重写那个方法取决于客户端脚本类型(由控件呈现岛包含页面中的客户端脚本)，下面将对每个方法进行讨论：
5.1 重写OnRreRender
如果要呈现到页面为一个脚本块(位于<script></script>之间的内容)，那么控件必须重写OnPreRender方法以便调用包含页面ClientScript属性的合适方法，请求页面才能为控件呈现该脚本。
5.2 重写AddAttributesToRender方法
如果客户端脚本，要作为控件内部元素的属性值来呈现比如<a>标记的OnMouseOver属性，控件必须重写此方法。
5.3 重写RenderContents方法
如果客户端脚本(该脚本需要由控件呈现到包含页面中)在控件的包含元素的开始和结束标记内呈现，那么控件必须重写此方法，此方法，还必须检查_renderClientScript字段的值，以监测是否应该呈现该脚本。
5.4 重写Render方法
如果控件不是直接或者间接继承自WebControl。或者继承自WebControl但仍然需要重写磁方法，那么控件应该重写Render方法，来呈现该脚本。一般情况下，如果控件直接或间接继承自WebControl ，控件不应该重写Render方法，相反，应该重写AddAttributesToRender方法。
6．退回到服务器端代码
如上所述，开发人员在禁用控件的客户端功能的情况下，控件必须能退回到完全有服务器实现，并不能因为为此，而让控件产生错误(如：弹出Js错误)，想上面的CustomerHyperLink控件，如果禁用客户端功能，该控件就应该成为普通的HyperLink控件，并继续正常工作。
希望这篇文章能够对在控件开发中，不知道怎么呈现Js的用户提供帮助。
参考资料：Asp.Net 2.0 Server Control And Component Development
