『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 服务器组件内嵌图片：自己的图片控件
代码: 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 ...

随机推荐

cocos2d-x之action初试
bool HelloWorld::init() { if ( !Layer::init() ) { return false; } Size visibleSize = Director::getIn ...
ubuntu16.04下opencv安装笔记和例程
问题: 最近重装了系统,需要重新配置opencv2.4.13,配置完成后每次都出现cmake error,google了报错,尝试了各种方法,都未解决问题,于是重新git clone 了opencv2 ...
字符设备驱动——memory编译问题及解决办法
1.fatal error:asm/system.h:No such file or directory #include <linux/version.h> #if LINUX_VERS ...
SQL SERVER 2012 使用订阅发布同步数据库
软件做大了,客户就多了,一个数据库服务器是远远不够的,当有一台数据服务器卦掉,那整个系统就会崩溃,所以必须考虑到数据库的自动同步与备份,当一台数据库服务器宕机,自然就有用一台数据服务器启动起来保证整 ...
android ndk编译x264开源(用于android的ffmpeg中进行软编码)
http://blog.csdn.net/u012917616/article/details/40921833 不废话,直接上.sh脚本: export NDK=/home/xxx/my_softw ...
Codeforces Round #253 Div2 D.Andrey and Problem 概率+贪心
概率计算:P(某set) = 令: 和现在考虑: 1.考虑某个集合,再加一个概率为Pi的朋友后能不能使总概率提高. 即: 由公式可知, 如果 S < 1,则delta > 0,则 ...
RabbitMQ 一二事(3) - 订阅模式（微信公众号模式）的应用
之前讲的消费者互相可以把队列中的消息全部读取,但是不是读完整的所有信息那么采用订阅模式就行,这就是微信公众号的模式, 比如10个人订阅了我的公众号"BeJavaGod",当我发送 ...
Android代码规范----按钮单击事件的四种写法
[前言] 按钮少的时候用第三种的匿名内部类会比较快,比如写demo测试的时候或者登陆界面之类. 按钮多的时候一般选择第四种写法. 一.第一种写法:在XML文件中声明onClick属性(很少用) 在XM ...
CPU相关知识－寄存器与存储器的区别
存储器一般在CPU外,一般指硬盘,U盘等可以在切断电源后保存资料的设备,容量一般比较大,缺点是读写速度都很慢,普通的机械硬盘读写速度一般是 50MB/S左右.内存和寄存器就是为了解决存储器读写速度慢而 ...
Android Handler处理机制 ( 一 )（图+源码分析）——Handler,Message,Looper,MessageQueue
android的消息处理机制(图+源码分析)——Looper,Handler,Message 作为一个大三的预备程序员,我学习android的一大乐趣是可以通过源码学习 google大牛们的设计思想. ...

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

『Asp.Net 组件』Asp.Net 服务器组件 内嵌JS：让自己的控件动起来的更多相关文章

随机推荐

热门专题

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

『Asp.Net 组件』Asp.Net 服务器组件内嵌JS：让自己的控件动起来的更多相关文章