js文件 引用服务器控件,如何封装JS和CSS文件为服务器端控件

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

翻译|其它|编辑：郝浩|2008-05-26 11:51:46.000|阅读 1204 次

概述：

我们以封装一个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="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类)。

标签：

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至hey@evget.com

文章转载自：博客