知识大全 如何封装JS和CSS文件为服务器端控件

Posted 文件

篇首语:一寸光阴一寸金,寸金难买寸光阴。本文由小常识网(cha138.com)小编为大家整理,主要介绍了知识大全 如何封装JS和CSS文件为服务器端控件相关的知识,希望对你有一定的参考价值。

如何封装JS和CSS文件为服务器端控件  以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!

  我们以封装一个JS的日期控件为列子 将它和服务器的TextBox结合在一起做成一个服务器控件 以达到直接托上去就可以使用的效果 其实很简单 大家共同学习 先看看效果图   

  

  方法   首先 下载一个JS的日期组件 带封装   然后 建一个日期类文件CalendarBox cs代码如下

     using System;   using System Collections Generic;   using System ComponentModel;   using System Text;   using System Web;   using System Drawing;   using System Web UI;   using System Web UI WebControls;   using System Web UI HtmlControls;      [assembly: WebResource( Wisesoft Web Control Wisesoft Calendar calendar js application/x javascript PerformSubstitution=true)]      namespace Wisesoft Web Control       [ToolboxBitmap(typeof(CalenderBox) Wisesoft Calendar CalendarBox ico )]    public class CalenderBox : TextBox       protected override void OnPreRender(EventArgs e)       string calendar = CalenderCSS CSS;    calendar = calendar Replace( $ImaginURL$ this ImaginURL);    if (!Page ClientScript IsClientScriptBlockRegistered( _calendar ))    Page ClientScript RegisterClientScriptBlock(typeof(string) _calendar calendar);       this Page PreRenderComplete += new EventHandler(Page_PreRenderComplete);    this CssClass = Wdate ;    this Attributes Add( onfocus setday(this) );    this Attributes Add( onchange checkDate(this value) );    base OnPreRender(e);          void Page_PreRenderComplete(object sender EventArgs e)       Page ClientScript RegisterClientScriptResource(this GetType() Wisesoft Web Control Wisesoft Calendar calendar js );          /**//// <summary>    /// 弹出日期控件小图片的地址    /// </summary>    [Bindable(true)]    [Category( 图标设置 )]    [DefaultValue( imagin/calender gif )]    [Localizable(true)]    public string ImaginURL       get       String s = (String)ViewState[ ImaginURL ];    return ((s == null) ? imagin/calender gif : s);       set       ViewState[ ImaginURL ] = value;             /**//// <summary>    /// 设置日期 时间的初始格式    /// </summary>    [Bindable(true)]    [Category( 初始化设置 )]    [DefaultValue(false)]    [Localizable(true)]    public bool ShowTime       get       bool s = (bool)ViewState[ ShowTime ];    if (ViewState[ ShowTime ] != null)       return s;       return false;       set       ViewState[ ShowTime ] = value;                /**//// <summary>    /// 注样式文件    /// </summary>    /// <param name= path ></param>    private void RegisterCssFile(string path)       HtmlLink link = new HtmlLink();    link Attributes[ type ] = text/css ;    link Attributes[ rel ] = stylesheet ;    link Attributes[ href ] = path;    this Page Header Controls Add(link );          

  注意 [assembly: WebResource( Wisesoft Web Control Wisesoft Calendar calendar js application/x javascript PerformSubstitution=true)]是用来封装你的JS文件 要使用你项目的名字加上你JS文件的名字 还需要将你的JS文件做一点设置 点右件 选择属性 >然后选择高级 选择生成操作 >选择嵌入的资源 这样才能将JS文件封装进去 当然如果有图片或者是CSS文件也是一样的   再看

   void Page_PreRenderComplete(object sender EventArgs e)       Page ClientScript RegisterClientScriptResource(this GetType() Wisesoft Web Control Wisesoft Calendar calendar js );      

  是在页面呈现之前将你的JS文件注册到页面上    [Bindable(true)]    [Category( 图标设置 )]    [DefaultValue( imagin/calender gif )]    [Localizable(true)]   是利用反射的元数据信息 来设置属性 就是给你的日期控件旁边加上个小图标 把它做成一个属性 可以让程序员自定义设置图片 也可以把它继承进去   好了 这样就可以把JS文件封装好了 再来看看CSS文件如何封装并写入客户端   我们可以看见下面有一个方法

      /**//// <summary>    /// 注样式文件    /// </summary>    /// <param name= path ></param>    private void RegisterCssFile(string path)       HtmlLink link = new HtmlLink();    link Attributes[ type ] = text/css ;    link Attributes[ rel ] = stylesheet ;    link Attributes[ href ] = path;    this Page Header Controls Add(link );     

  它就是用来注册你的CSS文件的 大家都知道在我们的页面代码里面是<link rel= stylesheet type= text/css />引入外部样式文件 这个方法就是达到这个目的 那么我们现在还没有样式文件   因此我们就必须建立一个CSS 然后把它设置一下(和JS的设置方式一样) 再到void Page_PreRenderComplete(object sender EventArgs e)方法调用就可以了 但是还有其他方法 我们来介绍第二种(对JS文件也可以这样使用) 建立一个CalendarCSS cs文件 代码如下

     using System;   using System Collections Generic;   using System Text;      namespace Wisesoft Web Control       public class CalenderCSS       public static string CSS = @ <style type= text/css >    Wdate    border:# px solid;    height: px;    background:url($ImaginURL$) no repeat right;       WdateFmtErr    font weight:bold;    color:red;       </style> ;       

  这个类其实是将我们的CSS文件 写为一个字符串形式 然后供主函数调用 以注册到客户端使用   那么我们再看看CalendarBox cs文件里的这段代码

     string calendar = CalenderCSS CSS;    calendar = calendar Replace( $ImaginURL$ this ImaginURL);    if (!Page ClientScript IsClientScriptBlockRegistered( _calendar ))    Page ClientScript RegisterClientScriptBlock(typeof(string) _calendar calendar);     它就是将我们已经写好的一段字符串以快的形式注册到客户端(当然还有更多的注册方式 可以在MSDN看看ClientScript类)   好了 基本上就可以使用了 编译一下呢?

cha138/Article/program/net/201311/13968

相关参考

知识大全 WEB控件可以激发服务端事件,请谈谈服务端事件是怎么发生并解释其原理

WEB控件可以激发服务端事件,请谈谈服务端事件是怎么发生并解释其原理?自动传回是什么?为什么要使用  以下文字资料是由(全榜网网www.cha138.com)小编为大家搜

知识大全 js jquery获取随机生成id的服务器控件的3种方法

cha138/Article/program/Java/JSP/201311/20085

知识大全 把jquery 的dialog和ztree结合实现步骤

首先准备好juquryuiztree的js文件和css文件接下来的步骤祥看本文希望对大家有所帮助   第一步先准备好juquryuiztree的js文件和css文件第二步examplejsp

知识大全 JS验证文件大小

JS验证文件大小  以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!  ASPNET中自带的上传控件如果

知识大全 JS和CSS限制页面显示的字符长度

JS和CSS限制页面显示的字符长度  以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!  <nav

知识大全 采用CSS和JS的下拉菜单的制作

采用CSS和JS的下拉菜单的制作  以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!  <scri

知识大全 Java 文件分块上传服务器端源代码

Java文件分块上传服务器端源代码  以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!  直接上代码接收

知识大全 简单介绍CSS结合JS的运用

简单介绍CSS结合JS的运用  以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!  利用CSS配合Jav

知识大全 浅析js封装和作用域

在编写web软件时遇到一些可以共用js的情况于是就想着如何封装js代码基本需求很简单其实就是根据不同的情况封装js代码   基本的代码如下复制代码代码如下:<xmlns="<he

知识大全 JS控制CSS的实现方法

JS控制CSS的实现方法  以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!  在XHTML中如果套嵌的