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

　　在创建或修改布局复杂ASP.NET端控件时，大量的时间都是在编译，等待JIT，修改，编译，JIT... 这样一个循环中，而且两个编译常常还很耗费时间。特别地，当控件已集成在页面之中后，在出现一些布局效果上的小偏差，再调整起来将是一个非常无趣和耗时的工作。yrtwx.com　　而这时如果能直接修改已输出的html，很可能会更加迅速的找到问题所在。但是不幸的时，通过浏览器Save As出来的html代码显然是不太具有修改价值的。因为本来就只是要进行细微的布局调整，而Save As出来页面新的布局问题可能比本身要解决的问题更加严重。

　　那么就直接通过View Source把代码copy出来存为html文件呢?这时后我们会发现页面里面所有通过相对路径定位的资源都回丢失，比如什么图片啊，Script啊等等，缺失了这些东西，页面也就同样失去了再调整编辑的价值。www.ycfdi.com

　　在HTML中，有一个base标签，这个元素似乎只在模态窗口提交页面避免弹出新窗口的时候，有用到过，平时似乎很少有看到网页用这个元素。殊不知这个base在调试html代码时，非常有用。比如你的ASP.NET页面是http://www.chinaitlab.com

　　我们以封装一个JS的日期控件为列子，将它和的TextBox结合在一起做成一个控件，以达到直接托上去就可以使用的效果。其实很简单，大家共同学习。先看看效果图：www.ahude.com

　　方法：

　　首先：一个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 = Calender.;     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文件封装进去，当然如果有图片或者是文件也是一样的。ahude.com

　　再看

　　/Index.aspx，而这个Index.aspx中显现有很多通过相对路径引用的图片或Script资源，这时我们通过View Source把它的html代码在本地存为: index.htm文件，只用再在其标签中加入这么一行。我们再打开这个index.htm时，会发现这时和打开http://www.chinaitlab.com/Index.aspx的效果是一样的，所有的图片和脚本都正常被载入，这时候在IE Tool Bar等DOM查看工具帮助下，就可以很方便通过直接修改html来调整页面或控件输出的外观样式，在找到错误后再去端代码中进行修改。ycfdi.com