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自定义控件组件开发 第三章 为控件添加事件 前篇 第三章 为控件添加事件 好了,我们之前以前开发一个控件.而且也添加了属性,开发也很规范,但是那个控件还差最后一点:添加事件. 系列 ...
随机推荐
- 基于Andoird 4.2.2的Account Manager源代码分析学习：创建选定类型的系统帐号
AccountManager.addAccount() public AccountManagerFuture<Bundle> addAccount(final String accoun ...
- SendMessage发送自定义消息及消息响应
控件向父窗体发送自定义消息,父窗体定义处理此消息的函数 效果描述: 指定哪个类添加自定义消息:(当然这个类必须是CmdTarget的子类,不然不能处理消息) 添加消息 实现消息函数:(wParam ...
- angular学习(二):Controller定义总结
上文中总结完了ng-view的应用,将运维后台分开界面到2个,进行到 逻辑Controller处理中,本文将总结一下在项目中Controller都用到了哪些知识: $scope:作用域对象,仅仅是代表 ...
- Codeforces 61E Enemy is weak 乞讨i<j<k && a[i]>a[j]>a[k] 对数的 树阵
主题链接:点击打开链接 意大利正在寻求称号 i<j<k && a[i]>a[j]>a[k] 的对数 假设仅仅有2元组那就是求逆序数的做法 三元组的话就用一个树状 ...
- H3C S5120交换机ACL应用的问题
下午在S5120上ACL的时候发现不起作用,ACL如下: acl number 3001 name deny-wan-to-lan-vpn rule 0 deny ip source 10.3.0.0 ...
- Balsamiq Mockups注册码
Name: personalKey: eJzzzU/OLi0odswsqilILSrOz0vMqbFEAjXONYY1fu6ufgA/CA4X Name: helloWorldKey: eJzzzU/ ...
- 关于SSIS批量抽取Excel文件报0x80004005错误的解决办法
原文:关于SSIS批量抽取Excel文件报0x80004005错误的解决办法 标题: Microsoft Visual Studio ------------------------------ Pa ...
- 解决set /p yn= 接受键盘输入导致ECHO 处于关闭状态的问题
今天写了一个自动更新程序的批处理脚本,但是有个变量一直赋值有问题.弄了一个下午终于找到原因及解决方法: ----转载要说明来自:博客园--邦邦酱好 哦 有问题的代码如下: @echo off echo ...
- linux环境下的线程的创建问题
pthread_create函数用于创建一个线程 函数原型 #include<pthread.h> int pthread_create(pthread_t *restrict tidp, ...
- JavaScript采用append添加的元素错误
1.错误叙述性说明 于IE览器上: Uncaught HierarchyRequestError:Failed to excute 'appendChild' on 'Node':The new ch ...