『Asp.Net 组件』Asp.Net 服务器组件内嵌JS：让自己的控件动起来

代码：

using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace DemoWebControl
{
    /// <summary>
    /// 自己的Asp.Net服务器组件 一个DIV控件：拖拽控件之后，自动输出 需要的 Js到界面
    /// </summary>
    public class DemoJsCtrl : WebControl
    {
        protected bool IsDesignMode
        {
            get { return DesignMode || HttpContext.Current == null || Page == null; }
        }
        public string Text { get; set; }
        protected override void OnPreRender(EventArgs e)
        {
            base.OnPreRender(e);

            //输出 JS 到 HTML文件中
            if (!IsDesignMode)
            {

                #region  注册程序集中的 Js文件 到页面

                string jsUrl = Page.ClientScript.GetWebResourceUrl(GetType(), 
                    "DemoWebControl.Resources.DemoJs01.js");

                ////方法01：注册指定 Js-Url 到页面 （可以注册 非程序集 的Js文件）
                //Page.ClientScript.RegisterClientScriptInclude(
                //"JsKeyFor_DemoWebControl.Resources.DemoJs01", jsUrl);

                ////方法02：注册程序集中的 资源文件名称对应的文件 到页面 （和 方法01 一摸一样）
                //Page.ClientScript.RegisterClientScriptResource(GetType(), 
                //"DemoWebControl.Resources.DemoJs01.js");

                //方法03：（方法01 方法02 注册的 Js 都不在 Head中，为了标准一点 可以用本方法）
                HtmlScriptLink linkJs = new HtmlScriptLink();
                linkJs.Attributes.Add("src", jsUrl);
                Page.Header.Controls.Add(linkJs);

                //其实，理论上讲：Js文件在页面的哪个地方 都无所谓，关键是在 调用代码之前。
                //HtmlScriptLink 是 模仿 微软 HtmlLink 所写，不具备相同Js文件去重的功能：
                //也就是说可能造成资源浪费，等待后期优化调整。

                #endregion

                #region  注册一段调用 Js文件 的 Js代码 到页面

                string initScript = "<script language="javascript" type="text/javascript">" +
                                    "$(function () { var temp" + ClientID + 
                                    " = new DemoJsCtrl("" + ClientID + ""); });</script>";
                Page.ClientScript.RegisterStartupScript(GetType(), "DemoJsCtrl_" + ClientID, initScript);

                #endregion

            }
        }
        //两个 嵌套的 DIV，内嵌CSS资源文件，拖拽控件即可实现 HTML 和 CSS文件 都输出到页面
        protected override void Render(HtmlTextWriter output)
        {
            output.Write("<div id="" + ClientID + "" name="" + 
                ClientID + "" class="" + CssClass + "">" + Text + "</div>");
        }
    }

}

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DemoJsPage.aspx.cs" 
Inherits="AspNetDemo.DemoJsPage" %>
<%@ Register assembly="DemoWebControl" namespace="DemoWebControl" tagprefix="Demo" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .Demo{ border: 5px solid RED;background-color: Blue; float: inherit; 
               width:140px; height:80px; margin: 35px 30px 35px 30px;color: White;
               font-family: 微软雅黑; text-align: center;  }
    </style>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    
</head>
<body>
    <form id="form1" runat="server">
    <div>
        
        <Demo:DemoJsCtrl ID="DemoJs1" CssClass="Demo" Text="点击我变颜色" runat="server" />

    </div>
    </form>
</body>
</html>

嵌入资源：

嵌入JS代码：

function DemoJsCtrl(ctrlId) {
    function GetRandomColor() {
        return "#" + GetRandomHex() + GetRandomHex() + GetRandomHex() + 
            GetRandomHex() + GetRandomHex() + GetRandomHex();
    }
    function GetRandomHex() {
        var intValue = parseInt(Math.random() * 16);
        var hexValue = intValue.toString(16);
        return hexValue;
    }

    $("#" + ctrlId).click(function () {
        var color = GetRandomColor();
        $(this).css("background-color", color);
    });
}

运行截图：

相关技术点：

将一个JS资源内嵌到程序集中，需要设置文件VS属性（生成操作：签入的资源）；
程序集项目 AssemblyInfo.cs 中需要加入如下代码（其中 WebResource 包括资源名称，资源类型）：

// 可以指定所有这些值，也可以使用“内部版本号”和“修订号”的默认值，
// 方法是按如下所示使用“*”:
// [assembly: AssemblyVersion("1.0.*")]
[assembly: AssemblyVersion("1.0.0.0")]
[assembly: AssemblyFileVersion("1.0.0.0")]

//此标识 可以让 拖拽的控件 自动以 Demo 作为 tagprefix 属性，比如：
//<%@ Register assembly="DemoWebControl" namespace="DemoWebControl" tagprefix="Demo" %>
[assembly: TagPrefix("DemoWebControl", "Demo")]

[assembly: WebResource("DemoWebControl.Resources.DemoImage01.jpg", "image/jpeg")]
[assembly: WebResource("DemoWebControl.Resources.DemoImage02.jpg", "image/jpeg")]
[assembly: WebResource("DemoWebControl.Resources.DemoImage03.jpg", "image/jpeg")]

[assembly: WebResource("DemoWebControl.Resources.DemoCss01.css", "text/css")]
[assembly: WebResource("DemoWebControl.Resources.DemoJs01.js", "text/javascript")]

获取程序集中的内嵌文件的 Url代码是：Page.ClientScript.GetWebResourceUrl(GetType(), @"资源名称");
将JS文件设置到 HTML的链接到头部：

protected override void OnPreRender(EventArgs e)
{
     base.OnPreRender(e);
 
     //输出 JS 到 HTML文件中
     if (!IsDesignMode)
     {
           #region  注册程序集中的 Js文件 到页面
string jsUrl = Page.ClientScript.GetWebResourceUrl(GetType(),
                    "DemoWebControl.Resources.DemoJs01.js");
 
           ////方法01：注册指定 Js-Url 到页面 （可以注册 非程序集 的Js文件）
           //Page.ClientScript.RegisterClientScriptInclude(
           //"JsKeyFor_DemoWebControl.Resources.DemoJs01", jsUrl);
 
           ////方法02：注册程序集中的 资源文件名称对应的文件 到页面 （和 方法01 一摸一样）
           //Page.ClientScript.RegisterClientScriptResource(GetType(),
           //"DemoWebControl.Resources.DemoJs01.js");
 
           //方法03：（方法01 方法02 注册的 Js 都不在 Head中，为了标准一点 可以用本方法）
           HtmlScriptLink linkJs = new HtmlScriptLink();
           linkJs.Attributes.Add("src", jsUrl);
           Page.Header.Controls.Add(linkJs);
 
           //其实，理论上讲：Js文件在页面的哪个地方 都无所谓，关键是在 调用代码之前。
           // HtmlScriptLink 是 模仿 微软 HtmlLink 所写，不具备相同Js文件去重的功能：
           //也就是说可能造成资源浪费，等待后期优化调整。
          #endregion
 
          #region  注册一段调用 Js文件 的 Js代码 到页面
 
          string initScript = "<script language="javascript" type="text/javascript">" +
                                    "$(function () { var temp" + ClientID +
                                    " = new DemoJsCtrl("" + ClientID + ""); });</script>";
          Page.ClientScript.RegisterStartupScript(GetType(), "DemoJsCtrl_" + ClientID, initScript);
 
          #endregion
     }
}

相关系列文章链接：

『Asp.Net 组件』Asp.Net 服务器组件 内嵌JS：让自己的控件动起来

『Asp.Net 组件』Asp.Net 服务器组件内嵌JS：让自己的控件动起来