在创建或修改布局复杂ASP.NET端控件时,大量的时间都是在编译,等待JIT,修改,编译,JIT... 这样一个循环中,而且两个编译常常还很耗费时间。特别地,当控件已集成在页面之中后,在出现一些布局效果上的小偏差,再调整起来将是一个非常无趣和耗时的工作。yrtwx.com 而这时如果能直接修改已输出的html,很可能会更加迅速的找到问题所在。但是不幸的时,通过浏览器Save As出来的html代码显然是不太具有修改价值的。因为本来就只是要进行细微的布局调整,而Save As出来页面新的布局问题可能比本身要解决的问题更加严重。
那么就直接通过View Source把代码copy出来存为html文件呢?这时后我们会发现页面里面所有通过相对路径定位的资源都回丢失,比如什么图片啊,Script啊等等,缺失了这些东西,页面也就同样失去了再调整编辑的价值。www.ycfdi.com
在HTML中,有一个base标签,这个元素似乎只在模态窗口提交页面避免弹出新窗口的时候,有用到过,平时似乎很少有看到网页用这个元素。殊不知这个base在调试html代码时,非常有用。比如你的ASP.NET页面是http://www.chinaitlab.com
我们以封装一个JS的日期控件为列子,将它和的TextBox结合在一起做成一个控件,以达到直接托上去就可以使用的效果。其实很简单,大家共同学习。先看看效果图:www.ahude.com
方法:
首先:一个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 = Calender.; 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文件封装进去,当然如果有图片或者是文件也是一样的。ahude.com
再看
/Index.aspx,而这个Index.aspx中显现有很多通过相对路径引用的图片或Script资源,这时我们通过View Source把它的html代码在本地存为: index.htm文件,只用再在其标签中加入这么一行。我们再打开这个index.htm时,会发现这时和打开http://www.chinaitlab.com/Index.aspx的效果是一样的,所有的图片和脚本都正常被载入,这时候在IE Tool Bar等DOM查看工具帮助下,就可以很方便通过直接修改html来调整页面或控件输出的外观样式,在找到错误后再去端代码中进行修改。ycfdi.com