User Controls in .NET PDF Print E-mail
User Rating: / 0
PoorBest 
Monday, 09 March 2009
HTML clipboard

User Controls are used in the great amount of applications in .NET. Many of them have Enterprise status and cost money. I won't speak here about the advantages of User Controls. People have done it already.

In ASP we used SSI include files, wrote functions inside them And we called them from the page: call MyFunction

But, in .NET we can do the same in the smart way. It is possible to build the application as one builds a house with blocks.

In this article I will demonstrate 2 mechanisms (Looking through the internet I have not find similar way) I'm using these mechanismin all applications And they moved with me from ASP to .NET (being changed of course)

1. Header and Footer

2. Graphical resizable frames around tables.



Mini Project includes:

1. "Business Logic" Class (we need some data)

Components/Person.cs

2. Controls :

Controls/Draw_StartHTMLHeader.ascx

Controls/Draw_HTMLFooter.ascx

Controls/Draw_UpBorder.ascx

Controls/Draw_BorderStart.ascx

Controls/Draw_EndBorder.ascx

Controls/Draw_BorderEnd.ascx

3. Styles :

CSS/graphics.css

4. Used in Draw_HTMLFooter :

Javascript/Status.js

5. Test Pages :

Main/FirstPage.aspx

Main/SecondPage.aspx



Header and Footer 

//Header//Draw_StartHTMLHeader.ascx + Codebehind://=

//======//CODEBEHINDusing System;

using System.IO;



namespace HTMLControls.Controls

{

   public class Draw_StartHTMLHeader : System.Web.UI.UserControl

   {

      public string _title = "";

      public string _charset = "";

      public string _styles = "";



      public string Title

      {

         set { _title = value; }

      }



      public string Charset

      {

         set { _charset = value; }

      }



      public string Styles

      {

         set { _styles = value; }

      }

   }

}

//CODEBEHIND END//EN">//======//Status.jsnew Date();

      self.status = today.toLocaleString();

   }





//Footer//Draw_HTMLFooter.ascx://=====================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional
<html>
<head>
<title><%=_title %></title>
<meta http-equiv="content-type"  content="text/html; 
charset=<%=_charset %>">
<meta http-equiv="expires"       content="-1">
<meta http-equiv="pragma"        content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<!-----  *******  STYLES  ********* --------------->
<link rel="stylesheet" href="<%=_styles %>" type="text/css">
Clock();
function Clock()
{
window.setTimeout("Clock()", 1000);
today = 
<script language="JavaScript" 
src="../Javascript/Status.js"></script>
</body>
</html>

Footer, besides trivial ending of HTML, shows real time in Status Bar



Header gives us the possibility to use a single line of code instead of 10 (title, charset, styles - parameters) Pay attention to Codebehind. Easy!

Graphical resizable frames around tables.

In order to fill our interface with data lets write class Person 

Person.cs

//=====using System;

using System.Web;

using System.Collections;



namespace HTMLControls.Components

{

   public class Person : System.Web.UI.Page

   {

      int _age = 0;

      string _name = "";



      public Person()

      {

      }



      public Person(string name, int age)

      {

         this._name = name;

         this._age = age;

      }



      public int Age

      {

         get { return _age; }

         set

         {

            if (value < 0)

               throw new ArgumentException("The 

                    age must be a positive number");

            _age = value;

         }

      }



      public string Name

      {

         get { return _name;  }

         set { _name = value; }

      }

   }

}

//=======================================================

Many times we need to draw beautiful frame, lets say around the table, frame has to be resizable in horizontal and vertical axis.

In order to do this we need to cut gifs in the right way (ask web designer) 4 corners and 4 square bars fragments (uf...) And write a code, there would be many of it. :(



But we will do it another way:

//=========================================
//CONTROLS:
//1. Draw_UpBorder
//-----------------------------------------
   <tr>
      <td><img src="../Images/Desktop/left_up_corner.gif"
        border="0"></td>
      <td background="../Images/Desktop/up_border.gif"
        border="0"><img src="../Images/1px_0.gif"
            border="0"></td>
      <td><img src="../Images/Desktop/right_up_corner.gif"
        border="0"></td>
   </tr>

//2. Draw_BorderStart
//-----------------------------------------
   <tr>
      <td background="../Images/Desktop/left_border.gif" border="0"
            width="4"><img src="../Images/1px_0.gif"
            border="0" style="width:4px;"></td>
      <td>

.............................
.............................
.............................

//3. Draw_BorderEnd
//-----------------------------------------
      </td>
      <td background="../Images/Desktop/right_border.gif" border="0"
        width="4"><img src="../Images/1px_0.gif"
            border="0" style="width:4px;"></td>
   </tr>

//4. Draw_EndBorder
//-----------------------------------------
   <tr>
      <td><img src="../Images/Desktop/left_down_corner.gif"
        border="0"></td>
      <td background="../Images/Desktop/down_border.gif"
        border="0"><img src="../Images/1px_0.gif"
            border="0"></td>
      <td><img src="../Images/Desktop/right_down_corner.gif"
        border="0"></td>
   </tr>
//=========================================

The order in the page is the following:

1. Open table < table >

2. Draw_UpBorder, Draw_BorderStart - the order is significant

3. Table with Data

4. Draw_BorderEnd, Draw_EndBorder - the order is significant

5. Close table < / table >

Lets test:

//FirstPage.aspx
//=======================================================
//CODEBEHIND

using System;
using System.Collections;
using HTMLControls.Components;

namespace HTMLControls.Main
{
   public class FirstPage : System.Web.UI.Page
   {
      protected System.Web.UI.WebControls.DataGrid gridPerson;
      void Page_Load(object sender, EventArgs e)
      {
         ArrayList coll = new ArrayList();
         coll.Add(new Person("Person 1", 10));
         coll.Add(new Person("Person 2", 20));
         coll.Add(new Person("Person 3", 30));
         coll.Add(new Person("Person 4", 40));
         coll.Add(new Person("Person 5", 50));
         coll.Add(new Person("Person 6", 60));
         coll.Add(new Person("Person 7", 10));
         coll.Add(new Person("Person 8", 20));
         coll.Add(new Person("Person 9", 30));
         coll.Add(new Person("Person 10", 40));

         gridPerson.DataSource = coll;
         gridPerson.DataBind();
      }
   }
}
//CODEBEHIND END
//Filling DataGrid, using our class Person


<%@ Page language="c#" CodeBehind="FirstPage.aspx.cs"
            Inherits="HTMLControls.Main.FirstPage" %>
<%@ Import Namespace="HTMLControls.Components" %>
<%@ Register TagPrefix="HTMLControls" TagName="Draw_StartHTMLHeader"
    src="../Controls/Draw_StartHTMLHeader.ascx" %>
<%@ Register TagPrefix="HTMLControls" TagName="Draw_UpBorder"      
    src="../Controls/Draw_UpBorder.ascx"        %>
<%@ Register TagPrefix="HTMLControls" TagName="Draw_BorderStart"    
    src="../Controls/Draw_BorderStart.ascx"     %>
<%@ Register TagPrefix="HTMLControls" TagName="Draw_BorderEnd"      
    src="../Controls/Draw_BorderEnd.ascx"       %>
<%@ Register TagPrefix="HTMLControls" TagName="Draw_EndBorder"      
    src="../Controls/Draw_EndBorder.ascx"       %>
<%@ Register TagPrefix="HTMLControls" TagName="Draw_HTMLFooter"     
    src="../Controls/Draw_HTMLFooter.ascx"      %>

<HTMLControls:Draw_StartHTMLHeader Charset="ISO-8859-1"
    Title="FirstPage" Styles="../CSS/graphics.css" runat="server" />
</head>

<body class="lightBackGround" style="overflow:hidden;">
<form id="lg" name="lg" method="post" runat="server">
<table cellpadding="0" cellspacing="0" border="0" width="450"
    align="center">
<HTMLControls:Draw_UpBorder    runat="server" />
<HTMLControls:Draw_BorderStart runat="server" />
<table align="center" border="0" width="100%" cellspacing="0"
    cellpadding="0" class="whiteBackGround">
   <tr height="30"><td class="header">
    First Page </td></tr>
   <tr><td bgcolor="#336699"><img src="../Images/1px_0.gif"
    border="0"></td></tr>
   <tr>
      <td>
         <asp:DataGrid EnableViewState="false" class="data"
        id="gridPerson" AutoGenerateColumns="false" runat="server">
            <Columns>
               <asp:TemplateColumn HeaderStyle-Font-Bold="true"
            HeaderText="<span style='padding-left:20px;'
               >Name</span>" ItemStyle-Width="250">
                  <ItemTemplate><span style="padding-left:20px;"
            ><%# ((Person)Container.DataItem).Name
                %></span></ItemTemplate>
               </asp:TemplateColumn>
               <asp:TemplateColumn HeaderStyle-Font-Bold="true"
            HeaderText="<span style='padding-left:20px;'
               >Age</span>" ItemStyle-Width="200">
                  <ItemTemplate><span style="padding-left:20px;"
            ><%# ((Person)Container.DataItem).Age %>
                </span></ItemTemplate>
               </asp:TemplateColumn>
            </Columns>
         </asp:DataGrid>
      </td>
   </tr>
</table>
<HTMLControls:Draw_BorderEnd runat="server" />
<HTMLControls:Draw_EndBorder runat="server" />
</table>
</form>
<HTMLControls:Draw_HTMLFooter runat="server" />
//=======================================================

Thats it.

SecondPage.aspx The second example is more complicated.

I wasted 1 minute to do it, using Copy-Paste



Lets test: 

//SecondPage.aspx//=====================================

======================Columns>

         </asp:DataGrid>

         <HTMLControls:Draw_BorderEnd runat="server" />

         <HTMLControls:Draw_EndBorder runat="server" />

         </table>

      </td>

   </tr>

   <tr>

      <td style="padding:10px;">

         <table cellpadding="0" cellspacing="0" border="0" width="100%" 

        align="center">

         <HTMLControls:Draw_UpBorder    runat="server" />

         <HTMLControls:Draw_BorderStart runat="server" />

         <asp:DataGrid EnableViewState="false" class="data" 

        id="gridPerson3" AutoGenerateColumns="false" 

            runat="server">

            <Columns>

               <asp:TemplateColumn HeaderStyle-Font-Bold="true" 

            HeaderText="<span style='padding-left:20px;'

                >Name</span>" ItemStyle-Width="200">

                  <ItemTemplate><span style="padding-left:20px;"

            ><%# ((Person)Container.DataItem).Name 

                %></span></ItemTemplate>

               </asp:TemplateColumn>

               <asp:TemplateColumn HeaderStyle-Font-Bold="true" 

            HeaderText="<span style='padding-left:20px;'

                >Age</span>" ItemStyle-Width="150">

                  <ItemTemplate><span style="padding-left:20px;"

            ><%# ((Person)Container.DataItem).Age 

                %></span></ItemTemplate>

               </asp:TemplateColumn>

            </Columns>

         </asp:DataGrid>

         <HTMLControls:Draw_BorderEnd runat="server" />

         <HTMLControls:Draw_EndBorder runat="server" />

         </table>

      </td>

      <td style="padding:10px;">

         <table cellpadding="0" cellspacing="0" border="0" width="100%" 

        align="center">

         <HTMLControls:Draw_UpBorder    runat="server" />

         <HTMLControls:Draw_BorderStart runat="server" />

         <asp:DataGrid EnableViewState="false" class="data" id="gridPerson4"

        AutoGenerateColumns="false" runat="server">

            <Columns>

               <asp:TemplateColumn HeaderStyle-Font-Bold="true" 

            HeaderText="<span style='padding-left:20px;'

                >Name</span>" ItemStyle-Width="200">

                  <ItemTemplate><span style="padding-left:20px;"

            ><%# ((Person)Container.DataItem).Name 

                %></span></ItemTemplate>

               </asp:TemplateColumn>

               <asp:TemplateColumn HeaderStyle-Font-Bold="true" 

            HeaderText="<span style='padding-left:20px;'

                >Age</span>" ItemStyle-Width="150">

                  <ItemTemplate><span style="padding-left:20px;"

            ><%# ((Person)Container.DataItem).Age 

                %></span></ItemTemplate>

               </asp:TemplateColumn>

            </Columns>

         </asp:DataGrid>

         <HTMLControls:Draw_BorderEnd runat="server" />

         <HTMLControls:Draw_EndBorder runat="server" />

         </table>

      </td>

   </tr>

</table>

<HTMLControls:Draw_BorderEnd runat="server" />

<HTMLControls:Draw_EndBorder runat="server" />

</table>

</form>

<HTMLControls:Draw_HTMLFooter runat="server" />
<%@ Page language="c#" CodeBehind="SecondPage.aspx.cs" 
Inherits="HTMLControls.Main.SecondPage" %>
<%@ Import Namespace="HTMLControls.Components" %>
<%@ Register TagPrefix="HTMLControls" TagName="Draw_StartHTMLHeader"
src="../Controls/Draw_StartHTMLHeader.ascx" %>
<%@ Register TagPrefix="HTMLControls" TagName="Draw_UpBorder"        
src="../Controls/Draw_UpBorder.ascx"        %>
<%@ Register TagPrefix="HTMLControls" TagName="Draw_BorderStart"     
src="../Controls/Draw_BorderStart.ascx"     %>
<%@ Register TagPrefix="HTMLControls" TagName="Draw_BorderEnd"       
src="../Controls/Draw_BorderEnd.ascx"       %>
<%@ Register TagPrefix="HTMLControls" TagName="Draw_EndBorder"       
src="../Controls/Draw_EndBorder.ascx"       %>
<%@ Register TagPrefix="HTMLControls" TagName="Draw_HTMLFooter"      
src="../Controls/Draw_HTMLFooter.ascx"      %>
<HTMLControls:Draw_StartHTMLHeader Charset="ISO-8859-1" 
Title="SecondPage" Styles="../CSS/graphics.css" 
runat="server" />
</head>
<body class="lightBackGround" style="overflow:hidden;">
<form id="lg" name="lg" method="post" runat="server">
<table cellpadding="0" cellspacing="0" border="0" width="100%" 
align="center">
<HTMLControls:Draw_UpBorder    runat="server" />
<HTMLControls:Draw_BorderStart runat="server" />
<table align="center" border="0" width="100%" cellspacing="0" 
cellpadding="0" class="whiteBackGround">
<tr height="30"><td class="header" colspan="2"> 
Second Page </td></tr>
<tr><td bgcolor="#336699" colspan="2"><img 
src="../Images/1px_0.gif" border="0"></td></tr>
<tr>
<td style="padding:10px;">
<table cellpadding="0" cellspacing="0" border="0" width="100%" 
align="center">
<HTMLControls:Draw_UpBorder    runat="server" />
<HTMLControls:Draw_BorderStart runat="server" />
<asp:DataGrid EnableViewState="false" class="data" 
id="gridPerson1" AutoGenerateColumns="false" runat="server">
<Columns>
<asp:TemplateColumn HeaderStyle-Font-Bold="true" 
HeaderText="<span style='padding-left:20px;'
>Name</span>" ItemStyle-Width="200">
<ItemTemplate><span style="padding-left:20px;"
><%# ((Person)Container.DataItem).Name 
%></span></ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn HeaderStyle-Font-Bold="true" 
HeaderText="<span style='padding-left:20px;'
>Age</span>" ItemStyle-Width="150">
<ItemTemplate><span style="padding-left:20px;"
><%# ((Person)Container.DataItem).Age 
%></span></ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:DataGrid>
<HTMLControls:Draw_BorderEnd runat="server" />
<HTMLControls:Draw_EndBorder runat="server" />
</table>
</td>
<td style="padding:10px;">
<table cellpadding="0" cellspacing="0" border="0" width="100%"
align="center">
<HTMLControls:Draw_UpBorder    runat="server" />
<HTMLControls:Draw_BorderStart runat="server" />
<asp:DataGrid EnableViewState="false" class="data" 
id="gridPerson2" AutoGenerateColumns="false" 
runat="server">
<Columns>
<asp:TemplateColumn HeaderStyle-Font-Bold="true" 
HeaderText="<span style='padding-left:20px;'
>Name</span>" ItemStyle-Width="200">
<ItemTemplate><span style="padding-left:20px;"
><%# ((Person)Container.DataItem).Name 
%></span></ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn HeaderStyle-Font-Bold="true" 
HeaderText="<span style='padding-left:20px;'
>Age</span>" ItemStyle-Width="150">
<ItemTemplate><span style="padding-left:20px;"
><%# ((Person)Container.DataItem).Age 
%></span></ItemTemplate>
</asp:TemplateColumn>
</
 
< Prev   Next >
[ Back ]
School Joomla Templates and Joomla Tutorials