到现在为止,我已经写了三篇关于自定义控件开发的文章,很感谢大家的支持!不知道大家对我讲的方式有什么好的建议,我尽量使自定义控件的技术让更多的程序员同胞接受。好了,开发开始了!
本章还是延续上章的例子,开发一个CreditCardForm控件。
其实本章也不难,相信大家看完后,也觉得很简单!
我们首先开谈谈继承Control和WebControl的区别:其实二者最大的区别就是在,如果我们开发的控件继承WebControl,那么我们的控件就支持更多的CSS样式。而继承于Control的自定义控件的样式相对就少些。
其实还有一个区别就在开发的规范上。我们来简单的看看上一章的自定义控件的代码,主要来看看Render方法中的代码:大家只扫一眼就可以了。
- protected override void Render(HtmlTextWriter writer)
- {
- //显示table标记
- writer.AddStyleAttribute(HtmlTextWriterStyle.Width, "287px");
- writer.AddStyleAttribute(HtmlTextWriterStyle.Height, "128px");
- writer.AddStyleAttribute(HtmlTextWriterStyle.BorderWidth, "0");
- writer.AddAttribute(HtmlTextWriterAttribute.Id, "mytable");
- writer.RenderBeginTag(HtmlTextWriterTag.Table);
- //显示table类的标记 包含 tr ,td 还有一些textbox,下拉框等
- writer.RenderBeginTag(HtmlTextWriterTag.Tr);
- writer.RenderBeginTag(HtmlTextWriterTag.Td);
- writer.Write(PaymentMethodText);
- writer.RenderEndTag();
- writer.RenderBeginTag(HtmlTextWriterTag.Td);
- writer.AddAttribute(HtmlTextWriterAttribute.Name, "PaymentMethod");
- writer.AddAttribute(HtmlTextWriterAttribute.Id, "PaymentMethod");
- writer.AddStyleAttribute(HtmlTextWriterStyle.Width, "100%");
- writer.RenderBeginTag(HtmlTextWriterTag.Select);
- writer.AddAttribute(HtmlTextWriterAttribute.Value, "0");
- writer.RenderBeginTag(HtmlTextWriterTag.Option);
- writer.Write("Master");
- writer.RenderEndTag();
- writer.AddAttribute(HtmlTextWriterAttribute.Value, "1");
- writer.RenderBeginTag(HtmlTextWriterTag.Option);
- writer.Write("Visa");
- writer.RenderEndTag();
- writer.RenderEndTag();
- writer.RenderEndTag();
- writer.RenderEndTag();
- writer.RenderBeginTag(HtmlTextWriterTag.Tr);
- writer.RenderBeginTag(HtmlTextWriterTag.Td);
- writer.Write(CreditCardNoText);
- writer.RenderEndTag();
- writer.RenderBeginTag(HtmlTextWriterTag.Td);
- writer.AddAttribute(HtmlTextWriterAttribute.Type, "text");
- writer.AddAttribute(HtmlTextWriterAttribute.Name, "CreditCardNo");
- writer.AddAttribute(HtmlTextWriterAttribute.Id, "CreditCardNo");
- writer.RenderBeginTag(HtmlTextWriterTag.Input);
- writer.RenderEndTag();
- writer.RenderEndTag();
- writer.RenderEndTag();
- writer.RenderBeginTag(HtmlTextWriterTag.Tr);
- writer.RenderBeginTag(HtmlTextWriterTag.Td);
- writer.Write(CardholderNameText);
- writer.RenderEndTag();
- writer.RenderBeginTag(HtmlTextWriterTag.Td);
- writer.AddAttribute(HtmlTextWriterAttribute.Type, "text");
- writer.AddAttribute(HtmlTextWriterAttribute.Name, "CardholderName");
- writer.AddAttribute(HtmlTextWriterAttribute.Id, "CardholderName");
- writer.RenderBeginTag(HtmlTextWriterTag.Input);
- writer.RenderEndTag();
- writer.RenderEndTag();
- writer.RenderEndTag();
- writer.RenderBeginTag(HtmlTextWriterTag.Tr);
- writer.RenderBeginTag(HtmlTextWriterTag.Td);
- writer.Write(ExpirationDateText);
- writer.RenderEndTag();
- writer.RenderBeginTag(HtmlTextWriterTag.Td);
- writer.AddAttribute(HtmlTextWriterAttribute.Name, "Month");
- writer.AddAttribute(HtmlTextWriterAttribute.Id, "Month");
- writer.RenderBeginTag(HtmlTextWriterTag.Select);
- for (int month = 1; month < 13; month++)
- {
- writer.AddAttribute(HtmlTextWriterAttribute.Value, month.ToString());
- writer.RenderBeginTag(HtmlTextWriterTag.Option);
- writer.Write(month.ToString());
- writer.RenderEndTag();
- }
- writer.RenderEndTag();
- writer.Write(" ");
- writer.AddAttribute(HtmlTextWriterAttribute.Name, "Year");
- writer.AddAttribute(HtmlTextWriterAttribute.Id, "Year");
- writer.RenderBeginTag(HtmlTextWriterTag.Select);
- for (int year = 2008; year < 2015; year++)
- {
- writer.AddAttribute(HtmlTextWriterAttribute.Value, year.ToString());
- writer.RenderBeginTag(HtmlTextWriterTag.Option);
- writer.Write(year.ToString());
- writer.RenderEndTag();
- }
- writer.RenderEndTag();
- writer.RenderEndTag();
- writer.RenderEndTag();
- writer.RenderBeginTag(HtmlTextWriterTag.Tr);
- writer.AddAttribute(HtmlTextWriterAttribute.Colspan, "2");
- writer.AddAttribute(HtmlTextWriterAttribute.Align, "center");
- writer.RenderBeginTag(HtmlTextWriterTag.Td);
- writer.AddAttribute(HtmlTextWriterAttribute.Type, "submit");
- writer.AddAttribute(HtmlTextWriterAttribute.Value, SubmitButtonText);
- writer.RenderBeginTag(HtmlTextWriterTag.Input);
- writer.RenderEndTag();
- writer.RenderEndTag();
- writer.RenderEndTag();
- //table的结束标记
- writer.RenderEndTag();
- }
相信这段代码大家都和熟悉。在这段代码的作用主要显示了一个table 以及table 之中的标记元素。
如果一这个控件已经写好了,加入我们想要改改table的样式,如把border设为1,或者改变显示的颜色等,那么我们就要再次打开这段代码,修改代码。其实这就不好。为什么?
其实这个方法中的代码做了四件事:
1.显示控件最外层的包含标记,即table
2.显示最外层标记的一些属性,如border.id等
3.显示控件的主要内容 ,如,显示输入框,下拉框,按钮。
4.显示控件最外层包含标记的结束标记。
这样看来,这个方法的职责就有四个。大家应该还记得面向对象设计的原创:单一职责。虽然这个元素一般用在类上,但是我们更加要注意,这个原则用的宗旨:使对象只有一个变化的因素。这个原则也用在方法的设计上。
就是说,我们如果想要改变最外层标记table一些属性,我们就影响了其他三个职责。同理,我们想改变其他的元素或者内容,结果可想而知。
为此,继承WebControl的控件就更加的规范和灵活:
其实,继承于WebControl的控件的显示还是在Render方法中显示,只是这个Render方法已经不由我们来写了:
如下:
- protected override void Render(HtmlTextWriter writer)
- {
- RenderBeginTag(writer);
- RenderContens(writer);
- RenderEndTag(writer);
- }
因为我们之前说,Render方法的职责有四个。所以WebControl的Render方法就把这些职责分离了。以后我们能就可以独立的改变一个因素了。大家也许奇怪:不是说有四个职责吗,但是上面只是显示了三个方法,其实在RenderBeginTag()方法中包含显示最外层标记样式的方法。
所以我们只要分别重写这三个方法,一个继承WebControl的自定义的控件就成了。不要怕,方法很多,但是很简单,而且代码我们都懂,之前差不多都讲了的。
我想把写成后的控件给大家看看,让大家看下我们本章的目标:
大家看见没有:是不是支持的样式多了!!!
好了,我们来写吧:不难哦:)
首先看看我们要的写方法以及他们的功能:
- protected override void Render(HtmlTextWriter writer)
- {
- //显示最外层包含标记开始的标记,即,显示
- RenderEndTag(writer);
- }
很简单,只要如下就可以了。
- protected override HtmlTextWriterTag TagKey
- {
- get
- {
- return HtmlTextWriterTag.Table;
- }
- }
不要奇怪,因为RenderBeginTag()方法内部实际是调用了这个属性来显示的最外层的包含标记的。
好了,第一步就写完了啊!简答吧!
下面来显示table的样式,因为我们的控件的最外层的标记是table,显示他的样式只要这样就OK了。
- protected override Style CreateControlStyle()
- {
- return new TableStyle(ViewState);
- }
又写完了一部分。。不难吧!接着看啊!
如果你的最外层的标记是那么,上面的那个方法你都不用写.
下面就写了RenderContent方法,不难,只记住这个方法的职责:显示最外层标记的内容:
如下:
- protected override void RenderContents(HtmlTextWriter writer)
- {
- writer.RenderBeginTag(HtmlTextWriterTag.Tr);
- writer.RenderBeginTag(HtmlTextWriterTag.Td);
- writer.Write(PaymentMethod);
- writer.RenderEndTag();
- writer.RenderBeginTag(HtmlTextWriterTag.Td);
- writer.AddAttribute(HtmlTextWriterAttribute.Id, PaymentMethodListId);
- writer.AddAttribute(HtmlTextWriterAttribute.Name, PaymentMethodListName);
- writer.AddStyleAttribute(HtmlTextWriterStyle.Width, "100%");
- writer.RenderBeginTag(HtmlTextWriterTag.Select);
- writer.AddAttribute(HtmlTextWriterAttribute.Value, "0");
- writer.RenderBeginTag(HtmlTextWriterTag.Option);
- writer.Write("Master");
- writer.RenderEndTag();
- writer.AddAttribute(HtmlTextWriterAttribute.Value, "1");
- writer.RenderBeginTag(HtmlTextWriterTag.Option);
- writer.Write("Visa");
- writer.RenderEndTag();
- writer.RenderEndTag();
- writer.RenderEndTag();
- writer.RenderEndTag();
- //****************************************************************************
- writer.RenderBeginTag(HtmlTextWriterTag.Tr);
- writer.RenderBeginTag(HtmlTextWriterTag.Td);
- writer.Write(CreditCardNo);
- writer.RenderEndTag();
- writer.RenderBeginTag(HtmlTextWriterTag.Td);
- writer.AddAttribute(HtmlTextWriterAttribute.Id, CreditCardNoTextId);
- writer.AddAttribute(HtmlTextWriterAttribute.Name, CreditCardNoTextName);
- writer.AddAttribute(HtmlTextWriterAttribute.Type, "text");
- writer.RenderBeginTag(HtmlTextWriterTag.Input);
- writer.RenderEndTag();
- writer.RenderEndTag();
- writer.RenderEndTag();
- //**************************************************************************************
- writer.RenderBeginTag(HtmlTextWriterTag.Tr);
- writer.RenderBeginTag(HtmlTextWriterTag.Td);
- writer.Write(CardholderName);
- writer.RenderEndTag();
- writer.RenderBeginTag(HtmlTextWriterTag.Td);
- writer.AddAttribute(HtmlTextWriterAttribute.Name, CardholderNameTextName);
- writer.AddAttribute(HtmlTextWriterAttribute.Id, CardholderNameTextId);
- writer.AddAttribute(HtmlTextWriterAttribute.Type, "text");
- writer.RenderBeginTag(HtmlTextWriterTag.Input);
- writer.RenderEndTag();
- writer.RenderEndTag();
- writer.RenderEndTag();
- //***************************************************************************************
- writer.RenderBeginTag(HtmlTextWriterTag.Tr);
- writer.RenderBeginTag(HtmlTextWriterTag.Td);
- writer.Write(ExpirationDate);
- writer.RenderEndTag();
- writer.RenderBeginTag(HtmlTextWriterTag.Td);
- writer.AddAttribute(HtmlTextWriterAttribute.Name, MonthListName);
- writer.AddAttribute(HtmlTextWriterAttribute.Id, MonthListId);
- writer.RenderBeginTag(HtmlTextWriterTag.Select);
- for (int month = 1; month < 13; month++)
- {
- writer.AddAttribute(HtmlTextWriterAttribute.Value, month.ToString());
- writer.RenderBeginTag(HtmlTextWriterTag.Option);
- writer.Write(month.ToString());
- writer.RenderEndTag();
- }
- writer.RenderEndTag();
- /////////////////////////////////////
- writer.Write(" ");
- /////////////////////////////////////
- writer.AddAttribute(HtmlTextWriterAttribute.Name, YearListName);
- writer.AddAttribute(HtmlTextWriterAttribute.Id, YearListId);
- writer.RenderBeginTag(HtmlTextWriterTag.Select);
- for (int year = 2008; year < 2015; year++)
- {
- writer.AddAttribute(HtmlTextWriterAttribute.Value, year.ToString());
- writer.RenderBeginTag(HtmlTextWriterTag.Option);
- writer.Write(year.ToString());
- writer.RenderEndTag();
- }
- writer.RenderEndTag();
- writer.RenderEndTag();
- writer.RenderEndTag();
- //*****************************************************************************
- writer.RenderBeginTag(HtmlTextWriterTag.Tr);
- writer.AddAttribute(HtmlTextWriterAttribute.Colspan, "2");
- writer.AddAttribute(HtmlTextWriterAttribute.Align, "center");
- writer.RenderBeginTag(HtmlTextWriterTag.Td);
- writer.AddAttribute(HtmlTextWriterAttribute.Name, SubmitButtonName);
- writer.AddAttribute(HtmlTextWriterAttribute.Value, SubmitButtonText);
- writer.AddAttribute(HtmlTextWriterAttribute.Id, SubmitButtonId);
- writer.AddAttribute(HtmlTextWriterAttribute.Type, "submit");
- writer.RenderBeginTag(HtmlTextWriterTag.Input);
- writer.RenderEndTag();
- writer.RenderEndTag();
- writer.RenderEndTag();
- //******************************************************************************
- }
这样就完了,大家看看上面的代码,很熟悉吧,是啊,只是把我们之前的代码分割开了,写在不同的地方!
最后的那个RendEndTag(),你不写!因为,你override那个TagKey时,就已经调用了结束标记的方法。这样,一个继承WebControl的控件就完了!
好了,写完了:完整的代码如下:
- 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 CreditCardForm5 : WebControl
- {
- #region 重写包含标记
- protected override Style CreateControlStyle()
- {
- return new TableStyle(ViewState);
- }
- protected override HtmlTextWriterTag TagKey
- {
- get
- {
- return HtmlTextWriterTag.Table;
- }
- }
- //public virtual string BackImageUrl
- //{
- // get
- // {
- // return ((TableStyle)ControlStyle).BackImageUrl;
- // }
- // set
- // {
- // ((TableStyle)ControlStyle).BackImageUrl = value;
- // }
- //}
- #endregion
- #region ID
- protected virtual string PaymentMethodListId
- {
- get
- {
- return "PaymentMethod";
- }
- }
- protected virtual string CreditCardNoTextId
- {
- get
- {
- return "CreditCardNo";
- }
- }
- protected virtual string CardholderNameTextId
- {
- get
- {
- return "CardholderName";
- }
- }
- protected virtual string MonthListId
- {
- get
- {
- return "Month";
- }
- }
- protected virtual string YearListId
- {
- get
- {
- return "Year";
- }
- }
- protected virtual string SubmitButtonId
- {
- get
- {
- return "Submit";
- }
- }
- #endregion
- #region name
- protected virtual string PaymentMethodListName
- {
- get
- {
- return "PaymentMethod";
- }
- }
- protected virtual string CreditCardNoTextName
- {
- get
- {
- return "CreditCardNo";
- }
- }
- protected virtual string CardholderNameTextName
- {
- get
- {
- return "CardholderName";
- }
- }
- protected virtual string MonthListName
- {
- get
- {
- return "Month";
- }
- }
- protected virtual string YearListName
- {
- get
- {
- return "Year";
- }
- }
- protected virtual string SubmitButtonName
- {
- get
- {
- return "Sumit";
- }
- }
- #endregion
- #region 属性
- public virtual string PaymentMethod
- {
- get
- {
- return ViewState["PaymentMethod"] != null ? (string)ViewState["PaymentMethod"] : "支付方式";
- }
- set
- {
- ViewState["PaymentMethod"] = value;
- }
- }
- public virtual string CreditCardNo
- {
- get
- {
- return ViewState["CreditCardNo"] != null ? (string)ViewState["CreditCardNo"] : "信用卡号";
- }
- set
- {
- ViewState["CreditCardNo"] = value;
- }
- }
- public virtual string CardholderName
- {
- get
- {
- return ViewState["CardholderName"] != null ? (string)ViewState["CardholderName"] : "持卡人";
- }
- set
- {
- ViewState["CreditCardName"] = value;
- }
- }
- public virtual string ExpirationDate
- {
- get
- {
- return ViewState["ExpirationDate"] != null ? (string)ViewState["ExpirationDate"] : "过期时间";
- }
- set
- {
- ViewState["ExpirationDate"] = value;
- }
- }
- public virtual string SubmitButtonText
- {
- get
- {
- return ViewState["SubmitButtonText"] != null ? (string)ViewState["SubmitButtonText"] : "提交";
- }
- set
- {
- ViewState["SubmitButtonText"] = value;
- }
- }
- #endregion
- protected override void RenderContents(HtmlTextWriter writer)
- {
- writer.RenderBeginTag(HtmlTextWriterTag.Tr);
- writer.RenderBeginTag(HtmlTextWriterTag.Td);
- writer.Write(PaymentMethod);
- writer.RenderEndTag();
- writer.RenderBeginTag(HtmlTextWriterTag.Td);
- writer.AddAttribute(HtmlTextWriterAttribute.Id, PaymentMethodListId);
- writer.AddAttribute(HtmlTextWriterAttribute.Name, PaymentMethodListName);
- writer.AddStyleAttribute(HtmlTextWriterStyle.Width, "100%");
- writer.RenderBeginTag(HtmlTextWriterTag.Select);
- writer.AddAttribute(HtmlTextWriterAttribute.Value, "0");
- writer.RenderBeginTag(HtmlTextWriterTag.Option);
- writer.Write("Master");
- writer.RenderEndTag();
- writer.AddAttribute(HtmlTextWriterAttribute.Value, "1");
- writer.RenderBeginTag(HtmlTextWriterTag.Option);
- writer.Write("Visa");
- writer.RenderEndTag();
- writer.RenderEndTag();
- writer.RenderEndTag();
- writer.RenderEndTag();
- //****************************************************************************
- writer.RenderBeginTag(HtmlTextWriterTag.Tr);
- writer.RenderBeginTag(HtmlTextWriterTag.Td);
- writer.Write(CreditCardNo);
- writer.RenderEndTag();
- writer.RenderBeginTag(HtmlTextWriterTag.Td);
- writer.AddAttribute(HtmlTextWriterAttribute.Id, CreditCardNoTextId);
- writer.AddAttribute(HtmlTextWriterAttribute.Name, CreditCardNoTextName);
- writer.AddAttribute(HtmlTextWriterAttribute.Type, "text");
- writer.RenderBeginTag(HtmlTextWriterTag.Input);
- writer.RenderEndTag();
- writer.RenderEndTag();
- writer.RenderEndTag();
- //**************************************************************************************
- writer.RenderBeginTag(HtmlTextWriterTag.Tr);
- writer.RenderBeginTag(HtmlTextWriterTag.Td);
- writer.Write(CardholderName);
- writer.RenderEndTag();
- writer.RenderBeginTag(HtmlTextWriterTag.Td);
- writer.AddAttribute(HtmlTextWriterAttribute.Name, CardholderNameTextName);
- writer.AddAttribute(HtmlTextWriterAttribute.Id, CardholderNameTextId);
- writer.AddAttribute(HtmlTextWriterAttribute.Type, "text");
- writer.RenderBeginTag(HtmlTextWriterTag.Input);
- writer.RenderEndTag();
- writer.RenderEndTag();
- writer.RenderEndTag();
- //***************************************************************************************
- writer.RenderBeginTag(HtmlTextWriterTag.Tr);
- writer.RenderBeginTag(HtmlTextWriterTag.Td);
- writer.Write(ExpirationDate);
- writer.RenderEndTag();
- writer.RenderBeginTag(HtmlTextWriterTag.Td);
- writer.AddAttribute(HtmlTextWriterAttribute.Name, MonthListName);
- writer.AddAttribute(HtmlTextWriterAttribute.Id, MonthListId);
- writer.RenderBeginTag(HtmlTextWriterTag.Select);
- for (int month = 1; month < 13; month++)
- {
- writer.AddAttribute(HtmlTextWriterAttribute.Value, month.ToString());
- writer.RenderBeginTag(HtmlTextWriterTag.Option);
- writer.Write(month.ToString());
- writer.RenderEndTag();
- }
- writer.RenderEndTag();
- /////////////////////////////////////
- writer.Write(" ");
- /////////////////////////////////////
- writer.AddAttribute(HtmlTextWriterAttribute.Name, YearListName);
- writer.AddAttribute(HtmlTextWriterAttribute.Id, YearListId);
- writer.RenderBeginTag(HtmlTextWriterTag.Select);
- for (int year = 2008; year < 2015; year++)
- {
- writer.AddAttribute(HtmlTextWriterAttribute.Value, year.ToString());
- writer.RenderBeginTag(HtmlTextWriterTag.Option);
- writer.Write(year.ToString());
- writer.RenderEndTag();
- }
- writer.RenderEndTag();
- writer.RenderEndTag();
- writer.RenderEndTag();
- //*****************************************************************************
- writer.RenderBeginTag(HtmlTextWriterTag.Tr);
- writer.AddAttribute(HtmlTextWriterAttribute.Colspan, "2");
- writer.AddAttribute(HtmlTextWriterAttribute.Align, "center");
- writer.RenderBeginTag(HtmlTextWriterTag.Td);
- writer.AddAttribute(HtmlTextWriterAttribute.Name, SubmitButtonName);
- writer.AddAttribute(HtmlTextWriterAttribute.Value, SubmitButtonText);
- writer.AddAttribute(HtmlTextWriterAttribute.Id, SubmitButtonId);
- writer.AddAttribute(HtmlTextWriterAttribute.Type, "submit");
- writer.RenderBeginTag(HtmlTextWriterTag.Input);
- writer.RenderEndTag();
- writer.RenderEndTag();
- writer.RenderEndTag();
- //******************************************************************************
- }
- }
- }
希望大家继续支持啊!谢谢!