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

摘要

　　上一章，我们讲了嵌入.css文件，这一章，我们来讲一下嵌入.js文件，也顺带一个嵌入Image文件

内容

　　我们前面的几章，一运行，下拉框就显示出来了，但是DropDwonList的下拉框是被隐藏掉的，而且当我们点击文本框的时候，下拉框就显示出来了，当然，我们最终目标是做DropDwonCheckList控件，它既有TextBox的全部属性，也有DropDwonList的特性。本章我们就利用嵌入的.js来操作此控件。

　　既然我们是做DropDwonCheckList控件，那我们还是以DropDwonCheckList命名一个类吧，在XYB.Controls层新建这个类，现在此层中就有两个类了。然后再新建一个JS文件夹，JS文件夹里面新建一个dropDwon.js文件，并把生成操作设置为"嵌入资源"。

　　后台代码我们重新写过，在这里，我们把大体的框也搭好。我们先来看一下本章的最终要实现的效果。

分析

　　下拉框里面可分为两个大div ,假设就叫DropDwonHeadPanel(Panel就是Div),和DropDwonFooterPanel,DropDwonHeadPanel里面就存一个CheckBox，DropDwonFooterPanel里面再放两个div，分别叫DropDwonFooterLeftPanel和DropDwonFooterRightPanel，左边放"确定"按钮，右边放"取消"按钮,大致的布局就是这样。

1.下面是是dropDwon.css代码

#XYB_Controls_DropDownPanelID{

    border:1px solid #ccc;

    display:none;

}

#XYB_Controls_DropDownHeaderPanelID,#XYB_Controls_DropDownFooterPanelID{

    height:20px; line-height:20px;width:%;

}

   #XYB_Controls_DropDwonFooterPanelID{padding-top:50px;}

   #XYB_Controls_DropDwonFooterLeftPanelID,#XYB_Controls_DropDwonFooterRightPanelID{

       width:%;float:left;text-align:center;

   }

2.JS代码也很简单，就一个点击的方法，下面是dropDwon.js代码

function dropDwonClick() {

    $("XYB_Controls_DropDownPanelID").style.display = "block";

}

function $(obj) {

    return document.getElementById(obj);

}

3.接下的事就是我整个页面的代码

using System;

using System.Text;

using System.Web;

using System.Web.UI;

using System.Web.UI.HtmlControls;

using System.Web.UI.WebControls;

using System.ComponentModel;

using System.Collections.Generic;

namespace XYB.Controls

{

    public class DropDwonCheckList:TextBox

    {

        #region  属性与字段       

        [Description("下拉框的高度"),//属性的描述

         Category("下拉框")//所属目录

        ]

        public int DropDwonHeight

        {

            //如果前台控件没有给DropDwonHeight赋值，那它的初始值是100

            get { return ViewState["DropDwonHeight"] == null ?  : Convert.ToInt32(ViewState["DropDwonHeight"]); }

            set { ViewState["DropDwonHeight"] = value; }

        }

        [Description("下拉框的宽度"),

         Category("下拉框")

        ]

        public int DropdwonWidth

        {

            get { return ViewState["DropdwonWidth"] == null ?  : Convert.ToInt32(ViewState["DropdwonWidth"]); }

            set { ViewState["DropdwonWidth"] = value; }

        }

        #endregion

        protected override void OnPreRender(EventArgs e)

        {

　　　　　　　base.OnPreRender(e);
            //如果文件已经被加载了，就不用重复加载

            if (!this.Page.ClientScript.IsClientScriptIncludeRegistered(this.GetType(),"XYB.Controls.JS.dropDwon.js"))

            {

                #region  加载嵌入资源.css文件

                //获取嵌入资源.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);

                #endregion

                //获取嵌入资源.js文件

                this.Page.ClientScript.RegisterClientScriptResource(this.GetType(), "XYB.Controls.JS.dropDwon.js");

                this.Attributes["onclick"] = "dropDwonClick()";//给文本框注册点击事件

           }

        }

        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;

            #region  构造头部和尾部

            StringBuilder strHtml = new StringBuilder();

            strHtml.Append("<div id=\"XYB_Controls_DropDownHeaderPanelID\">");

            strHtml.Append("<input type='checkbox' id='XYB_Controls_SelectAllItemCheckBox' /><label>全选</label>");

            strHtml.Append("</div>");

            strHtml.Append("<div id='XYB_Controls_DropDwonFooterPanelID'>");

            strHtml.Append("<div id=\"XYB_Controls_DropDwonFooterLeftPanelID\">");

            strHtml.Append("<input type=\"button\" id=\"XYB_Controls_btnSure\" value=\"确定\" />");

            strHtml.Append("</div>");

            strHtml.Append("<div id=\"XYB_Controls_DropDwonFooterRightPanelID\">");

            strHtml.Append("<input type=\"button\" id=\"XYB_Controls_btnCancel\" value=\"取消\" />");

            strHtml.Append("</div>");

            strHtml.Append("</div>");

            #endregion   

            pnlDropDown.Controls.Add(new LiteralControl(strHtml.ToString()));

            pnlDropDown.RenderControl(writer);//把下拉框呈现到网页上

        }

    }

}

总结

　　1.获取.css资源文件

　　this.Page.ClientScript.GetWebResourceUrl(this.GetType(), "XYB.Controls.CSS.dropDwon.css");

　　2.获取并注册.js资源文件

　　this.Page.ClientScript.RegisterClientScriptResource(this.GetType(), "XYB.Controls.JS.dropDwon.js");

　　3.获取图片资源文件

　　this.Page.ClientScript.GetWebResourceUrl(this.GetType(), "XYB.Controls.Image.police.jpg");

　　必须在 AssemblyInfo.cs文件中声明嵌入资源，并把生成操作设置为嵌入资源

[assembly: System.Web.UI.WebResource("XYB.Controls.CSS.dropDwon.css", "text/css")]//样式表

[assembly: System.Web.UI.WebResource("XYB.Controls.JS.dropDwon.js", "text/javascript")]//js

[assembly: System.Web.UI.WebResource("XYB.Controls.Image.police.jpg", "image/jpg")]//图片

下集预告

　　添加自定义事件，实现OnClick事件，原来微软的TextBox不带有Click事件的，我们来扩展这个事件

巴特西

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

摘要

内容

分析

总结

下集预告

最新文章

热门文章