The two basic types of controls are fully rendered and composite controls. When you build a fully rendered control, you start from scratch. You specify all the HTML content that the control renders to the browser. When you create a composite control, on the other hand, you build a new control from existing controls.
Typically, when building a basic control, you inherit your new control from one of the following base classes:
System.Web.UI.Control
System.Web.UI.WebControls.WebControl
System.Web.UI.WebControls.CompositeControl
The CompositeControl class inherits from the WebControl class, which inherits from the Control class. Each of these base classes adds additional functionality.
Building Rendered Controls
Let’s start by creating a simple fully rendered control. When you create a fully rendered control, you take on the responsibility of specifying all the HTML content that the control renders to the browser.
Create new VB Web Application Project from File Menu and let’s name it NHSWebApplication. After Creating Web Application project just right click on App_Code folder (if not in solution then first create folder named App_Code) and add one class file name TestControl.vb.
Note: Any code added to the App_Code folder is compiled dynamically.
The Code of TestControl.vb file is as shown below
‘Namespace Declared
Namespace NHSWebApplication
‘TestContril Class is inherited from base class CONTROL
Public Class TestControl
Inherits Control
‘Declaring Local Variables for Getting and Setting Value of ROWS and COLUMNS attribute
‘assigned from HTML code of ASPX page
Private _Rows As Integer
Private _Columns As Integer
‘Declaring Properties (Attributes) of control to set ROWS from HTML code of ASPX Page
Public Property Rows() As Integer
Get
Return _Rows
End Get
Set(ByVal value As Integer)
_Rows = value
End Set
End Property
‘Declaring Properties (Attributes) of control to set COLUMNS from HTML code of ASPX Page
Public Property Columns() As Integer
Get
Return _Columns
End Get
Set(ByVal value As Integer)
_Columns = value
End Set
End Property
‘Overrides the RENDER method to draw html content
Protected Overrides Sub Render(ByVal writer As HtmlTextWriter)
writer.RenderBeginTag(HtmlTextWriterTag.Table)
‘First loop to create Rows
For i As Integer = 0 To _Rows – 1
writer.RenderBeginTag(HtmlTextWriterTag.Tr)
‘Inner loop to Create Columns
For j As Integer = 0 To _Columns – 1
writer.AddAttribute(“Style”, “border:solid 1px #000000″)
writer.RenderBeginTag(HtmlTextWriterTag.Td)
writer.Write(“Rendering Costom Control”)
writer.RenderEndTag()
Next
writer.RenderEndTag()
Next
End Sub
‘End of the Rendering of Custom control
End Class
End Namespace
As we see in above code RENDER method is override and the object of HtmlTextWriter class is passed to HTML Tag that needs to be rendered. For example
writer.RenderBeginTag(HtmlTextWriterTag.Table) same as <Table>
writer.RenderBeginTag(HtmlTextWriterTag.Tr) same as <tr>
writer.RenderBeginTag(HtmlTextWriterTag.Td) same as <td>
Attributes of each of the Tag is added using
writer.AddAttribute(“Style”, “border:solid 1px #000000″)
and it is same as
style=”border:solid 1px #000000)
so After each iteration it will create specified row and columns with specified format.
Now just build your application and then add new Web Form. Let’s say TestCustomControl.aspx. Open its design view or HTML view and see the Toolbox. You will find the custom control named TestControl. Just drag it on Design view or html code. See sample code of ASPX Page below.
<html xmlns=”http://www.w3.org/1999/xhtml” >
<head runat=”server”>
<title>Untitled Page</title>
</head>
<body>
<form id=”form1″ runat=”server”>
<div>
<cc2:TestControl ID=”TestControl1″ runat=”server” Rows=”2″ Columns=”3″>
</cc2:TestControl>
</div>
</form>
</body>
</html>
It will render a custom control on web form with Table having 2 rows and 3 columns with 1px Black border
|
Rendering Costom Control |
Rendering Costom Control |
Rendering Costom Control |
|
Rendering Costom Control |
Rendering Costom Control |
Rendering Costom Control |
Hope, this article will help you to understand how to build custom rendered control. I will write about building composite control soon.
Fed up with getting low amounts of useless visitors to your website? Well i have good news. Maybe you already heard of the new underground secret product called Auto Traffic Avalanche that I myself use to generate $800 on the daily basis completely on AUTOPILOT. There’s no need to say anything more. Just watch the video on AutoTrafficAv.info before it’s gone!
Gee wilkilers, that’s such a great post!