How to create a user control and use it in the content page or master page?

SheoNarayan
Posted by in ASP.NET category on for Beginner level | Points: 250 | Views : 8165 red flag

In this article, we shall learn how to create a user control and use it in the content pages or master pages.
As per this post, A user control is a user-authored server control that enables an ASP.NET page to be re-used as a server control. An ASP.NET user control is authored declaratively and persisted as a text file with an .ascx extension. The ASP.NET page framework compiles a user control on the fly to a class that derives from the System.Web.UI.UserControl class.

In order to create a new user control, right click the project and select “Web User Control” (.ascx file) from the dialogue box as displayed in the picture below.

Get hundreds of .NET Tips and Tricks here.



ASCX Page (USER CONTROL)

Keep some links or other content you want to keep in the user control. In my case I have kept some links in this page.

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

<div style="background-color: #f0f0f0; padding: 5px;">

<a href="Default.aspx" title="Home">Home</a> | <a href="Page1.aspx" title="Page 1">Page

1</a> | <a href="Page2.aspx" title="Page 2">Page 2</a>

<hr /> </div>

ASPX Page

<%@ page language="C#" autoeventwireup="true" codefile="Copy of Default.aspx.cs"

inherits="_Default" %>

<%@ register src="~/MenuControl.ascx" tagprefix="uc1" tagname="Menu" %>

<!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 id="Head1" runat="server">

<title></title>

</head>

<body>

<form id="form1" runat="server">

<div>

<uc1:Menu runat="server" ID="Menu1" />

<h1>Page 1</h1>

</div>

</form>

</body>

</html>

In the above code snippet, we have kept some hyperlinks (anchor tags) in the .ascx (user control) page. We can keep any number of html or asp.net server controls onto the user control. In the .aspx page we have registered the user control using the Register directives where 
  • Src is the path of the .ascx page (user control)
  • TagPrefix is the namespace we want to associate for this control – it can be any string
  • TagName is the name we want to associate for this control – it can be any string
To use this tag, we can keep the TagName and TagPrefix of the registered user control on the .aspx page as we do for normal asp.net server controls and the content of the user control shall appear on the page as displayed in the picture below.

OUTPUT


In the same way we can use this User control in the master page as well.

Hope this simple article should help the beginners. Stay tuned for the next article in this series.

Thanks for reading.
Page copy protected against web site content infringement by Copyscape

About the Author

SheoNarayan
Full Name: Sheo Narayan
Member Level: HonoraryPlatinum
Member Status: Administrator
Member Since: 7/8/2008 6:32:14 PM
Country: India
Regards, Sheo Narayan http://www.dotnetfunda.com
http://www.snarayan.com
Ex-Microsoft MVP, Author, Writer, Mentor & architecting applications since year 2001. Connect me on http://www.facebook.com/sheo.narayan | https://twitter.com/sheonarayan | http://www.linkedin.com/in/sheonarayan

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)