『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源码在线阅读
『Asp.Net 组件』Asp.Net 服务器组件 内嵌JS：让自己的控件动起来的更多相关文章
- 『Asp.Net 组件』Asp.Net 服务器组件 内嵌图片：自己的图片控件
代码: using System; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace ...
- 『Asp.Net 组件』Asp.Net 服务器组件 的开发优势和劣势
在写<Asp.Net 服务器组件系列文档>之前,笔者不才,揣测微软战略用意: 微软利益诉求莫过于 微软产品和技术的市场份额: 因此,微软战略之一莫过于将 所有开发人员 团聚在 微软周围,以 ...
- Spring Boot 揭秘与实战（五） 服务器篇 - 内嵌的服务器 Tomcat剖析
文章目录 1. 内嵌的 Tomcat,一个Jar包运行 2. 如何定制内嵌 Tomcat3. War 包部署的使用细节 2.1. 设置内嵌Tomcat的端口 2.2. 设置内嵌Tomcat的最大线程数 ...
- 『Asp.Net 组件』Asp.Net 服务器组件 内嵌CSS：将CSS封装到程序集中
代码: <span style="font-family:Microsoft YaHei; font-size:12px">using System; using Sy ...
- asp.net 简单实现禁用或启用页面中的某一类型的控件
我们在提交一个表单的时候,可能由于网络或服务器的原因,处理很慢,而用户在处理结果出来之前反复点击按钮提交.这样很容易造成不必要的麻烦甚至是错误.说了这么多,其实就是要实现一个禁用某些控件的一种功能.好 ...
- 可以创建专业的客户端/服务器视频会议应用程序的音频和视频控件LEADTOOLS Video Conferencing SDK
LEADTOOLS Video Streaming Module控件为您创建一个自定义的视频会议应用程序和工具提供所有需要的功能.软件开发人员可以使用Video Streaming Module SD ...
- Vue3组件（九）Vue + element-Plus + json = 动态渲染的表单控件
一个成熟的表单 表单表单,你已经长大了,你要学会: 动态渲染 支持单列.双列.多列 支持调整布局 支持表单验证 支持调整排列(显示)顺序 依据组件值显示需要的组件 支持 item 扩展组件 可以自动创 ...
- Asp.Net 之 js/jquery获取服务器端控件
由于ASP.NET网页运行后,服务器控件会随机生成客户端id,jquery获取时候不太好操作,总结有以下3种方法:服务器控件代码:<asp:TextBox ID="txtUserID& ...
- [asp.net] 通过JS实现对treeview控件的复选框单选控制。
前端JS代码: //识别不同的浏览器 function getTargetElement(evt) { var elem if (evt.target) { elem = (evt.target.no ...
随机推荐
- SiteMesh, SpringMVC, Shiro 配置
1. 首先在在web.xml文件中,加入SiteMesh和shiro的过滤器,保证SiteMesh的过滤器配置放在shiro的过滤器后面,不然的话,shiro的标签不能正确处理. <?xml v ...
- HTML5 自定义属性 data-* 和 jQuery.data 详解
新的HTML5标准允许你在普通的元素标签里,嵌入类似data-*的属性,来实现一些简单数据的存取.它的数量不受限制,并且也能由javascript动态修改,也支持CSS选择器进行样式设置.这使得dat ...
- hibernate查询方式
hibernate查询方式:1.本地SQL查询 2.HQL查询 3.QBC查询 HQL查询:是面向对象的查询语言,是使用最广的一种查询方法 QBC查询:Query by Criteria是一套接口来实 ...
- Tomcat如何添加管理员
为Tomcat添加管理员,然后用管理员登录后就可以看到所有加载的工程包,以及运行的平台,还可以对项目进行管理,比如删和添加. 一.工具:apache-tomcat-7.0.39 二.添加步骤 1. 首 ...
- 【VB超简单入门】二、知识准备
在开始编程之前,需要先熟悉一下各种操作和术语,以后学习编程才能得心应手. 首先最重要的操作当然就是-电脑的开机关机啦~(开个玩笑哈哈),必须掌握软件的安装和卸载,还有能编写批处理程序对平时的使用也是很 ...
- Jenkins插件hyper slaves源码分析
1.public class HyperSlaves extends Plugin implements Describable<HyperSlaves> (1).init():初始化co ...
- 记忆化搜索 codevs 2241 排序二叉树
codevs 2241 排序二叉树 ★ 输入文件:bstree.in 输出文件:bstree.out 简单对比时间限制:1 s 内存限制:128 MB [问题描述] 一个边长为n的正三 ...
- 如何用ZBrush雕刻出栩栩如生的头发（一）
之前的ZBrush教程我们学习了使用SubTool为模型添加了头发效果,本讲对模型头发雕刻技巧和细节进行调整.文章内容仅以fisker老师讲述为例,您也可以按照自己的想法,跟着老师的步调进行创作,发挥 ...
- 【实践】获取CKEditor的html文本、纯文本、被选中的内容及赋值
<%=Html.TextAreaFor(Model => Model.WORK_INTRODUCTION)%> <script type="text/javasc ...
- HDU 1878 欧拉回路
并查集水题. 一个图存在欧拉回路的判断条件: 无向图存在欧拉回路的充要条件 一个无向图存在欧拉回路,当且仅当该图所有顶点度数都是偶数且该图是连通图. 有向图存在欧拉回路的充要条件 一个有向图存在欧拉回 ...