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

如何封装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类)。
好了,基本上就可以使用了。编译一下呢?                        
...展开收缩
综合评分:5
开通VIP 立即下载

评论共有4条

Lovely_Xul 2015-04-25 22:51:42
用到了,不错,赞,谢谢
hongyestudio 2014-08-13 17:19:31
还行,借鉴一下。
summit_zjm 2014-06-09 16:46:31
看的不大明白,谢谢
 
js获取asp.net服务器端控件Label,TextBox,RadioButtonList,DropDownList的值 立即下载
积分/C币:3
asp.net后台代码动态引用添加JS和css文件 立即下载
积分/C币:3
ajax 服务器端控件详解 立即下载
积分/C币:0
如何使用CSS文件如何使用CSS文件 立即下载
积分/C币:3
通过js实现的基于ASP.NET实现的输入验证消息面板 立即下载
积分/C币:3
ASP.NET c# 封装常用到的js通用函数 立即下载
积分/C币:3
asp.net日期控件JS 立即下载
积分/C币:3
ASP.NET AJAX框架安装包 立即下载
积分/C币:3
ASP.net 日期选择控件 立即下载
积分/C币:3
UEditor的asp.net封装控件 立即下载
积分/C币:3

热点文章

VIP会员动态

推荐下载

ASP.NET 2.0经典教程
3C币 318下载
ASP.NET 2.0技术内幕
3C币 19下载
asp.net 2.0下载
3C币 421下载
asp.net core 2.0
2C币 170下载
编辑器 asp.net 2.0
3C币 56下载
关闭
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
img

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

兑换成功

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

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

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

举报

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

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