下载 >  开发技术 >  Web开发 > 如何封装JS和CSS文件为服务器端控件---ASP.NET 2.0
5分

如何封装JS和CSS文件为服务器端控件---ASP.NET 2.0

如何封装JS和CSS文件为服务器端控件---ASP.NET 2.0 我们以封装一个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", PerformSu bstitution=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 link1 = new HtmlLink(); link1.Attributes["type"] = "text/css"; link1.Attributes["rel"] = "stylesheet"; link1.Attributes["href"] = path; this.Page.Header.Controls.Add(link1); } } } 注意:[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 link1 = new HtmlLink(); link1.Attributes["type"] = "text/css"; link1.Attributes["rel"] = "stylesheet"; link1.Attributes["href"] = path; this.Page.Header.Controls.Add(link1); }它就是用来注册你的CSS文件的,大家都知道在我们的页面代码里面是<link href="StyleSheet.css" 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:#999 1px solid; height:18px; 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类)。 好了,基本上就可以使用了。编译一下呢? ...展开详情收缩
立即下载 开通VIP
分享
收藏 举报

评论共有4条

Lovely_Xul 2015-04-25 22:51:42
用到了,不错,赞,谢谢
hongyestudio 2014-08-13 17:19:31
还行,借鉴一下。
summit_zjm 2014-06-09 16:46:31
看的不大明白,谢谢
 

热点文章

VIP会员动态

关闭
img

spring mvc+mybatis+mysql+maven+bootstrap 整合实现增删查改简单实例.zip

资源所需积分/C币 当前拥有积分 当前拥有C币
5 0 0
点击完成任务获取下载码
输入下载码
为了良好体验,不建议使用迅雷下载
img

如何封装JS和CSS文件为服务器端控件---ASP.NET 2.0

会员到期时间: 剩余下载个数: 剩余C币: 剩余积分:0
为了良好体验,不建议使用迅雷下载
VIP下载
您今日下载次数已达上限(为了良好下载体验及使用,每位用户24小时之内最多可下载20个资源)

积分不足!

资源所需积分/C币 当前拥有积分
您可以选择
开通VIP
4000万
程序员的必选
600万
绿色安全资源
现在开通
立省522元
或者
购买C币兑换积分 C币抽奖
img

资源所需积分/C币 当前拥有积分 当前拥有C币
5 4 45
为了良好体验,不建议使用迅雷下载
确认下载
img

资源所需积分/C币 当前拥有积分 当前拥有C币
5 0 0
为了良好体验,不建议使用迅雷下载
VIP和C币套餐优惠
img

资源所需积分/C币 当前拥有积分 当前拥有C币
5 4 45
您的积分不足,将扣除 10 C币
为了良好体验,不建议使用迅雷下载
确认下载
下载
无法举报自己的资源

兑换成功

你当前的下载分为234开始下载资源
你还不是VIP会员
开通VIP会员权限,免积分下载
立即开通

你下载资源过于频繁,请输入验证码

您因违反CSDN下载频道规则而被锁定帐户,如有疑问,请联络:webmaster@csdn.net!

举报

若举报审核通过,可返还被扣除的积分

  • 举报人:
  • 被举报人:
  • *类型:
    • *投诉人姓名:
    • *投诉人联系方式:
    • *版权证明:
  • *详细原因: