How to Create and Use User Controls in ASP.NET and C#

In ancient ASP code utilize and encapsulation was historically done employing a combination of are files and net categories. whereas this worked moderately well for business logic, it had been forever little fiddly for visual parts. as an example, if you needed to show a grid of information in many various places and have the grid have constant general look and feel, however be customisable for a selected page, then you either cut and affixed the hypertext mark-up language, used vogue sheets, used Associate in Nursing embody file, wrote some VBScript to get the hypertext mark-up language on the fly, or used a mix of of these ways.

It was untidy. It may even be troublesome to maneuver these parts between comes as a result of there was the ever gift drawback of guaranteeing that variable names did not conflict, that you simply had the embody file enclosed just the once (and within the correct order). Then there was the full issue of attachment the new management into existing code.

ASP .NET solves several of those problems with the introduction of User Controls. These ar self contained visual components which will be placed on an internet page within the same method as a convention intrinsic hypertext mark-up language management, and may have their attributes set during a similar fashion.

In this article i am going to gift a Title bar that has vi properties (border dimension and color, Title text and color, background and artifact. The management is embedded during a page victimization the subsequent easy syntax:

<CP:TitleBar Title="User Control Test" TextColor="green" Padding=10 runat="server" />

The easiest manner of using  Visual Studio .NET. begin a brand new internet project and right click on the project's name within the Server someone. choose 'Add...' then 'Add internet User management...' Rename the management and hit Open. The wizard produces 2 files: a .ascx file containing the visual layout, and a .ascx.cs (assuming you're operating in C#) that has the business logic.

The Visual Layout:

First we have a tendency to style the visual layout of the Title bar. We'll use the new asp:XXX controls so we have a tendency to get easy access to their attributes at runtime.

The entire .ascx file appearance like:

<%@ Control Language="c#" AutoEventWireup="false"
    Codebehind="MyUserControl.ascx.cs"
    Inherits="CodeProject.MyUserControl"
    TargetSchema="http://schemas.microsoft.com/intellisense/ie3-2nav3-0"%>
<asp:table id=OuterTable BackColor=#c0c0c0c BorderWidth=0 cellPadding=0
           cellSpacing=1 width='100%' Runat="server">
<asp:tableRow><asp:tableCell width="100%">
<asp:table id=InnerTable BackColor=#cccccc BorderWidth=0 cellPadding=0
           cellSpacing=1 width="100%" Runat="server">
<asp:tableRow<asp:tablecell HorizontalAlign=Center>
<asp:Label ID=TitleLabel Runat="server" />
</asp:tablecell></asp:tableRow>
</asp:table>
</asp:tablecell></asp:tableRow>
</asp:table>

A fairly ancient manner of making a table with a skinny border - except that we tend to ar victimisation ASP .NET controls rather than ancient markup language.

Note that if you were proscribing your viewers to victimisation id est then you'll use the border-width vogue to line the border vogue and stick to one table. However, if you've got browser four.X viewers then this may not work. ASP .NET controls can output markup language three.2 for downspec browsers like browser, thus whereas ASP .NET's promise of 'write-once, read anywhere' sounds sensible, it does not really happen in observe.

I'm not getting to go in the in's and out's of ASP .NET controls. they're fairly self instructive . simply ensure you embody the 'runat=server' bit. They help.

The backend logic:

Note the bit up the highest of the file: Codebehind="MyUserControl.ascx.cs". this can be wherever the visual layout (.ascx file) is connected with the backend logic (.ascx.cs). we'll barely scrape the surface of what this separation of logic and show will do.

Our C# code feels like the following:

namespace CodeProject
{
    using System;
   
    public abstract class MyUserControl : System.Web.UI.UserControl
    {
        public string Title       = null;
        public string TextColor   = Color.Black.Name;
        public string BackColor   = Color.Wheat.Name;
        public int    Padding     = 2;
        public string BorderColor = Color.Gray.Name;
        public int    BorderWidth = 1;
        
        protected Table OuterTable;
        protected Table InnerTable;
        protected Label TitleLabel;

        private void Page_Load(object sender, System.EventArgs e)
        {
            if (Title==null || Title=="") 
                Visible = false;
            else
            {

                OuterTable.BackColor   = Color.FromName(BorderColor);
                OuterTable.CellSpacing = BorderWidth;
                InnerTable.CellPadding = Padding;
                InnerTable.BackColor   = Color.FromName(BackColor);
                
                TitleLabel.Text        = Title;
                TitleLabel.ForeColor   = Color.FromName(TextColor);
                TitleLabel.Font.Name   = "Verdana";
                TitleLabel.Font.Bold   = true;
                TitleLabel.Font.Size   = FontUnit.Parse("13");
            }
        }

        #region Web Form Designer generated code
      
        #endregion
    }
}