Creating User Controls ASP.NET

One of ASP.NET’s strongest point as a framework are its handy controls that are available to web developers, these are smart little modules that you can easily drag and drop on to your page or inside another control. Although ASP.NET especially the 3.5 provide more controls than one could use for a project, you still find a need to make your own custom one, and in this article I’ll show you how easy it is to create a user controls.

An obvious part you can easily spot is it’s file extension, ie., user controls has .ascx extension and not aspx this is to prevent user control’s file to not be executed as a standalone Web Forms page.

It’s very easy to create one, first you need to ‘add new item’ on your solution(usually when you right click on your solution name it will give you this option), then once a window pop-up you would need to select ‘Web User Control’ icon to create a new user control you can always rename your file later on.

For instance you decided to create control that displays google maps after coding your google api’s in this control you can include this to any page using the Register Directive like this:

<%@ Register TagPrefix=”GoogleMapControl” TagName=”Message” Src=”LoadGooglemap.ascx” %>

TagPrefix serves as your unique namespace for your user control, this avoids clashing with your other controls inside the page. The Src attribute is the virtual path to the user control – like in our example “LoadGoogleMap.ascx” or “/MyApp/Include/LoadGoogleMap.ascx”. After registering the user control, you may place the user control tag in the Web Forms page just as you would an ordinary server control (including of course the runat=”server” attribute), like this :

This is how it will look like on your page:

<%@ Page Language=”C#” %>
<%@ Register TagPrefix=”GoogleMapControl” TagName=”Message” Src=”LoadGooglemap.ascx” %>

A Simple User Control

Your LoadGoogleMap.ascx looks something like this :

This is a simple message user control!

———————————————–

Another Simple way to include your user controls is to drag and drop them
on your page from your solution window (don’t forget to turn on your ‘design’
view on your solution page’)

Exposing User Control Properties for use in other web forms

Take note that everytime a Web Form page is treated as a control, its public fields and methods (Web Form) becomes public properties (that is, tag attributes) and methods of the control as well. In the next example I will show how an extension of the previous user control adds two public String fields.
Notice also that these fields can be set either declaratively or programmatically in the containing page.

This is how your aspx would look like:

<%@ Register TagPrefix=”GoogleMapControl” TagName=”Message” Src=”LoadGoogleMap.ascx” %>

A Simple User Control w/ Properties

And this is how your control would look like:
<script runat=server language=C# >
public String Color = "red";
public String Text = "This is a google map title text!";
</script >

And if you want to have a full control on your coding you might want to consider
as it can also be done Programmatically create your user controls just as an ordinary
server control.

here it is.

Control Con1 = LoadControl(“LoadGoogleMap.ascx”)
CType(Con1, (GoogleMap)).Category = “business”
Page.Controls.Add(con1)

And you can access it like this

<%@ Control ClassName=”GoogleMap” %>

notice that you just have to pass the object GoogleMap since you used the object Page.Controls.Add

Hope this helped you understand how the ASP.NET user control works.