Using and Creating User Controls in ASP.NET

In this tutorial, we will cover the basics of ASP.NET User Controls using C#. User Controls use the extension ascx and can be placed inside of your ASP.NET code on your aspx page.

ASP.NET has lots of controls such as the DropDownList, Calendar, or Literal control. ASP.NET also lets you create your own controls. These User Controls use the extension ascx. They can be used like include files as placeholders. If you have some ASP.NET code that you use several times, you can put it in a User Control and simply reference the User Control to display the information. What makes them different from an include file is the ability to send information to the User Control. For example, if you have a Literal control inside of your User Control, you can change the Text inside of it.

Yes, it is possible to find a good web host. Sometimes it takes a while. After trying several, we went with Server Intellect and have been very happy. They are the most professional, customer service friendly and technically knowledgeable host we've found so far.

First you can start a new Web Application in Visual Studio 2008. We are going to create a User Control. You can do this by adding a new item Web User Control. This will add a WebUserControl.ascx file to your current directory. Now we will add a simple <p> tag with some random text inside of it.

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs" Inherits="WebUserControl" %> <p>Testing the Web User Control!</p>

Now we will need to open the Default.aspx page or whichever aspx page you are going to add the User Control to. Add the <%@ Register %> tag after the <%@ Page %> tag. It should look like the following.

<%@ Page Language="C#" debug="true" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <%@ Register TagPrefix="WebUserControl" TagName="theTag" Src="~/WebUserControl.ascx" %>

Now we can test the User Control we created. You will need to add the <WebUserControl:theTag /> tag to your aspx page where you'd like the User Control placed. You can also drag it from the Solutions Explorer to the Design View.

<WebUserControl:theTag Color="red" id="theUControl" Text="Do something cool!" runat="server" />

"Testing the Web User Control!" should appear where you placed the tag on your aspx page. Notice how I added a few attributes to the User Control. We are going to modify our User Control to use those attributes. You must first place a <script> tag at the top of the ascx page and make the attributes public variables.

We chose Server Intellect for its dedicated servers, for our web hosting. They have managed to handle virtually everything for us, from start to finish. And their customer service is stellar.

<script language="C#" runat="server">      public string Color="";      public string Text=""; </script> <p><font color="<%=Color %>"><%=Text %></font></p> <asp:Literal ID="LitCount" runat="server" />

Notice I also added a few variable references inside of the <p> and <font> tags. I also added a Literal control after the <p> tags. This will allow us to output the text we specify in the color we choose. Next we will cover how to set the text inside of the Literal control we added to our User Control.

Not all information will be available to us at the start of the page. Some information is passed dynamically depending on the page circumstances. This is where the ability to set the value of a control in our User Control comes in handy. For this example, we will show you how to add information to the Literal control.

Normally to dynamically change the information in the User Control you would use the code LitCount.Text = "Something different!". Unfortunately, because the control is inside of the User Control it is a little more difficult to manipulate. You will need Get and Set to change the text.

public string theLit {      get { return LitCount.Text; }      set { LitCount.Text = value; } }

This will allow you use theLit variable name to change the information inside of the Literal control. Now place the following code in your Page_Load method of the aspx page so the value will appear in the Literal control.

protected void Page_Load(object sender, EventArgs e) {      theUControl.theLit = "4"; }

We migrated our web sites to Server Intellect over one weekend and the setup was so smooth that we were up and running right away. They assisted us with everything we needed to do for all of our applications. With Server Intellect's help, we were able to avoid any headaches!

You have successfully created and used a User Control. The User Control has many applications. These are just simple techniques to help show you the basic abilities of a User Control.

Looking for more ASP.NET Database Tutorials? Click Here!