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


我们以封装一个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);
   }
   } 
   } 

本文作者:
« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3