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
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.
|
