『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 服务器组件 的开发优势和劣势
- 『Asp.Net 组件』第一个 Asp.Net 服务器组件:自己的文本框控件
- 『Asp.Net 组件』Asp.Net 服务器组件 内嵌图片:自己的图片控件
- 『Asp.Net 组件』Asp.Net 服务器组件 内嵌CSS:将CSS封装到程序集中
- 『Asp.Net 组件』Asp.Net 服务器组件 内嵌JS:让自己的控件动起来
- 『Asp.Net 组件』Demo源码在线阅读