|
 |
栏目导栏 |
|
| |
|
|
|
|
|
资料搜索 |
|
| |
|
|
|
|
|
热门文章 |
|
| |
|
|
|
|
|
最新文章 |
|
| |
|
|
|
| |
| |
|
|
|
| |
| 如何封装JS和CSS文件为服务器端控件---ASP.NET 2.0 |
|
我们以封装一个JS的日期控件为列子，将它和服务器的TextBox结合在一起做成一个服务器控件，以达到直接托上去就可以使用的效果。其实很简单，大家共同学习。先看看效果图： t4yLinux联盟
 t4yLinux联盟
方法： t4yLinux联盟
首先：下载一个JS的日期组件，带封装。 t4yLinux联盟
然后：建一个日期类文件CalendarBox.cs代码如下： t4yLinux联盟
using System; t4yLinux联盟
using System.Collections.Generic; t4yLinux联盟
using System.ComponentModel; t4yLinux联盟
using System.Text; t4yLinux联盟
using System.Web; t4yLinux联盟
using System.Drawing; t4yLinux联盟
using System.Web.UI; t4yLinux联盟
using System.Web.UI.WebControls; t4yLinux联盟
using System.Web.UI.HtmlControls; t4yLinux联盟
t4yLinux联盟
[assembly: WebResource("Wisesoft.Web.Control.Wisesoft.Calendar.calendar.js", "application/x-javascript", PerformSubstitution=true)] t4yLinux联盟
t4yLinux联盟
namespace Wisesoft.Web.Control t4yLinux联盟
{ t4yLinux联盟
[ToolboxBitmap(typeof(CalenderBox), "Wisesoft.Calendar.CalendarBox.ico")] t4yLinux联盟
public class CalenderBox : TextBox t4yLinux联盟
{ t4yLinux联盟
protected override void OnPreRender(EventArgs e) t4yLinux联盟
{ t4yLinux联盟
string calendar = CalenderCSS.CSS; t4yLinux联盟
calendar = calendar.Replace("$ImaginURL$", this.ImaginURL); t4yLinux联盟
if (!Page.ClientScript.IsClientScriptBlockRegistered("_calendar")) t4yLinux联盟
Page.ClientScript.RegisterClientScriptBlock(typeof(string), "_calendar", calendar); t4yLinux联盟
t4yLinux联盟
this.Page.PreRenderComplete += new EventHandler(Page_PreRenderComplete); t4yLinux联盟
this.CssClass = "Wdate"; t4yLinux联盟
this.Attributes.Add("onfocus","setday(this)"); t4yLinux联盟
this.Attributes.Add("onchange", "checkDate(this.value)"); t4yLinux联盟
base.OnPreRender(e); t4yLinux联盟
} t4yLinux联盟
t4yLinux联盟
void Page_PreRenderComplete(object sender, EventArgs e) t4yLinux联盟
{ t4yLinux联盟
Page.ClientScript.RegisterClientScriptResource(this.GetType(), "Wisesoft.Web.Control.Wisesoft.Calendar.calendar.js"); t4yLinux联盟
} t4yLinux联盟
t4yLinux联盟
/**//// <summary> t4yLinux联盟
/// 弹出日期控件小图片的地址 t4yLinux联盟
/// </summary> t4yLinux联盟
[Bindable(true)] t4yLinux联盟
[Category("图标设置")] t4yLinux联盟
[DefaultValue("imagin/calender.gif")] t4yLinux联盟
[Localizable(true)] t4yLinux联盟
public string ImaginURL t4yLinux联盟
{ t4yLinux联盟
get t4yLinux联盟
{ t4yLinux联盟
String s = (String)ViewState["ImaginURL"]; t4yLinux联盟
return ((s == null) ? "imagin/calender.gif" : s); t4yLinux联盟
} t4yLinux联盟
set t4yLinux联盟
{ t4yLinux联盟
ViewState["ImaginURL"] = value; t4yLinux联盟
} t4yLinux联盟
} t4yLinux联盟
t4yLinux联盟
/**//// <summary> t4yLinux联盟
/// 设置日期，时间的初始格式。 t4yLinux联盟
/// </summary> t4yLinux联盟
[Bindable(true)] t4yLinux联盟
[Category("初始化设置")] t4yLinux联盟
[DefaultValue(false)] t4yLinux联盟
[Localizable(true)] t4yLinux联盟
public bool ShowTime t4yLinux联盟
{ t4yLinux联盟
get t4yLinux联盟
{ t4yLinux联盟
bool s = (bool)ViewState["ShowTime"]; t4yLinux联盟
if (ViewState["ShowTime"] != null) t4yLinux联盟
{ t4yLinux联盟
return s; t4yLinux联盟
} t4yLinux联盟
return false; t4yLinux联盟
} t4yLinux联盟
set t4yLinux联盟
{ t4yLinux联盟
ViewState["ShowTime"] = value; t4yLinux联盟
} t4yLinux联盟
} t4yLinux联盟
t4yLinux联盟
t4yLinux联盟
/**//// <summary> t4yLinux联盟
/// 注样式文件 t4yLinux联盟
/// </summary> t4yLinux联盟
/// <param name="path"></param> t4yLinux联盟
private void RegisterCssFile(string path) t4yLinux联盟
{ t4yLinux联盟
HtmlLink link1 = new HtmlLink(); t4yLinux联盟
link1.Attributes["type"] = "text/css"; t4yLinux联盟
link1.Attributes["rel"] = "stylesheet"; t4yLinux联盟
link1.Attributes["href"] = path; t4yLinux联盟
this.Page.Header.Controls.Add(link1); t4yLinux联盟
} t4yLinux联盟
} t4yLinux联盟
} t4yLinux联盟
注意：[assembly: WebResource("Wisesoft.Web.Control.Wisesoft.Calendar.calendar.js", "application/x-javascript", PerformSubstitution=true)]是用来封装你的JS文件，要使用你项目的名字加上你JS文件的名字，还需要将你的JS文件做一点设置，点右件，选择属性--->然后选择高级，选择生成操作-->选择嵌入的资源，这样才能将JS文件封装进去，当然如果有图片或者是CSS文件也是一样的。 t4yLinux联盟
再看 void Page_PreRenderComplete(object sender, EventArgs e) t4yLinux联盟
{ t4yLinux联盟
Page.ClientScript.RegisterClientScriptResource(this.GetType(), "Wisesoft.Web.Control.Wisesoft.Calendar.calendar.js"); t4yLinux联盟
} t4yLinux联盟
是在页面呈现之前将你的JS文件注册到页面上。 t4yLinux联盟
[Bindable(true)] t4yLinux联盟
[Category("图标设置")] t4yLinux联盟
[DefaultValue("imagin/calender.gif")] t4yLinux联盟
[Localizable(true)] t4yLinux联盟
是利用反射的元数据信息，来设置属性。就是给你的日期控件旁边加上个小图标，把它做成一个属性，可以让程序员自定义设置图片，也可以把它继承进去。 t4yLinux联盟
好了，这样就可以把JS文件封装好了，再来看看CSS文件如何封装并写入客户端。 t4yLinux联盟
我们可以看见下面有一个方法， t4yLinux联盟
t4yLinux联盟
/**//// <summary> t4yLinux联盟
/// 注样式文件 t4yLinux联盟
/// </summary> t4yLinux联盟
/// <param name="path"></param> t4yLinux联盟
private void RegisterCssFile(string path) t4yLinux联盟
{ t4yLinux联盟
HtmlLink link1 = new HtmlLink(); t4yLinux联盟
link1.Attributes["type"] = "text/css"; t4yLinux联盟
link1.Attributes["rel"] = "stylesheet"; t4yLinux联盟
link1.Attributes["href"] = path; t4yLinux联盟
this.Page.Header.Controls.Add(link1); t4yLinux联盟
}它就是用来注册你的CSS文件的，大家都知道在我们的页面代码里面是<link href="StyleSheet.css" rel="stylesheet" type="text/css" />引入外部样式文件。这个方法就是达到这个目的。那么我们现在还没有样式文件。 t4yLinux联盟
因此我们就必须建立一个CSS，然后把它设置一下（和JS的设置方式一样）。再到void Page_PreRenderComplete(object sender, EventArgs e)方法调用就可以了，但是还有其他方法，我们来介绍第二种（对JS文件也可以这样使用），建立一个CalendarCSS.cs文件，代码如下： t4yLinux联盟
using System; t4yLinux联盟
using System.Collections.Generic; t4yLinux联盟
using System.Text; t4yLinux联盟
t4yLinux联盟
namespace Wisesoft.Web.Control t4yLinux联盟
{ t4yLinux联盟
public class CalenderCSS t4yLinux联盟
{ t4yLinux联盟
public static string CSS = @"<style type=""text/css""> t4yLinux联盟
.Wdate{ t4yLinux联盟
border:#999 1px solid; t4yLinux联盟
height:18px; t4yLinux联盟
background:url($ImaginURL$) no-repeat right; t4yLinux联盟
} t4yLinux联盟
.WdateFmtErr{ t4yLinux联盟
font-weight:bold; t4yLinux联盟
color:red; t4yLinux联盟
} t4yLinux联盟
</style>"; t4yLinux联盟
} t4yLinux联盟
}这个类其实是将我们的CSS文件，写为一个字符串形式，然后供主函数调用，以注册到客户端使用。 t4yLinux联盟
那么我们再看看CalendarBox.cs文件里的这段代码 t4yLinux联盟
string calendar = CalenderCSS.CSS; t4yLinux联盟
calendar = calendar.Replace("$ImaginURL$", this.ImaginURL); t4yLinux联盟
if (!Page.ClientScript.IsClientScriptBlockRegistered("_calendar")) t4yLinux联盟
Page.ClientScript.RegisterClientScriptBlock(typeof(string), "_calendar", calendar); t4yLinux联盟
它就是将我们已经写好的一段字符串以快的形式注册到客户端（当然还有更多的注册方式，可以在MSDN看看ClientScript类）。 t4yLinux联盟
好了，基本上就可以使用了。编译一下呢？ t4yLinux联盟
源码：Calendar.rar t4yLinux联盟
http://www.cnblogs.com/Files/wcp066/Calendar.rar t4yLinux联盟
如果有什么问题可以给我留言，刚开始写Blog，写的不好的地方请大家原谅哈。
Linux联盟收集整理 ,转贴请标明原始链接,如有任何疑问欢迎来本站Linux论坛讨论 |
|
|
|
|
|
