下载 >  开发技术 >  Web开发 > 如何封装JS和CSS文件为服务器端控件---ASP.NET 2.0
5分

如何封装JS和CSS文件为服务器端控件---ASP.NET 2.0

如何封装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", PerformSu bstitution=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类)。 好了,基本上就可以使用了。编译一下呢? ...展开详情收缩
立即下载 开通VIP
分享
收藏 举报

评论 共4条

xulei911122 用到了,不错,赞,谢谢
2015-04-25
回复
hongyestudio 还行,借鉴一下。
2014-08-13
回复
summit_zjm 看的不大明白,谢谢
2014-06-09
回复
js获取asp.net服务器端控件Label,TextBox,RadioButtonList,DropDownList的值

js获取asp.net服务器端控件Label,TextBox,RadioButtonList,DropDownList的值

立即下载
3积分/C币
asp.net 客户端JS调用服务器端方法

使用了AjaxPro.dll 在JS中调用服务器的方法,判断用户名密码是否正确,实现登录验证

立即下载
3积分/C币
ajax 服务器端控件详解

AJAX 服务器端控件详解 针对ASP.NET 2.0以上版本,VS 增加了AJAX有务器端控件

立即下载
0积分/C币
asp.net后台代码动态引用添加JS和css文件

asp.net后台代码动态引用添加JS和css文件

立即下载
3积分/C币
如何使用CSS文件如何使用CSS文件

如何使用CSS文件如何使用CSS文件如何使用CSS文件如何使用CSS文件如何使用CSS文件如何使用CSS文件如何使用CSS文件如何使用CSS文件如何使用CSS文件

立即下载
3积分/C币
bootstrap的switch控件需要引入的js和css文件

bootstrap的switch控件需要引入的js和css文件,自己整理的!

立即下载
2积分/C币
通过js实现的基于ASP.NET实现的输入验证消息面板

通过js实现的基于ASP.NET实现的输入验证消息面板,采用js实现服务器端控件输入验证错误信息提示动态面板。

立即下载
3积分/C币
asp.net日期控件JS

ASP.NET 日期选择 控件 js ASP.NET 日期选择 控件 js

立即下载
3积分/C币
ASP.NET c# 封装常用到的js通用函数

ASP.NET c# 封装常用到的js通用函数ASP.NET c# 封装常用到的js通用函数ASP.NET c# 封装常用到的js通用函数ASP.NET c# 封装常用到的js通用函数ASP.NET c# 封装常用到的js通用函数ASP.NET c# 封装常用到的js通用函数

立即下载
3积分/C币
ASP.NET AJAX框架安装包

ASP.NET AJAX框架安装包,包括ASP.NET 2.0 AJAX Extensions 以及 ASP.NET AJAX Futures CTP 包,在VS2005上安装这两个包后可以获得丰富的服务器端控件。

立即下载
3积分/C币
ASP.net 日期选择控件

ASP.net 日期选择控件,JS控件.

立即下载
3积分/C币
UEditor的asp.net封装控件

百度UEditor控件的asp.net控件封装

立即下载
3积分/C币
C#开发OCX控件,已经ASP.net调用OCX

VS2010程序,有两个程序,一个是如何创建OCX控件,一个是如何在ASP.NET中调用ocx, 适合初学者学习。

立即下载
50积分/C币
ASP.NET 2.0高级控件之FileUpload控件

ASP.NET 2.0高级控件之FileUpload控件

立即下载
3积分/C币
Asp.net 2.0 FileUpload 控件的用法

Asp.net 2.0 FileUpload 控件的用法

立即下载
0积分/C币
ASP.NetCore2.0入门.pdf

ASP.NetCore2.0入门.pdf ASP.NetCore2.0入门.pdf ASP.NetCore2.0入门.pdf ASP.NetCore2.0入门.pdf ASP.NetCore2.0入门.pdf

立即下载
10积分/C币
asp.net 到顶部底部(封装用户控件)

asp.net 到顶部底部(封装用户控件) 已封装好的控件,只需将Scroll.ascx拷贝到项目中,只需简单引用到aspx页面中即可实现到顶部、底部的效果

立即下载
3积分/C币
ASP.NET AJAX Control Toolkit 控件说明

ASP.NET AJAX Control Toolkit 控件说明; ASP.NET AJAX Control Toolkit 34个服务器端扩展控件的说明

立即下载
3积分/C币
FCKeditor控件和控件的使用说明

FCKeditor控件和控件的使用说明,以及如何js判断FCKeditor内容是否为空

立即下载
3积分/C币
JS的DLL封装及调用

将JS脚本封装到DLL中,然后在前台调用。这样做的好处,即可以提高代码的可重用性,又可以提高代码的安全性,防止他人恶意修改。

立即下载
3积分/C币
C# 的第三方控件(打包)

好多外观漂亮功能强大的C#第三方控件 请放心下载 保证物超所值

立即下载
5积分/C币
在ASP.NET 2.0中操作数据:为GridView控件添加Checkboxes列(源码)

在ASP.NET 2.0中操作数据:为GridView控件添加Checkboxes列(源码)

立即下载
3积分/C币
在ASP.NET 2.0中操作数据:为GridView控件添加Checkboxes列

在ASP.NET 2.0中操作数据:为GridView控件添加Checkboxes列

立即下载
3积分/C币
ASP.NET程序设计基础

能让初学者快速掌握理论基础ASP.NET支持三种控件:Web服务器端控件、HTML 服务器端控件和用户自定义控件。 Web服务器端控件是.NET推荐使用的控件,Web服务器端控件除了常用的输入输出控件以外,还包括验证控件。

立即下载
0积分/C币
三级折叠菜单js css文件和图片

jquery 三级折叠菜单js css文件和图片 三级折叠菜单js css文件和图片

立即下载
3积分/C币
r.a.d asp.net 2.0 控件Crack集

r.a.d asp.net 2.0 控件的破解补丁集。

立即下载
3积分/C币
广告控件XML...

广告控件XML,应用与asp.net 2.0 ...

立即下载
3积分/C币
asp.net 2.0 中文简繁体转换控件

asp.net 2.0 中文简繁体转换控件

立即下载
3积分/C币
asp.net Treeview控件2.0与ACCESS数据库.rar

asp.net Treeview控件2.0与ACCESS数据库.rar

立即下载
3积分/C币
FreeTextBox 4.0

ASP.NET 2.0 下FreeTextBox控件,支持Web2.0

立即下载
3积分/C币
关闭
img

spring mvc+mybatis+mysql+maven+bootstrap 整合实现增删查改简单实例.zip

资源所需积分/C币 当前拥有积分 当前拥有C币
5 0 0
点击完成任务获取下载码
输入下载码
为了良好体验,不建议使用迅雷下载
img

如何封装JS和CSS文件为服务器端控件---ASP.NET 2.0

会员到期时间: 剩余下载个数: 剩余C币: 剩余积分:0
为了良好体验,不建议使用迅雷下载
VIP下载
您今日下载次数已达上限(为了良好下载体验及使用,每位用户24小时之内最多可下载20个资源)

积分不足!

资源所需积分/C币 当前拥有积分
您可以选择
开通VIP
4000万
程序员的必选
600万
绿色安全资源
现在开通
立省522元
或者
购买C币兑换积分 C币抽奖
img

资源所需积分/C币 当前拥有积分 当前拥有C币
5 4 45
为了良好体验,不建议使用迅雷下载
确认下载
img

资源所需积分/C币 当前拥有积分 当前拥有C币
5 0 0
为了良好体验,不建议使用迅雷下载
VIP和C币套餐优惠
img

资源所需积分/C币 当前拥有积分 当前拥有C币
5 4 45
您的积分不足,将扣除 10 C币
为了良好体验,不建议使用迅雷下载
确认下载
下载
您还未下载过该资源
无法举报自己的资源

兑换成功

你当前的下载分为234开始下载资源
你还不是VIP会员
开通VIP会员权限,免积分下载
立即开通

你下载资源过于频繁,请输入验证码

您因违反CSDN下载频道规则而被锁定帐户,如有疑问,请联络:webmaster@csdn.net!

举报

若举报审核通过,可返还被扣除的积分

  • 举报人:
  • 被举报人:
  • *类型:
    • *投诉人姓名:
    • *投诉人联系方式:
    • *版权证明:
  • *详细原因: