在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
如何封装JS和CSS文件封装为服务器端控件---ASP.NET 2.0如何封装JS和CSS文件为服务器端控件---ASP.NET 2.0我们以封装一个JS的日期控件为列子,将它和服务器的TextBox结合在一起做成一个服务器控件,以达到直接托上去就可以使用的效果。其实很简单,大家共同学习。先看看效果图: 方法: 首先:下载一个JS的日期组件,带封装。 然后:建一个日期类文件CalendarBox.cs代码如下:
using System;
注意:[assembly: WebResource("Wisesoft.Web.Control.Wisesoft.Calendar.calendar.js", "application/x-javascript", PerformSubstitution=true)]是用来封装你的JS文件,要使用你项目的名字加上你JS文件的名字,还需要将你的JS文件做一点设置,点右件,选择属性--->然后选择高级,选择生成操作-->选择嵌入的资源,这样才能将JS文件封装进去,当然如果有图片或者是CSS文件也是一样的。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 再看 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文件如何封装并写入客户端。 我们可以看见下面有一个方法, } 因此我们就必须建立一个CSS,然后把它设置一下(和JS的设置方式一样)。再到void Page_PreRenderComplete(object sender, EventArgs e)方法调用就可以了,但是还有其他方法,我们来介绍第二种(对JS文件也可以这样使用),建立一个CalendarCSS.cs文件,代码如下:
using System;
这个类其实是将我们的CSS文件,写为一个字符串形式,然后供主函数调用,以注册到客户端使用。using System.Collections.Generic; using System.Text; namespace Wisesoft.Web.Control } 那么我们再看看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类)。 好了,基本上就可以使用了。编译一下呢? 源码:Calendar.rar 如果有什么问题可以给我留言,刚开始写Blog,写的不好的地方请大家原谅哈。谢谢 |
请发表评论