User Control in ASP.NET C#

Introduction

In this post I will show you how to add UserControl to your .NET web application or web site with the back end in C#. Its a very basic thing to cover in .NET and I am sure many of you are aware of this. So those are not aware of the UserControl till now they have no need to worry because this article will cover the whole thing about UserControl.

What is the purpose to use UserControl?

Usually we use master page to set a template or something static in every page. Here we will do the same, but in a different way. Here we will add the controls in one page to make it as a whole one. This is the alternate process of master page and some time its better than the master page, because you can separate each section is a page  into a different control and code it as you do. 

Difference between Master page and UserControl

In master page concept you can put all the necessary control like say menu, login or registration, header, footer in one master page and in the slave page you just  inherit those and put the different data in the ContentPlaceHolder as per your requirement. And for that you have to code of all thing within one master page. How about this if you separate the all sections (menu, login or registration, header, footer) and just add as a control (like a button or a label) into your project. This is the UserControl concept. You create control for header, footer, login, register separately, and where ever you need just add the control. One extra thing you have to do is need to add a Register tag at the top of each page, because its a user created control, not an inbuilt one.

So lets see how to create a web page adding the controls. We will create a simple web page  to do this.

Create a new project and add a new web form, add a html table for the structuring the web page. Now add a new folder named control, here all the controls will be stores. 

Here add a new item, add Web User Control named it header.ascx.

Here you can design your header section. I have just add a H1 tag within a anchor tag to redirect it to insex page. If you can want you can code in C# just like another web page. You must remember it has functionality like any other web page, but it can't run alone like the master page. it will act as a section of a page and it does not content any form.

    

Header Section

Now put the footer section, same as like header section. Now put a demo section which will content code to make you understand better how it works. We will do a simple code to show a pop up box in a UserControl. So add another control in the control folder. 

Add a new asp button on this and on button click add this code.

Response.Write("alert message goes here.");

Now here is the question how to add these into your web page. Here is the solution.
On your web page write down these code at the top of the page after Page tag.

<%@ Register Src="~/Controls/header.ascx" TagPrefix="uc1" TagName="header" %>
<%@ Register Src="~/Controls/footer.ascx" TagPrefix="uc1" TagName="footer" %>
<%@ Register Src="~/Controls/demo.ascx" TagPrefix="uc1" TagName="demo" %>

and where you want to add the controls just put down these controls.

These are your controls, do whatever you want to do with these.

See the file attached for a better experience. Run your project and test your code.

Download full source code here.

Download Now

Read More