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

夜鹰教程网-程序员的加油站

·设为首页·加入收藏

本站首页技术文章全套前端云课堂智慧校园

你好，欢迎来到夜鹰网！【去购买教程】

当前位置：文章中心 >> vs2022_vs2019_vs2017_vs2014_vs2012

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

夜鹰教程网来源：www.yyjcw.com 日期：2016-11-23 18:26:05

我们以封装一个JS的日期控件为列子，将它和服务器的TextBox结合在一起做成一个服务器控件，以达到直接托上去就可以使用的效果。其实很简单，大家共同学习。

我们以封装一个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类）。好了，基本上就可以使用了。编译一下呢？

复制链接网友评论收藏本文关闭此页

上一条： Visual Studio 2012可扩展的组件、… 下一条： ASP.NET MVC开发实践教程【ViewEngine …

夜鹰教程网成立于2008年，目前已经运营了将近 13 年，发布了大量关于 html5/css3/C#/asp.net/java/python/nodejs/mongodb/sql server/android/javascript/mysql/mvc/easyui/vue/echarts原创教程。我们一直都在坚持的是：认证负责、一丝不苟、以工匠的精神来打磨每一套教程，让读者感受到作者的用心。我们默默投入的时间，确保每一套教程都是一件作品，而不是呆板的文字和视频！目前我们推出在线辅导班试运营，模式为一对一辅导，教学工具为QQ。我们的辅导学科包括 java 、android原生开发、webapp开发、商城开发、C#和asp.net开发，winform和物联网开发、web前端开发，但不仅限于此。普通班针对的是国内学员，例如想打好基础的大学生、想转行的有志青年、想深入学习的程序员、想开发软件的初学者或者业余爱好者等。就业办针对即将毕业上岗的大四学生，或者打算转行的初级开发工程师。留学生班针对的是在欧美、加拿大、澳洲、日本、韩国、新加坡等地留学的中国学子，目的是让大家熟练地掌握编程技能，按时完成老师布置的作业，并能顺利地通过考试。详细咨询QQ：1416759661 夜鹰教程网