首页 > 资讯列表 > 编程/数据库 >> ASP/.NET

如何封装JS和CSS文件为服务器端控件

ASP/.NET 2011-06-28 12:06:14 转载来源: AS网站目录整理

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

我们以封装一个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 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=http://www.chinahtml.com/0707/"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类)。
  好了,基本上就可以使用了。编译一下呢?

标签: 如何 封装 JS CSS 文件 服务器 控件


声明:本文内容来源自网络,文字、图片等素材版权属于原作者,平台转载素材出于传递更多信息,文章内容仅供参考与学习,切勿作为商业目的使用。如果侵害了您的合法权益,请您及时与我们联系,我们会在第一时间进行处理!我们尊重版权,也致力于保护版权,站搜网感谢您的分享!

站长搜索

http://www.adminso.com

Copyright @ 2007~2024 All Rights Reserved.

Powered By 站长搜索

打开手机扫描上面的二维码打开手机版


使用手机软件扫描微信二维码

关注我们可获取更多热点资讯

站长搜索目录系统技术支持