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

Posted 2022-07-17 文件

篇首语：一寸光阴一寸金，寸金难买寸光阴。本文由小常识网(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

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

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