ASP.NET自定义控件组件开发 第一章 第二篇 接着待续
原文:ASP.NET自定义控件组件开发 第一章 第二篇 接着待续
ASP.NET自定义控件组件开发 第一章 第二篇 接着待续
很感谢大家给我的第一篇ASP.NET控件开发的支持!在写这些之前,我也看了一些例子,想选中一些好上手的例子,这样,可能一些例子大家以前都见过,但是我想说:同样是弹钢琴,同样一首“命运交响曲”,有的人弹的让人荡气回肠,有的人弹的就很一般。
受了李建忠老师的启发,发现用一种演化式的让人更好的接受。
好了,废话不说了。继续开发!希望大家支持!
系列文章链接:
ASP.NET自定义控件组件开发 第二章 继承WebControl的自定义控件
ASP.NET自定义控件组件开发 第三章 为控件添加事件 前篇
ASP.NET自定义控件组件开发 第三章 为控件添加事件 后篇
ASP.NET自定义控件组件开发 第四章 组合控件开发CompositeControl
ASP.NET自定义控件组件开发 第四章 组合控件开发CompositeControl 后篇 --事件冒泡
我们之前开发了一个很简单的自定义的控件,方法很简单,只是把原来的html文本传入writer.Writer()方法的参数,然后输出。其实从模式的角度看,这可说是个Template模式(只是提下而已,有兴趣的朋友可以和我讨论)!
大家再来看看代码:
Code
using System;
using System.Collections.Generic;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls; namespace CreditCardForm
{
public class CreditCardForm1:Control
{
protected override void Render(HtmlTextWriter writer)
{
writer.Write ("<table style='width:287px;height:128px;border-width:0'>");
writer.Write ("<tr>");
writer.Write ("<td>支付方式</td>");
writer.Write ("<td>");
writer.Write ("<select name='paymentMethod' id='paymentMethod' style='width:100%'>");
writer.Write ("<option value='0'>Master</option>");
writer.Write ("<option value='1'>Visa</option>");
writer.Write ("</select>");
writer.Write ("</td>");
writer.Write("</tr>"); writer.Write("<tr>");
writer.Write("<td>信用卡号</td>");
writer.Write("<td><input type='text' name='CreditCardNo' id='CreditCardNo'/></td>");
writer.Write("</tr>"); writer.Write("<tr>");
writer.Write("<td>持卡人</td>");
writer.Write("<td><input type='text' name='CardholderName' id='CardholderName' /></td>");
writer.Write("</tr>"); writer.Write("<tr>");
writer.Write("<td>过期时间</td>");
writer.Write("<td>");
writer.Write("<select name='Month' id='Month'>");
for (int month = ; month < ; month++)
{
writer.Write("<option value=" + month.ToString() + ">" + month.ToString() + "</option>");
} writer.Write("</select>"); writer.Write(" "); writer.Write("<select name='Year' id='Year'>");
for (int year = ; year< ; year ++)
{
writer.Write("<option value=" + year.ToString() + ">" + year.ToString() + "</option>");
}
writer.Write("</select>");
writer.Write("</td></tr>"); writer.Write("<tr>");
writer.Write("<td align='center' colspan='2'>");
writer.Write("<input type='submit' value='提交'/>");
writer.Write("</td></tr>"); } }
}
我们发现,这个控件实现的很僵硬!因为这个控件不像其他的服务器控件,我们这个控件没有任何让我们编辑的地方,也没有一些让我们设置的属性。下面,我们就来让控件“活”起来。给他一些可以编辑的属性。
首先我们还是从最简单来看。
相信大家都知道C#中的get ,set,我们总是把成为“属性”(Property),其实在控件开发的时候,就是用这些get, 和set来设置属性的。
先来看看这张图片:
大家都熟悉吧,就是我们之前前开发的那个控件的外观。我们在拖控件是使用的时候,一般都要设置一些属性,比如:Text,Name等等。当然,这里也不例外,我们也设置这个控件的属性,例如我们想让控件左边的文本改变,就像改变Text属性,如下:
这样的控件就更加的灵活。下面来看看这样开发这些属性吧!
用get和set
如下:
Code
1 private string paymentMethod = "支付方式";
2 private string creditCardNo = "信用卡号";
3 private string cardholderName = "持卡人";
4 private string expirationDate = "过期时间";
5 private string submitButtonText = "提交";
6
7 //以便以后二次开发 所以用了virtual
8 //
9 public virtual string PaymentMethodText
{
get
{
return paymentMethod;
}
set
{
paymentMethod = value;
}
} public virtual string CreditCardNoText
{
get
{
return creditCardNo;
}
set
{
creditCardNo = value;
}
} public virtual string CardholderNameText
{
get
{
return cardholderName;
}
set
{
cardholderName = value;
}
} public virtual string ExpirationDateText
{
get
{
return expirationDate;
}
set
{
expirationDate = value;
}
} public virtual string SubmitButtonText
{
get
{
return submitButtonText;
}
set
{
submitButtonText = value;
}
}
这样做以后,基本上就完成了我们之前的目的,可以设置控件的属性了。注意:我们这里实现的属性是可读写的。大家可以根据情况来确定是只读,还是只写!
但是我们不要忘记了,控件的显示是通过Render方法呈现在页面的,我们要使得我们的控件可以改变属性,改变呈现的方式,就要改改Render中的代码:如下:
Code
1 protected override void Render(HtmlTextWriter writer)
2 {
3 writer.Write("<table style='width:287px;height:128px;border-width:0'>");
4 writer.Write("<tr>");
5 writer.Write("<td>"+PaymentMethodText+ "</td>");
6 writer.Write("<td>");
7 writer.Write("<select name='paymentMethod' id='paymentMethod' style='width:100%'>");
8 writer.Write("<option value='0'>Master</option>");
9 writer.Write("<option value='1'>Visa</option>");
writer.Write("</select>");
writer.Write("</td>");
writer.Write("</tr>");
writer.Write("<tr>");
writer.Write("<td>"+CreditCardNoText +"</td>");
writer.Write("<td><input type='text' name='CreditCardNo' id='CreditCardNo'/></td>");
writer.Write("</tr>");
writer.Write("<tr>");
writer.Write("<td>"+CardholderNameText +"</td>");
writer.Write("<td><input type='text' name='CardholderName' id='CardholderName' /></td>");
writer.Write("</tr>");
writer.Write("<tr>");
writer.Write("<td>"+ExpirationDateText +"</td>");
writer.Write("<td>");
writer.Write("<select name='Month' id='Month'>");
for (int month = ; month < ; month++)
{
writer.Write("<option value=" + month.ToString() + ">" + month.ToString() + "</option>");
}
writer.Write("</select>");
writer.Write(" ");
writer.Write("<select name='Year' id='Year'>");
for (int year = ; year < ; year++)
{
writer.Write("<option value=" + year.ToString() + ">" + year.ToString() + "</option>");
}
writer.Write("</select>");
writer.Write("</td></tr>");
writer.Write("<tr>");
writer.Write("<td align='center' colspan='2'>");
writer.Write("<input type='submit' value='"+SubmitButtonText +"'/>");
writer.Write("</td></tr>");
}
这里,请大家注意代码的第5,15,20,25,和47行,我们之前在前一个控件中是直接写如字符串,这里我们改变了写法。用到了我们定义的那些get,set的属性,来改变控件显示。
好了,这写步骤完成之后,工作就差不多完成了。
我想大家应该来记得我们平时用的控件,如下:
例如上面的TextBox控件,他的属性就显示在属性窗口,而且属性都分了类,如”外观“,”行为“,而且没有属性下面都有注释。大家注意途中的标记部分。
我们上面的代码确实已经为控件添加了属性,但是我们要让我们开发的控件和现有的控件一样,看起来更加的专业,我们就要实现一些显示的代码,使得我们的控件和现有的服务器控件一样”好看,好用”。即,要有下面的效果:
这个控件看起来很专业吧!好了,我们来实现下:
其实很简单的,只要添加一些属性(Attribute)标记
Code
[Browsable (true )]//在属性窗口中是否可见
[Category ("Appearance")]//属性的分类,如,行为,外观,大家可以在属性窗口看见这样的分类
[DefaultValue ("支付方式")]
[Description ("支付方式")]//这些是显示在属性窗口底下的
public virtual string PaymentMethodText
{
get
{
return paymentMethod;
}
set
{
paymentMethod = value;
}
}
大家可以根据我的注释再结合我上面的标记图可以看看。然后其他的的一些get,set属性都添加差不多,只是括号()内的文本,随你写而已!
到此为止,一个”好看“的控件就写完了。至于“好用”,暂时不急,慢慢来!
当我们把控件添加到页面后,查看他的“源”看到的这样的:
Code
<cc1:creditcardform1 id="CreditCardForm1_1" runat="server"></cc1:creditcardform1>
我们看到其他的一些控件的“源”,例如:
Code
<asp:TextBox ID="TextBox1" runat="server" Font-Bold="True" Font-Italic="True" Height="200px" TextMode="MultiLine"></asp:TextBox>
TextBox控件的很多的属性都显示在标记中了,我们也希望当我们的控件一拖上页面的时候就显示一些包含在标记中的属性,如下:
Code
<cc1:CreditCardForm2 ID="CreditCardForm2_1" runat="server" PaymentMethodText="我的支付" CardholderNameText="持卡姓名" CreditCardNoText="我的卡号" ExpirationDateText="过期吗?">
</cc1:CreditCardForm2>
怎样做?
也很简单,加些Attribute标记就行了。
这些的标记是类级别的,就是说,要用在类上,我们之前家的那些标记都用在字段上,级别不同。注意哦!
如下:
Code
[ToolboxData("<{0}:CreditCardForm2 runat='server' PaymentMethodText='支付方式'></{0}:CreditCardForm2>")]
public class CreditCardForm2:Control
注意:在{0}的冒号中之后的那个"CreditCardForm2“就是类的名字,不要写错,否就不行!还有runat='sever'一定要写,其他的属性你可以随意加,但是要保证,那些你的家的属性是我们定义了的。例如你还可以加
CreditCardNo='信用卡号',等等。这样之后,我们的控件就更加的专业了!
整个代码如下:大家多多提意见,如果我讲不够好就说,我尽量讲的更加平实!
Code
1 using System;
2 using System.Collections.Generic;
3 using System.Text;
4 using System.Web.UI ;
5 using System.Web ;
6 using System.ComponentModel;
7 using System.Web.UI.WebControls ;
8
9 namespace CreditCardForm
10 {
11 [DefaultProperty ("CardholderNameText")]
12 [ToolboxData("<{0}:CreditCardForm2 runat='server' PaymentMethodText='支付方式'></{0}:CreditCardForm2>")]
13 public class CreditCardForm2:Control
14 {
15 #region 属性
16 private string paymentMethod = "支付方式";
17 private string creditCardNo = "信用卡号";
18 private string cardholderName = "持卡人";
19 private string expirationDate = "过期时间";
20 private string submitButtonText = "提交";
21
22 //以便以后二次开发 所以用了virtual
23 //
24
25
26 [Browsable (true )]//在属性窗口中是否可见
27 [Category ("Appearance")]//属性的分类,如,行为,外观,大家可以在属性窗口看见这样的分类
28 [DefaultValue ("支付方式")]
29 [Description ("支付方式")]//这些是显示在属性窗口底下的
30 public virtual string PaymentMethodText
31 {
32 get
33 {
34 return paymentMethod;
35 }
36 set
37 {
38 paymentMethod = value;
39 }
40 }
41
42 [Browsable (true)]
43 [Category ("Appearance")]
44 [DefaultValue ("信用卡号")]
45 [Description ("信用卡的号码")]
46 public virtual string CreditCardNoText
47 {
48 get
49 {
50 return creditCardNo;
51 }
52 set
53 {
54 creditCardNo = value;
55 }
56 }
57
58 [Browsable (true)]
59 [Category ("Appearance")]
60 [DefaultValue ("持卡人")]
61 [Description ("持卡人的名字")]
62 public virtual string CardholderNameText
63 {
64 get
65 {
66 return cardholderName;
67 }
68 set
69 {
70 cardholderName = value;
71 }
72 }
73
74 [Browsable (true)]
75 [Category ("Appearance")]
76 [DefaultValue ("过期时间")]
77 [Description ("描述卡的过期时间")]
78 public virtual string ExpirationDateText
79 {
80 get
81 {
82 return expirationDate;
83 }
84 set
85 {
86 expirationDate = value;
87 }
88 }
89 [Browsable (true )]
90 [Description ("按钮的文本")]
91 [Category ("Appearance")]
92 [DefaultValue ("提交")]
93 public virtual string SubmitButtonText
94 {
95 get
96 {
97 return submitButtonText;
98 }
99 set
{
submitButtonText = value;
}
}
#endregion
protected override void Render(HtmlTextWriter writer)
{
writer.Write("<table style='width:287px;height:128px;border-width:0'>");
writer.Write("<tr>");
writer.Write("<td>"+PaymentMethodText+ "</td>");
writer.Write("<td>");
writer.Write("<select name='paymentMethod' id='paymentMethod' style='width:100%'>");
writer.Write("<option value='0'>Master</option>");
writer.Write("<option value='1'>Visa</option>");
writer.Write("</select>");
writer.Write("</td>");
writer.Write("</tr>");
writer.Write("<tr>");
writer.Write("<td>"+CreditCardNoText +"</td>");
writer.Write("<td><input type='text' name='CreditCardNo' id='CreditCardNo'/></td>");
writer.Write("</tr>");
writer.Write("<tr>");
writer.Write("<td>"+CardholderNameText +"</td>");
writer.Write("<td><input type='text' name='CardholderName' id='CardholderName' /></td>");
writer.Write("</tr>");
writer.Write("<tr>");
writer.Write("<td>"+ExpirationDateText +"</td>");
writer.Write("<td>");
writer.Write("<select name='Month' id='Month'>");
for (int month = ; month < ; month++)
{
writer.Write("<option value=" + month.ToString() + ">" + month.ToString() + "</option>");
}
writer.Write("</select>");
writer.Write(" ");
writer.Write("<select name='Year' id='Year'>");
for (int year = ; year < ; year++)
{
writer.Write("<option value=" + year.ToString() + ">" + year.ToString() + "</option>");
}
writer.Write("</select>");
writer.Write("</td></tr>");
writer.Write("<tr>");
writer.Write("<td align='center' colspan='2'>");
writer.Write("<input type='submit' value='"+SubmitButtonText +"'/>");
writer.Write("</td></tr>");
}
}
}
ASP.NET自定义控件组件开发 第一章 第二篇 接着待续的更多相关文章
- ASP.NET自定义控件组件开发 第一章 第三篇
原文:ASP.NET自定义控件组件开发 第一章 第三篇 第三篇:第一章的完结篇 系列文章链接: ASP.NET自定义控件组件开发 第一章 待续 ASP.NET自定义控件组件开发 第一章 第二篇 接着待 ...
- ASP.NET自定义控件组件开发 第一章 待续
原文:ASP.NET自定义控件组件开发 第一章 待续 第一章:从一个简单的控件谈起 系列文章链接: ASP.NET自定义控件组件开发 第一章 待续 ASP.NET自定义控件组件开发 第一章 第二篇 接 ...
- ASP.NET自定义控件组件开发 第一章 第三篇 第一章的完结篇
ASP.NET自定义控件组件开发 第一章 第三篇 第三篇:第一章的完结篇 系列文章链接: ASP.NET自定义控件组件开发 第一章 待续 ASP.NET自定义控件组件开发 第一章 第二篇 接着待续 ...
- ASP.NET自定义控件组件开发 第一章 第一章:从一个简单的控件谈起
第一章:从一个简单的控件谈起 系列文章链接: ASP.NET自定义控件组件开发 第一章 待续 ASP.NET自定义控件组件开发 第一章 第二篇 接着待续 ASP.NET自定义控件组件开发 第一章 第三 ...
- ASP.NET自定义控件组件开发 第二章 继承WebControl的自定义控件
原文:ASP.NET自定义控件组件开发 第二章 继承WebControl的自定义控件 第二章 继承于WebControl的自定义控件 到现在为止,我已经写了三篇关于自定义控件开发的文章,很感谢大家的支 ...
- ASP.NET自定义控件组件开发 第五章 模板控件开发
原文:ASP.NET自定义控件组件开发 第五章 模板控件开发 第五章 模板控件开发 系列文章链接: ASP.NET自定义控件组件开发 第一章 待续 ASP.NET自定义控件组件开发 第一章 第二篇 接 ...
- ASP.NET自定义控件组件开发 第四章 组合控件开发CompositeControl
原文:ASP.NET自定义控件组件开发 第四章 组合控件开发CompositeControl 第四章 组合控件开发CompositeControl 大家好,今天我们来实现一个自定义的控件,之前我们已经 ...
- ASP.NET自定义控件组件开发 第四章 组合控件开发CompositeControl 后篇 --事件冒泡
原文:ASP.NET自定义控件组件开发 第四章 组合控件开发CompositeControl 后篇 --事件冒泡 CompositeControl 后篇 --事件冒泡 系列文章链接: ASP.NET ...
- ASP.NET自定义控件组件开发 第三章 为控件添加事件 前篇
原文:ASP.NET自定义控件组件开发 第三章 为控件添加事件 前篇 第三章 为控件添加事件 好了,我们之前以前开发一个控件.而且也添加了属性,开发也很规范,但是那个控件还差最后一点:添加事件. 系列 ...
随机推荐
- SQLServer 复制中移除和加入公布而不初始化全部项目
-- 若提前"禁止架构更改".新增的列不会自己主动加入大公布.此时应使用 sp_articlecolumn 加入列 EXEC sp_changepublication @publi ...
- 泥鳅般的const(一个小Demo彻底搞清楚)
#include<stdio.h> int main(){ int a = 3; int b = 5; /* C标准库函数中最常见格式, 目的是保护參数, ...
- ubuntu终端方向键不能用(主机名不显示)问题的解决
sudo gedit /etc/passwd 在/etc/passwd中改动该用户相应的shell:/bin/sh改为/bin/bash就可以解决该问题
- HttpClient 4.3教程(转载)
HttpClient 4.3教程(转载) 转自:http://www.yeetrack.com/?p=779 前言 Http协议应该是互联网中最重要的协议.持续增长的web服务.可联网的家用电器等都在 ...
- 图片预览插件 fancyBox
今天给大家分享一款优秀的 jquery 弹出层展示插件 fancybox. 它除了能够展示图片之外,还能够展示 flash.iframe 内容.html 文本以及 ajax 调用.我们能够通过 css ...
- linux网络编程学习笔记之三 -----多进程并发服务端
首先是fork()函数.移步APUE 8.3. 比較清晰的解释能够參考http://blog.csdn.net/lingdxuyan/article/details/4993883和http://w ...
- 批处理程序:自动上传FTP,再登陆linux服务器执行更新
----转载请注明出处:博客园-邦邦酱好 最近在学批处理程序,一直没找到能够结合工作来使用它的地方,前几天测试服务端的时候突然想到可以这样做: 写一个批处理程序,自动通过FTP上传软件包到指定的地方, ...
- 队列优化和斜率优化的dp
可以用队列优化或斜率优化的dp这一类的问题为 1D/1D一类问题 即状态数是O(n),决策数也是O(n) 单调队列优化 我们来看这样一个问题:一个含有n项的数列(n<=2000000),求出每一 ...
- 点集配对问题(状态dp)
给定n个点(n是偶数)使得两个点两两配对,最后总的距离和最小. 用是表示集合,那么dp[s]表示集合s配对后的最小距离和 , 状态转换方程为 表示集合中任意拿两个元素配对,然后转移为更小的两个集合 ...
- ASP.NET中的ExecuteNonQuery()方法的用法
下面我将详细讲解在机房收费系统D层中如何对数据库的增加.删除.修改,最后再来总结一下 ExecuteNonQuery(),ExecuteScalar(),ExecuteReader的用法: 一.增.删 ...