User Controls - University of South Florida
advertisement
User Controls
Beginning ASP.NET 4.5.1 in C# and VB
Chapter 8
1
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.
2
What are User Controls?
ASP.NET page content packaged for reuse.
Independent, compilable component
Replacement for “include” files.
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.
3
What are User Controls?
User controls cannot have top level tags:
Cannot be requested directly by a web browser.
<html>
<head>
<body>
<form>
Must be embedded in other web pages.
User controls have a Control directive at the top of the
file instead of a Page directive.
4
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.
5
The Copyright User Control
6
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
7
Default.aspx
Run it!
8
Initial App in Chrome
9
Add a User Control
Add new item to the web site
Select C# Web User Control
Call it Copyright.ascx
10
Add new item to the web site
11
Adding a Web User Control
Scroll down
Set name to Copyright.ascx and click Add.
12
View the Source
Note "Control" directive at top of page
rather than "Page" directive on aspx pages.
13
Copyright.ascx.cs
Note class Copyright.
Inherited in Copyright.ascx.
14
Add Own HTML
Copyright.ascx
<%@ Control Language="C#" AutoEventWireup="true"
CodeFile="Copyright.ascx.cs" Inherits="Copyright" %>
<center>
<table style="border:1px solid; margin:auto">
<tr>
<td style="text-align:center">
Copyright © <%=DateTime.Now.Year %> University of South Florida
</td>
To enter the © symbol, hold down the 'Alt' key
</tr>
and key in the numerals 0169.
<tr>
<td style="text-align:center">
<a href="http://www.cse.usf.edu">http://www.cse.usf.edu</a>
</td>
</tr>
</table>
</center>
This is our reusable chunk of code.
15
Design View
<%=DateTime.Now.Year %> does not appear in design view;
only at run time.
16
Adding a User Control to a Page
Adding a user control to a page requires:
“Register” directive
Control tag
Identifies the user control
Tells where to find it
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.
17
Adding a User Control to a Page
18
Page with User Control
Look at Source view.
19
Default.aspx Source View
We could have manually added these tags.
20
The App Running
End of Section
21
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;}
}
Property Definition
}
24
Copyright.aspx
25
Default.aspx.cs
Set the Copyright_Owner property
of the Copyright user control.
26
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 = "http://rollinsturner.com";
}
}
30
Website in Chrome
End of Section
31
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.
http://www.csee.usf.edu/~turnerr/Web_Application_Design/Downloads/
2016_02_11_In_Class/
Expand the zip file and open the web site.
33
Download MasterPageDemo
34
Download MasterPageDemo
35
Open the Web Site
Drill down to the second level MasterPageDemo folder.
36
Build and Run
37
Add the User Control to the Web Site
38
Add the User Control to the Web Site
Navigate to your User_Control_Demo
and select Copyright.ascx
Click Add.
39
MasterPageDemo
Copyright.ascx.cs came along with Copyright.ascx.
40
Look at the website folder
The user control files have been copied into the website folder
41
Copyright.ascx.cs
Set default values for the properties:
copyright_owner
url
private string copyright_owner = "University of South Florida";
private string url = "http://www.usf.edu/engineering/cse/";
42
Put the User Control into the Footer
In Design view, drag and drop
Copyright.ascx from Solution
Explorer into the footer.
Delete “Footer Goes Here”
43
User Control in Master Page
44
Register Directive
45
User Control in the Footer
Add some space above and below the user control.
46
MasterPageDemo with Copyright
47
