客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
|
第二章 继承于WebControl的自定义控件
到现在为止，我已经写了三篇关于自定义控件开发的文章，很感谢大家的支持！不知道大家对我讲的方式有什么好的建议，我尽量使自定义控件的技术让更多的程序员同胞接受。好了，开发开始了！
本章还是延续上章的例子，开发一个CreditCardForm控件。
其实本章也不难，相信大家看完后，也觉得很简单！
我们首先开谈谈继承Control和WebControl的区别：其实二者最大的区别就是在，如果我们开发的控件继承WebControl，那么我们的控件就支持更多的CSS样式。而继承于Control的自定义控件的样式相对就少些。
其实还有一个区别就在开发的规范上。我们来简单的看看上一章的自定义控件的代码，主要来看看Render方法中的代码：大家只扫一眼就可以了。
}
相信这段代码大家都和熟悉。在这段代码的作用主要显示了一个table 以及table 之中的标记元素。
如果一这个控件已经写好了，加入我们想要改改table的样式，如把border设为1，或者改变显示的颜色等，那么我们就
要再次打开这段代码，修改代码。其实这就不好。为什么？
其实这个方法中的代码做了四件事： 1.显示控件最外层的包含标记，即table 2.显示最外层标记的一些属性，如border.id等 3.显示控件的主要内容 ，如，显示输入框，下拉框，按钮。 4.显示控件最外层包含标记的结束标记。
这样看来，这个方法的职责就有四个。大家应该还记得面向对象设计的原创：单一职责。虽然这个元素一般用在类上，
但是我们更加要注意，这个原则用的宗旨：使对象只有一个变化的因素。这个原则也用在方法的设计上。
就是说，我们如果想要改变最外层标记table一些属性，我们就影响了其他三个职责。同理，我们想改变其他的元素或者
内容，结果可想而知。
为此，继承WebControl的控件就更加的规范和灵活： 其实，继承于WebControl的控件的显示还是在Render方法中显示，只是这个Render方法已经不由我们来写了： 如下：
}
因为我们之前说，Render方法的职责有四个。所以WebControl的Render方法就把这些职责分离了。以后我们能就
可以独立的改变一个因素了。大家也许奇怪：不是说有四个职责吗，但是上面只是显示了三个方法，其实在
RenderBeginTag()方法中包含显示最外层标记样式的方法。
所以我们只要分别重写这三个方法，一个继承WebControl的自定义的控件就成了。不要怕，方法很多，但是很简单，而
且代码我们都懂，之前差不多都讲了的。 我想把写成后的控件给大家看看，让大家看下我们本章的目标：
大家看见没有：是不是支持的样式多了！！！
好了，我们来写吧：不难哦:)
首先看看我们要的写方法以及他们的功能：
Render(HtmlTextWriter writer)
{ //显示最外层包含标记开始的标记，即，显示<table ..> RenderBeginTag(writer); //显示table标记内的内容，如<tr><td><input />等 RenderContens(writer); //显示最外层包含标记结束标记</table RenderEndTag(writer); }
现在的思路很清晰吧，首先来显示<table....>
很简单，只要如下就可以了。
}
不要奇怪，因为RenderBeginTag（）方法内部实际是调用了这个属性来显示的最外层的包含标记的。 好了，第一步就写完了啊！简答吧！
下面来显示table的样式，因为我们的控件的最外层的标记是table，显示他的样式只要这样就OK了。
}
又写完了一部分。。不难吧！接着看啊！ 如果你的最外层的标记是<div >那么，上面的那个方法你都不用写.
下面就写了RenderContent方法，不难，只记住这个方法的职责：显示最外层标记的内容： 如下：
}
这样就完了，大家看看上面的代码，很熟悉吧，是啊，只是把我们之前的代码分割开了，写在不同的地方!
最后的那个RendEndTag()，你不写！因为，你override那个TagKey时，就已经调用了结束标记的方法。这样，一个继承WebControl的控件就完了！
好了，写完了：完整的代码如下：
327
希望大家继续支持啊！谢谢！
|
请发表评论