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)-嵌入资源下的更多相关文章
- Asp.net自定义控件开发任我行(5)-嵌入资源上
摘要 上一篇我们讲了VitwState保存控件状态,此章我们来讲讲嵌入css文件,js文件,嵌入Image文件我也一笔带过. 内容 随着我的控件的完善,我们目标控件DropDwonCheckList最 ...
- Asp.net自定义控件开发任我行(附1)-属性一览众山小
元数据属性应用于服务器控件及其成员,从而提供由设计工具.ASP.NET 页分析器.ASP.NET 运行库以及公共语言运行库使用的信息.当页开发人员在可视化设计器中使用控件时,设计时属性能改进开发人员的 ...
- Asp.net自定义控件开发任我行(4)-ViewState保存控件状态
摘要 上一篇我们实现了下拉框的效果,此章的目的主要是保存控件属性状态 内容 我们先来看一个例子,后台代码不变,我们只改UI页面的代码,先在页面上拖放两个控件,一个是我们现在要开发的这个控件,另一个是按 ...
- Asp.net自定义控件开发任我行(8)-数据集绑定
摘要 已经有好几天没有写博客了,今天继续,前几天写到了注册自定义事件,今天我们来讲数据集绑定. 先把运行效果截个图给大家看,让大家心里也有个底.(大家要从第一章开始看起,我们每一章都是接着前面没做完的 ...
- Asp.net自定义控件开发任我行(3)-Render
摘要 上一篇我们讲到了自定义标签TagPrefix用法,此篇我们来讲一下控件的呈现,主要是呈现下拉框 内容 呈现的方法有,Render,RenderControl,RenderChildren,这三个 ...
- Asp.net自定义控件开发任我行(2)-TagPrefix标签
摘要 前面我们已经做了一个最简单的TextBox的马甲,此篇文章,我们来讲讲自定义控件的标签.大家可能看到了上一篇中拖放进来的代码是 <cc1:TextEdit ID="TextEdi ...
- Asp.net自定义控件开发任我行(7)-注册自定义事件
摘要 前面我们已经把嵌入资源讲完了,不知道大家有没有得到收益,本章主要讲自定义事件,也就是给TextBox注册一个点击事件. 引言 不知道道上的朋友有没有注意到TextBox控件没有点击事件,就连网上 ...
- Asp.net自定义控件开发任我行(1)-笑傲江湖
1.引言 参加工作5个月了,来到一家小公司,有几只老鸟带我,但不是我公司的,几个礼拜才来一次.来到公司做的第一个项目是web项目,里面有很多的重复代码,页面代码都是千篇一律,你这人也太水了吧,垃圾代码 ...
- Asp.net 自定义控件开发相关的几种嵌入资源解决方案
前提: 如下将要介绍的几种类型资源都要在其属性页窗口, 将 <生成操作> 属性, 设置为[嵌入的资源], 如图: ► 给自定义控件添加自定义图标的几种方案 方法一: 直接在自定义控 ...
随机推荐
- MATLAB之折线图、柱状图、饼图以及常用绘图技巧
MATLAB之折线图.柱状图.饼图以及常用绘图技巧 一.折线图 参考代码: %图1:各模式直接成本预测 %table0-table1为1*9的数组,记录关键数据 table0 = data_modol ...
- npm常用指令小记
查看本地指定包在npm远程服务器的版本信息 方式一: npm view <packageName> versions 方式二: npm info <packageName> 查 ...
- GridView的 PreRender事件与 RowCreated、RowDataBound事件大乱斗
GridView的 PreRender事件与 RowCreated.RowDataBound事件大乱斗 之前写了几个范例,做了GridView的 PreRender事件与 RowCreated.Row ...
- 配置Maven镜像与本地缓存
IntelliJ IDEA 安装后自带Maven,也可以使用自己安装的Maven. 配置阿里镜像与本地仓库文件夹 找到Maven的安装目录 打开settings.xml配置文件 修改mirrors ...
- IOS 自定义导航栏背景
//- (void)setBackgroundImage:(UIImage *)backgroundImage forBarMetrics:(UIBarMetrics)barMetrics NS_AV ...
- 【BZOJ3940】[USACO2015 Feb] Censoring (AC自动机的小应用)
点此看题面 大致题意: 给你一个文本串和\(N\)个模式串,要你将每一个模式串从文本串中删去.(此题是[BZOJ3942][Usaco2015 Feb]Censoring的升级版) \(AC\)自动机 ...
- linux怎么进home目录下
可以使用cd命令,cd命令的功能是切换到指定的目录: 命令格式:cd [目录名] 有几个符号作为目录名有特殊的含义: “/”代表根目录.“..”代表上一级目录.“~”代表HOME目录.“-”代表前一目 ...
- 删除临时文件的bat文件
@echo offecho 正在清除系统垃圾文件,请稍等......del /f /s /q %systemdrive%\*.tmpdel /f /s /q %systemdrive%\*._mpde ...
- Angular6中[ngClass]、[ngStyle]的基本使用
1.ngStyle 基本用法 <div [ngStyle]="{'background-color':'green'}"></<div> 判断添加 & ...
- windows下sorl安装
1. JDK要求 Solr 4.10 要求JDK版本必须是1.7或更高. 2. 下载 下载地址: http://www.apache.org/dyn/closer.cgi/lucene/solr/ 下 ...