如何封装JS和CSS文件封装为服务器端控件---ASP.NET 2.0
来源:互联网 发布:网站编程培训班招生 编辑:程序博客网 时间:2024/06/03 16:41
如何封装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", 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文件也是一样的。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);
}
}
}
再看 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,然后把它设置一下(和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文件,写为一个字符串形式,然后供主函数调用,以注册到客户端使用。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>";
}
}
那么我们再看看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类)。
好了,基本上就可以使用了。编译一下呢?
源码:http://dl2.csdn.net/down4/20070729/29192430803.rar
- 如何封装JS和CSS文件封装为服务器端控件---ASP.NET 2.0
- 如何封装JS和CSS文件封装为服务器端控件---ASP.NET 2.0
- 如何封装JS和CSS文件为服务器端控件---ASP.NET 2.0
- 如何封装JS和CSS文件为服务器端控件
- 如何封装JS和CSS文件为服务器端控件
- 如何封装JS和CSS文件为服务器端控件
- 如何封装JS和CSS文件为服务器端控件
- JS文件中获取asp.net服务器端控件ID
- JS文件中获取asp.net服务器端控件ID
- ASP.NET将JS文件封装成DLL
- 使用 ASP.NET 控件封装 Silverlight
- JS获取Asp.Net服务器端控件ID
- VS.net封装asp为Dll
- 为服务器端控件添加js.net
- js控制asp.net服务器端控件textbox设置为多行时输入字符长度
- js控制asp.net服务器端控件textbox设置为多行时输入字符长度
- ASP.NET 封装JS文件到DLL中并在页面中调用
- 如何理解JS中的封装和继承?
- Generic Programming - What are you, anyway?
- C#模拟QQ截屏功能
- 自定义SiteMapProvider实现从SQL Server中读取站点地图数据结构
- Zend_Controller_Front->dispatch 注解
- 重大观念转变:知识营销(转载)
- 如何封装JS和CSS文件封装为服务器端控件---ASP.NET 2.0
- Struts2.0里权限验证过滤器的设置(web.xml)
- 一些web开发中常用的、做成cs文件的js代码
- j2me 点滴 - 1 (资料)
- test
- 大智慧公式编写教程
- 有这样一个朋友
- 如何获得刚才新增的Id---hibernate--java--j2ee--[完美方法]
- 调用其他程序