Rendering Custom Databound Controls in ASP.Net

Welcome to TheCredence.com - You may like to subscribe to our RSS feed to stay updated.

The job of each server-side control is to render a particular area of the asp page. The page contains a list of such controls which were added by the coder and when the time to show the page to the user come every control in that list is called to render itself. The supported function of predefining the way controls render themselves give the coder to express a particular data in unlimited ways.

How Custom DataBound Controls works

Every server-side control in ASP.NET derives from System.Web.UI.Control even the Page class. The Control class has a “Render” virtual function with a single parameter of type HtmlTextWriter which is responsible for how the control will be presented to user.

Practice Rendering Custom ontrols

The best way to introduce the benefits of rendering custom controls is the practice method. Let’s assume we have the following table in SQL

The page we are going to create should show every user from the database who has article_result more than ‘0’. So follow the next steps:
1. Create a simple Web site containing one default.aspx page.
2. Build the data table above or use another data source.
3. Create a new Web Control library.

4. Declare in the control appropriate dataset.
5. Override the RenderContents function.

 
protected override void RenderContents(HtmlTextWriter output)
        {
            if (!DesignMode)
            {
                String s = "";
                s += (@"
<table  >");
 
                s += (@"
<tr>");
                foreach (DataColumn c in UserDataSet.Columns)
                {
	            s += (@"
<td border=""2"" style=""width: 130px;
                    background-color:Silver"">");
                    s += c.ColumnName;
                    s += (@"
<td/>");
                }
                s += (@"
<tr/>");
                foreach (DataRow dr in UserDataSet.Rows)
                {
                    s += (@"
<tr>");
                    foreach (DataColumn c in dr.Table.Columns)
                    {
                        s += (@"
<td border=""1"" style=""width: 130px;
                        background-color:WhiteSmoke"">");
                        if (dr.Table.Columns.IndexOf(c) == 2)
                        {
                            for (int i = 0; i < (int)dr[c]; i++)
                            {
                                s += ("X");
                            }
                        }
                        else
                        {
                            s += dr[c].ToString();
                        }
                        s += (@"
<td/>");
                    }
                    s += (@"
<tr/>");
                }
 
                output.Write(s);
            }
            else
            {
                output.Write("Design mode, no data loaded!");
            }
        }

6. Put the control in the default page and fill the dataset with data.

 
<%@ Page Language="C#" AutoEventWireup="true"
     CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="MyWebCustomControl"
     Namespace="MyWebCustomControl" TagPrefix="cc1" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div style="text-align: center">
        <cc1:webcustomcontrol1 id="WebCustomControl1_1" runat="server"
        height="35px" width="420px"></cc1:webcustomcontrol1>
    </div>
</form>
 
</body>
</html>
protected void Page_Load(object sender, EventArgs e)
{
UserDataSetTableAdapters.GetUsersWithArticleResultTableAdapter da =
   new UserDataSetTableAdapters.GetUsersWithArticleResultTableAdapter();
 
WebCustomControl1_1.UserDataSet = (DataTable)da.GetData();
}

And here is the result.

This reminds to a simple databound table except the third column, but in fact changing the code in RenderContents function makes data presentation very flexible. Server controls gives the coder complete control over the generated html. The given sample custom rendered control is not finished enough to be served to the end user. Custom rendered controls usually manage a set of properties, fire events to their hosts, and render snapshots of themselves to their hosts.
The code above is not the best example for independence of browser version. In ASP.NET 2.0 is added an adaptive rendering model, which inserts only those html tags and elements supported by the browser.