『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 ...

随机推荐

【nginx】配置文件的优化
1.编译安装过程优化在编译Nginx时,默认以debug模式进行,而在debug模式下会插入很多跟踪和ASSERT之类的信息,编译完成后,一个Nginx要有好几兆字节.在编译前取消Nginx的deb ...
读书笔记——Windows环境下32位汇编语言程序设计（3）求复数模的子程序
3.6.1.1中的例子 _Calc proc _dwX,_dwY local @dwResult finit fild _dwX fld st(0) fmul ;i*i fild _dwY fld s ...
如何解决mysql stop fail的问题
最近在学习mysql,碰到了一个mysql stop fail的问题,在这里把碰到的问题以及解决的过程写出来,不是这个问题有多难,而是我在解决此问题的过程中没有发现一个行之有效的解决问题的中文网页,搞 ...
linux命令详解之挂载光驱的方法
linux的硬件设备在/dev目录下,光驱也是其中./dev/cdrom表示光驱,挂载光驱的方法如下(以root身份): 代码如下: mkdir /mnt/cdrommount -t auto - ...
通过beego快速创建一个Restful风格API项目及API文档自动化
通过beego快速创建一个Restful风格API项目及API文档自动化本文演示如何快速(一分钟内,不写一行代码)的根据数据库及表创建一个Restful风格的API项目,及提供便于在线测试API的界 ...
Linux dsh
一.简介目前在企业网络中越来越多的出现Linux服务器,而如何方便高效的管理大量的Linux服务器是系统管理员非常关心的一个问题,而dsh正是一个通过命令行有效地管理大量Linux的工具. 二. ...
java charset detector
https://code.google.com/p/juniversalchardet/downloads/list java移植mozilla的编码自动检测库(源码为c++),准确率高. 通过svn ...
Zabbix监控windows部署安装
Zabbix agent 在windows上安装部署 1. 下载与解压地址: http://www.zabbix.com/downloads/2.4.0/zabbix_agents_2.4.0.w ...
POJ 2891 Strange Way to Express Integers【扩展欧几里德】【模线性方程组】
求解方程组 X%m1=r1 X%m2=r2 .... X%mn=rn 首先看下两个式子的情况 X%m1=r1 X%m2=r2 联立可得 m1*x+m2*y=r2-r1 用ex_gcd求得一个特解x' ...
[推荐]看图/图片管理软件XnViewMP
软件授权:免费 (希望你可以支持开发者) 软件官网:http://www.xnview.com/en/xnviewmp/ 软件简介: XnView MP 是一款非常著名的免费看图软件XnView 的新 ...

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

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

随机推荐

热门专题

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

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