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

随机推荐

cxf数据压缩
一.HTTP数据的压缩在http协议中当content-encoding对应的值为gzip,deflate,x-gzip,x-deflate时,数据是经过了压缩之后再进行传输的.有些时候我们当我们传 ...
iOS网络编程--NSConnection的同步连接与异步连接
// // ZFViewController.m // 0628-表单验证 // // Created by zfan on 14-6-28. // Copyright (c) 2014年 zfan. ...
phpcmsv9 标题颜色显示问题
在解决标题颜色问题之前首先要注意到标题字段为title,副标题为fu_title. 如果一个文章想在首页推荐,又想在栏目首页推荐,并且这两个推荐位置的标题长度不一样,那只能用副标题区别,这样就可以在 ...
Oracle PLSQL
Oracle :show explain plan select * from table(dbms_xplan.display); EXPLAIN PLAN FOR statements In fa ...
Mathout
1. 用Maven搭建Mahout的开发环境,并完成PPT 26页,最简单的例子.要求有过程说明和截图. 2. 用案例的数据集,基于Mahout,任选一种算法,对任意一个女性用户进行协同过滤推荐,并解 ...
uva 725 division（水题）——yhx
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAABVMAAAOHCAIAAAClwESxAAAgAElEQVR4nOydybGturJFcQEPfgQu4A
搜索+剪枝 POJ 1416 Shredding Company
POJ 1416 Shredding Company Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 5231 Accep ...
Head First HTML5 Programming 读书笔记
1:HTML5引入了简单化的标记,新的语义和媒体元素,另外要依赖于一组支持web应用的js库. 2:关于js 对象是属性的结合 window对象是全局变量. document对象是window的一个属 ...
css3的媒体查询(Media Queries)
我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. 先看一个简单的例子: <link rel="stylesheet" media="scr ...
第2章面向对象的设计原则（SOLID）：2_里氏替换原则（LSP）
2. 里氏替换原则(Liskov Substitution Principle,LSP) 2.1 定义 (1)所有使用基类的地方必须能透明地使用子类替换,而程序的行为没有任何变化(不会产生运行结果错误 ...

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

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

随机推荐

热门专题

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

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