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

随机推荐

MongoDB学习笔记——MongoDB 连接配置
MongoDB连接标准格式: mongodb://[username:password@]host1[:port1][,host2[:port2],...[,hostN[:portN]]][/[dat ...
nginx 做负载均衡
最近正在研究Nginx,Nginx作为反向代理服务器,可以对Web服务器提供加速,并且具有负载均衡的功能. 首先我要在官网下载Nginx(http://nginx.org/en/download.ht ...
转载的vim配置文件
""""""""""""""""&quo ...
c++ initialize_list
看到这么一个东西,可以实现花括号( "{" "}" )初始化容器类. 使用时需包含头文件 #include <initialize_list> 我们 ...
Oracle Jdbc demo
两种方式: thin是一种瘦客户端的连接方式,即采用这种连接方式不需要安装oracle客户端,只要求classpath中包含jdbc驱动的jar包就行.thin就是纯粹用Java写的ORACLE数据库 ...
css shorthand属性简写
一.什么是shorthand 属性简写(shorthand)就是一次性声明一组相关的属性.好处呢当然是众所周知的,让css从臃肿无序升级为简洁有效具有高可读性. 大多数的人都使用属性简写,我也用,但是 ...
JAVASE笔记回顾
第一部分,JAVA基础和面向对象 part01 入门与开发环境搭建 1: 计算机基础知识(了解)(1)计算机(2)计算机硬件(3)计算机软件系统软件:windows,linux,mac应用软件:QQ, ...
VS 扩展推荐
Visual Studio 工欲善其事,必先利器.本着这样的观念,对于经常使用的工具,我喜欢去研究研究,帮助我提高效率. Visual Studio Microsoft Visual Studio(简 ...
Fitnesse初体验
FitNesse是一套软件开发协作工具 FitNesse是帮助大家加强软件开发过程中的协作的工具.能够让客户.测试人员和开发人员了解软件要做成什么样,帮助建议软件最终是否达到了设计初衷. 什么是Fit ...
Eclipse c++头文件问题（未完）
http://stackoverflow.com/questions/7905025/string-could-not-resolved-error-in-eclipse-for-c-eclipse- ...

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

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

随机推荐

热门专题

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

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