Asp.net自定义控件开发任我行（5）-嵌入资源上

摘要

　　上一篇我们讲了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)
{

　　　　　　base.OnPreRender(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);
}
}

现在我们再把修改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文件，敬请关注我，如果有什么问题，可以给我留言。