上一篇我们讲了VitwState保存控件状态，此章我们来讲讲嵌入css文件，js文件，嵌入Image文件我也一笔带过.
随着我的控件的完善，我们目标控件DropDwonCheckList最终一定会呈现很多的Html代码，我们虽然可以用C#控制样式，但代价太大，维护起来困难，复用用性低，而且样式也会随着控件的呈现而被呈现出来，没有达到真正的封装。通过学习本章内容，大家可以做一个实验，看看如果没有使用嵌入样式表的方法，呈现的HTML代码。
嵌入资源分三个步骤走：
1.在XYB.Controls层新建一个文件夹，命名为CSS文件夹，再新建dropDwon.css样式文件，将dropDwon.css样式文件属性设为嵌入资源。
2.修改AssemblyInfo.cs文件，在里面添加下面一行代码
[assembly:System.Web.UI.WebResource("XYB.Controls.CSS.dropDwon.css","text/css")]
XYB.Controls是我的命名空间，CSS是我的文件夹名称,dropDwon.css是文件名，也就是命名空间+文件夹+文件名，如果没有文件夹，就不用写文件夹名称了，"text/css"，是MIME类型，如果不知道MIME类型的，上网百度一下，这个不在我们的讨论范围内。
3.程序中加载使用，我们在重写OnPreRender方法（预呈现，在Render之前发生）里面写点代码，加载嵌入css文件
protected override void OnPreRender(EventArgs e) { //如果文件已经被加载了，就不用重复加载 if (this.Page.Header.FindControl("XYB_Controls_dropDwonCss")==null) { //加载嵌入资源.css文件 string cssHref = this.Page.ClientScript.GetWebResourceUrl(this.GetType(),"XYB.Controls.CSS.dropDwon.css"); string cssLink = string.Format("<link href='{0}' rel='stylesheet' type='text/css' />", cssHref); LiteralControl litLink = new LiteralControl(cssLink); litLink.ID = "XYB_Controls_dropDwonCss"; this.Page.Header.Controls.Add(litLink); } base.OnPreRender(e); }
现在我们再把修改Render方法，其实就是注释掉了pnlDropDown.Style["border"] = "1px solid #ccc"
protected override void Render(HtmlTextWriter writer) { base.Render(writer); Panel pnlDropDown = new Panel(); pnlDropDown.ID = "XYB_Controls_DropDownPanelID";//名字写这么长，只为防止别人与我的控件ID相同 pnlDropDown.Height = DropDwonHeight; pnlDropDown.Width = DropdwonWidth; //pnlDropDown.Style["border"] = "1px solid #ccc";//设置边框样式 pnlDropDown.RenderControl(writer);//把下拉框呈现到网页上 }
我把dropDwon.css页面的代码也粘贴出来吧
#XYB_Controls_DropDownPanelID{
border:1px solid #ccc;
}
我把整个页面代码也粘贴出来吧，方便大家偷懒，复制一下就行了,之后的文章，我可能不会把整个页面的代码粘贴出来了
using System; using System.Text; using System.Web.UI; using System.ComponentModel;//包含组件开发所必须含有的(属性)Attribute; using System.Web.UI.WebControls; using System.Web.UI.HtmlControls; using System.Collections.Generic; namespace XYB.Controls { public class TextEdit:TextBox { #region 属性与字段 private int _dropDwonHeight; private int _dropdwonWidth; [Description("下拉框的高度"),//属性的描述 Category("下拉框")//所属目录 ] public int DropDwonHeight { //如果前台控件没有给DropDwonHeight赋值，那它的初始值是50 get { return ViewState["DropDwonHeight"] == null ? 200 : Convert.ToInt32(ViewState["DropDwonHeight"]); } set { ViewState["DropDwonHeight"] = value; } } [Description("下拉框的宽度"), Category("下拉框") ] public int DropdwonWidth { get { return ViewState["DropdwonWidth"] == null ? 200 : Convert.ToInt32(ViewState["DropdwonWidth"]); } set { ViewState["DropdwonWidth"] = value; } } #endregion protected override void OnPreRender(EventArgs e) { //如果文件已经被加载了，就不用重复加载 if (this.Page.Header.FindControl("XYB_Controls_dropDwonCss")==null) { //加载嵌入资源.css文件 string cssHref = this.Page.ClientScript.GetWebResourceUrl(this.GetType(),"XYB.Controls.CSS.dropDwon.css"); string cssLink = string.Format("<link href='{0}' rel='stylesheet' type='text/css' />", cssHref); LiteralControl litLink = new LiteralControl(cssLink); litLink.ID = "XYB_Controls_dropDwonCss"; this.Page.Header.Controls.Add(litLink); } base.OnPreRender(e); } protected override void Render(HtmlTextWriter writer) { base.Render(writer); Panel pnlDropDown = new Panel(); pnlDropDown.ID = "XYB_Controls_DropDownPanelID";//名字写这么长，只为防止别人与我的控件ID相同 pnlDropDown.Height = DropDwonHeight; pnlDropDown.Width = DropdwonWidth; //pnlDropDown.Style["border"] = "1px solid #ccc";//设置边框样式 pnlDropDown.RenderControl(writer);//把下拉框呈现到网页上 } } }
最后我们再重新生成一下，运行查看效果，一样的，效果图如下
和之前的一模一样，说明.css文件已经被嵌入进去了，我把嵌入的.css呈现出来的源文件也粘贴出来
<link href='/WebResource.axd?d=olxWdg1PRQwoM2C5kFryz0r-e5iv0mo6Hhq6QXJVp3rCs-vS9V1D3mWKk95a425mVceqNdG1fXuFTymtP59K-0A6o0FVd_i5wW8rUi6taUIt5QeywuRKjRDmrg7pOdq9Ydt1IMEaOQ5PL2tF9yCGOQ2&t=635150192328935925' rel='stylesheet' type='text/css' />
嵌入.js文件，敬请关注我，如果有什么问题，可以给我留言。
相关文章
