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