Asp.Net user control tutorial

We will discuss what are user controls in asp.net and how to create and use user control in asp.net. Also, we will discuss how we can create a website in asp.net.

Asp.Net user control

User controls enable you to group logically related content and controls together so they can be used as a single unit in content pages, master pages, and inside other user controls. User control is actually a sort of mini-ASPX page in that it has a markup section and optionally a Code-Behind file in which you can write code for the control.

To some extent, they look a bit like server controls in that they can contain programming logic and presentation that you can reuse in your pages.

Why user controls are useful in asp.net?

User controls have the following similarities with normal ASPX pages:

  • They have a markup section where you can add standard markup and server controls.
  • They can be created and designed with Visual Web Developer in Markup, Design, and Split View.
  • They can contain programming logic, either inline or with a Code Behind file.

User controls have an .ascx extension instead of the regular .aspx extension.

User controls are added to the site like any other content type: through the Add New Item dialog box. Similar to pages, you get the option to choose the programming language and whether you want to place the code in a separate Code Behind file.

Although using controls for repeating content is already quite useful, they become even more useful when you add custom logic to them. By adding public properties or methods to a user control, you can influence its behavior at runtime. When you add a property to a user control, it becomes available automatically in IntelliSense and in the Properties Grid for the control in the page you’re working with, making it easy to change the behavior from an external file like a page.

User controls can greatly improve the maintainability of your site. Instead of repeating the same markup and code on many different pages in your site, you encapsulate the code in a single control, which can then be used in different areas of your site.

Some tips on Asp.Net User Controls

Don’t overuse user controls. User controls are great for encapsulating repeating content, but they also make it a little harder to manage your site because code and logic are contained in multiple files.

Keep user controls focused on a single task. Don’t create a user control that is able to display five different types of unrelated content with a property that determines what to display.

When you create user controls that contain styled markup, don’t hardcode style information like the CssClass for the server controls contained in the user control.

Here we will discuss how to create a web site. To create a web site Open Visual Studio 2010 Go to File -> New WebSite.

Then from the New Web Site template dialog box Choose Asp.Net WebSite. Then Give the path and click on OK.

Now since our web site is ready, we will now see how to create a user control. To create a user control Right click on the project then Click on Add New Item. Then from the Add New Item dialog box

Choose Web User Control, give a Name and click on Add. Then in the acsx page you can add the controls that you want. You can see the details on the attached project which you can download from the below.

Now since we have finished creating the user control, we will discuss how to add this to the page.

To add a user control to a page, we have to use the Register tag of asp.net. We have to write like below:

<%@ Register src="WebUserControl.ascx" tagname="WebUserControl" tagprefix="uc1" %>

where src is the path of the user control and tagname and tagprefix are used to call the web user control.

Now to call the user control write like below:

<TagPrefix:TagName ID:"ID" runat="server"/>. So it will be like below:
<uc1:WebUserControl ID="WebUserControl1" runat="server" />

There is also another approach to call or use user conrol. What we need to do is simply drag and drop the user control to the design of the page.

Get user control value in aspx page in asp.net

Now, we will check how we to get user control values in .aspx pages in asp.net.

Here in this example, we will show how a user will select a country from a drop-down list and the country name will appear in a label in a .aspx page.

To get the use control value in the .aspx page, first we need to add a property in the user control and then we can retrieve the value in the page through the property.

Below is the full usecontrol and page code:

User Control .aspx code:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Country.ascx.cs" Inherits="Country" %>

Select Country:
<asp:DropDownList ID="ddlCountry" runat="server" AutoPostBack="True">
<asp:ListItem Text="–Select–" Value=""></asp:ListItem>
<asp:ListItem Text="France" Value="France"></asp:ListItem>
<asp:ListItem Text="Japan" Value="Japan"></asp:ListItem>
<asp:ListItem Text="India" Value="India"></asp:ListItem>
</asp:DropDownList>

User Control .cs code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class Country : System.Web.UI.UserControl
{
public string CountryName
{
get { return ddlCountry.SelectedValue; }
set { ddlCountry.SelectedValue = value; }
}
protected void Page_Load(object sender, EventArgs e)
{
}
}

Page .aspx code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register src="Country.ascx" tagname="Country" tagprefix="uc1" %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN"

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<uc1:Country ID="Country1" runat="server" />
You have selected: <asp:Label ID="lblCountry" runat="server" Text=""></asp:Label>
</form>
</body>
</html>

Here in the page we have registered the user control.

Page .cs code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
lblCountry.Text = Country1.CountryName;
}
}

The output will come will like below.

asp.net user control

You may like following asp.net tutorials:

Here, we discussed what are asp.net user controls? What are the benefits of user controls in asp.net and how to get user control value in the aspx page in asp.net?

Donwload Hub site pdf

Download SharePoint Online Tutorial PDF FREE!

Get update on Webinars, video tutorials, training courses etc.

Bijay Kumar

I am Bijay from Odisha, India. Currently working in my own venture TSInfo Technologies in Bangalore, India. I am Microsoft Office Servers and Services (SharePoint) MVP (5 times). I works in SharePoint 2016/2013/2010, SharePoint Online Office 365 etc. Check out My MVP Profile.. I also run popular SharePoint web site SharePointSky.com

>