Concept of User Controls In ASP.NET

Usercontrols In ASP.NET

A usercontrol is a reusable part of page. If we want to use a particular section on different pages of website , we use the usercontrols. User-Controls increases the re-usability of the same code. A simplest example of usercontrol is Login-functionality provided by websites or it could be simply a Left Panel appearing on a website.

Simply , we need to write the code in a separate user-control file and then we can easily use that on any page we want by simply registering the user control on that page. A big advantage of the UserControl is that it can be cached, using the OutputCache functionality. We will learn in the upcoming tutorials ,how we can store our data in cache.
We can cache our complete page or even a user-control.

To create a user control , right click on the project and select Add New Item and then choose web user control from the list of possible things to add. You should now have a MyLeftPanel ascx and a MyLeftPanel ascx.cs in your project. The first is where we put our markup, and the second is our CodeBehind file. Now, if MyLeftPanel ascx is not already open and selected, do so now. You will see only one line of code, the UserControl declaration. As mentioned, this control will be displaying information about a user, so let's get started adding some markup to do so.

For example , if we have to display some data in our left panel , we will use this user control as 

<%@ Control Language="C#" AutoEventWireup="true" Codebehind="MyLeftPanel.ascx.cs" Inherits="MyWeb.UserControls.LeftPanel" EnableViewState="false" %>

<div id="userName"><%=userName%></div> //links that we want in our left panel

<div id="userCity"><%=userCity%></div>

    

<script language="javascript" type="text/javascript">

var userName = '<%=userName%>';

 function jsFunction() {

 alert(userName);

 }

</script>      

I have written a javascript function here to elaborate that we can also use javascript and jquery functions in our user control .

On ascx.cs file we can use these as properties 

protected string userName;

protected string userCity;

userName = MyClass.userName;

Now how to use this user control in our project,

Pick a page in project, or simply create a new one for the purpose, and open it. The first thing we have to do, is declare our UserControl. It can be done either in each page where it's used, or globally in the web.config file. 

There is no performance difference , but when declaring UserControls in the web.config file, the controls have to reside in a different directory than the page(s) using it. 

For now, let's just declare it within the page. Add the following line below the standard page declaration:

<%@ Register TagPrefix="My" TagName="MyLeftPanel" Src="~/MyLeftPanel.ascx" %>

Make sure that the src value matches the path to our UserControl file. Now we can use the UserControl in your page, like any other control. For instance, like this:

<My:MyLeftPanel runat="server" ID="MyLeftPanelControl" />

Now this user control will get rendered with page load. Enjoy.

Happy Coding!