Web Design that taps into the haromny and vision of your dreams.

Creating User Controls in ASP.Net

Developing user controls in ASCX and C#

Written By on in C#

702 words, estimated reading time 4 minutes.

User controls are able to encapsulate your code and HTML into smaller more functional, reusable, units which can be added to an ASP page and treated as an object.

Active Server Pages (ASP.Net) Series
  1. What is ASP.Net?
  2. ASP.Net for PHP Developers
  3. Creating a Simple ASP.Net Page
  4. ASP.Net Website Navigation Using a SiteMap
  5. Using ASP.Net Master Pages and Content Pages
  6. Validating Input using ASP.Net
  7. Tracing and Remote Debug in ASP.Net
  8. Creating Custom Error Pages with ASP.Net
  9. Managing Session State in ASP.Net
  10. Using Themes and Skins in ASP.Net
  11. Creating User Controls in ASP.Net
  12. Difference between ASP.Net User and Custom Server Controls
  13. Creating Fully Themable Websites with ASP.Net
  14. Ultimate Guide to the Web.Config File
  15. Adding StyleSheets to ASP.Net via C#
  16. Extending the Web Sitemap Xml Document

User controls allow you to create your own set of objects and user interface controls within an ascx control file. You can then reference your new control in the asp page using tags as you would add any other control.

User controls are best suited to common elements of a web page, for example, navigation, login, headers and so on. A control can be shared among all the pages within an application, but not between applications without adding a control reference. Like asp pages, user controls are compiled on first use and cached in memory for subsequent requests to reduce response times.

To create a user control, select Add New Item from the solution explorer and select Web User Control from the list. This will create a new .ascx file in the root of the website. It's good practice to gather your controls together and store them in a separate folder within the website code.

An ascx control file is just like any other asp page, you can add server controls from the toolbox, it has a code behind file and looks just the same in design view and source view.

To include a user control in a host page, you can either drag the file from Solution Explorer to the design view of Visual Studio or you can use the @Register directive.

Creating a Control

Start off with a new Visual Studio or Web Developer website. Using the solution explorer create a new folder called "controls" (without quotes). Right click on it and Add New Item. Select Web User Control from the list and call it PageTitleControl.

Visual Studio will create PageTitleControl.ascx and PageTitleControl.cs for you. Add a text box and a button to the ascx page in design view and double click on the button to activate the code editor. This control will simply change the page title to whatever is keyed into the text box.

protected void Button1_Click(object sender, EventArgs e)
{
  Page.Title = TextBox1.Text;
}

Using The Control

Now go back to your Default.aspx page and switch to design view. Drag the newly created PageTitleControl.ascx onto the design view and the control will be added. If you switch to source view you will see that Visual Studio has added the following lines automatically. Notice the extra @Register tag which tells the script compiler the location of the control, tag name referrers to the name of the control and tag prefix denotes the "library" that the script is part of. These can be customised from within the source code.

 
<%@ Register Src="controls/PageTitleControl.ascx" TagName="<span style="background-color:yellow">PageTitleControl</span>" 
TagPrefix="<span style="background-color:lime">MyControls</span>" %>
 
<<span style="background-color:lime">MyControls</span>:<span style="background-color:yellow">PageTitleControl</span> ID="myPageTitleControl" runat="server" />
 
<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
 
<%@ Register Src="controls/PageTitleControl.ascx" TagName="PageTitleControl" TagPrefix="MyControls" %>
 
<!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>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
      <MyControls:PageTitleControl ID="myPageTitleControl" runat="server" />
    </div>
    </form>
</body>
</html>

Now when you build and run the project you will see a text box and button that changes the page title when you click on it.

This is only a very simple example of user controls, in reality, you will create more complex controls, which could be made of other user controls. This should give you an idea to get you started.

Last updated on: Thursday 22nd June 2017

 

Comments

There are no comments for this post. Be the first!

 

Leave a Reply

Your email address will not be published.





If you find something abusive or that does not comply with our terms or guidelines please flag it as inappropriate.

Copyright © 2001-2018 Tim Trott, all rights reserved. Web Design by Azulia Designs

This web page is licensed for your personal, private, non-commercial use only.

Disclaimer, Privacy & LegalSitemapContact Me