11 User Controls Beginning ASP.NET in C# and VB Chapter 8

2 Objectives You will be able to Create reusable chunks of ASPX code, in the form of user controls. Include user controls in ASPX web pages. Include user controls in master pages. Modify user control content from an enclosing page.

3 What are User Controls? ASP.NET page content packaged for reuse. Replacement for “include” files. Independent, compilable component Includes both.aspx and.aspx.cs style code Actual extensions are.ascx and.ascx.cs Can be added to the web site project and put into an ASPX page like normal.NET controls. Compare to master pages Master pages wrap normal ASPX pages. User controls go inside normal ASPX pages.

4 What are User Controls? User controls cannot have top level tags: Cannot be requested directly by a web browser. Must be embedded in other web pages. User controls have a Control directive at the top of the file instead of a Page directive.

5 The Hello World of User Controls Trivial example illustrates the mechanism. A user control that puts a copyright statement on a page. This user control can be added to any ASPX.NET page to put a copyright statement on the page.

6 The Copyright User Control

7 User Control Demo Create a new C# ASP.NET empty web site called User_Control_Demo. Add C# Web Form Default.aspx Title: User Control Demo

Default.aspx 8 Run it!

Initial App in Chrome 9

10 Add a User Control Add new item to the web site Select C# Web User Control Call it Copyright.ascx

Add new item to the web site 11

Adding a Web User Control 12 Scroll down Set name to Copyright.ascx and click Add.

13 View the Source Note "Control" directive at top of page rather than "Page" directive on aspx pages.

14 Copyright.ascx.cs Note class Copyright. Inherited in Copyright.ascx.

15 Add Own HTML Control Language="C#" AutoEventWireup="true" CodeFile="Copyright.ascx.cs" Inherits="Copyright" %> Copyright © University of South Florida This is our reusable chunk of code. Copyright.ascx To enter the © symbol, hold down the 'Alt' key and key in the numerals 0169.

16 Design View does not appear in design view; only at run time.

17 Adding a User Control to a Page Adding a user control to a page requires: “Register” directive Identifies the user control Tells where to find it Control tag Puts the control on the page Visual Studio will put both of these items into the page for us. Just drag and drop the user control from the Solution Explorer to the design view.

Adding a User Control to a Page 18

Page with User Control 19 Look at Source view.

Default.aspx Source View 20 We could have manually added these tags.

21 The App Running End of Section

A More Advanced User Control A user control can have properties. Accessible in the C# page behind code. Permit code for the containing page to interact with the user control. Example: Let the copyright owner be a property of the Copyright user control. Permit the user control to be used by various web sites with different owners. 22

C# Properties Members of C# classes. Look like variables where used. Writen without parentheses. Act like parameterless methods. Invoke code in the property definition get and set Inside the class definition. Same thing that we have seen for ASPX controls in their Properties panels. 23

Copyright.ascx.cx public partial class Copyright : System.Web.UI.UserControl { private string copyright_owner = ""; protected void Page_Load(object sender, EventArgs e) {} public string Copyright_Owner { get { return copyright_owner; } set { copyright_owner = value;} } 24 Property Definition

Copyright.aspx 25

Default.aspx.cs 26 Set the Copyright_Owner property of the Copyright user control.

App in Chrome 27

Another Property Let’s also make the URL of the link settable from the containing page. 28

Add to Copyright.ascx.cs private string _url = "";... public string URL { get { return url; } set { url = value; } } 29

Default.aspx.cs public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { Copyright1.Copyright_Owner = "Rollins Turner"; Copyright1.URL = " } 30

Website in Chrome 31 End of Section

User Control Properties User control properties can be any type. Not just strings. A user control can permit its containing page to pass in objects of any class, as well as built-in types such as string and int. 32

Copyright in a Footer A typical use of a copyright user control is in footers of web pages. Let’s add this control to the footer of the Master Page Demo that we wrote last class. Close this project. Download MasterPageDemo.zip to your desktop from the Downloads area of the class web site _02_11_In_Class/ _02_11_In_Class/ Expand the zip file and open the web site. 33

Download MasterPageDemo 34

Download MasterPageDemo 35

Open the Web Site 36 Drill down to the second level MasterPageDemo folder.

Build and Run 37

Add the User Control to the Web Site 38

Add the User Control to the Web Site 39 Navigate to your User_Control_Demo and select Copyright.ascx Click Add.

MasterPageDemo 40 Copyright.ascx.cs came along with Copyright.ascx.

Look at the website folder 41 The user control files have been copied into the website folder

Copyright.ascx.cs Set default values for the properties: copyright_owner url private string copyright_owner = "University of South Florida"; private string url = " 42

Put the User Control into the Footer 43 In Design view, drag and drop Copyright.ascx from Solution Explorer into the footer. Delete “Footer Goes Here”

User Control in Master Page 44

Register Directive 45

User Control in the Footer 46 Add some space above and below the user control.

MasterPageDemo with Copyright 47