Module 8: Creating User Controls. Overview Adding User Controls to an ASP.NET Web Form Creating User Controls

Module 8:Creating User Controls

Overview

Adding User Controls to an ASP.NET Web Form

Creating User Controls

Lesson: Adding User Controls to an ASP.NET Web Form

What is a User Control?

Why Use User Controls?

Practice: Listing User Controls

Adding a User Control

Demonstration: Creating a User Control

What is a User Control?

User controls simplify the reuse of code and UI components within a Web application

A user control is a user-defined Web server control with an .ascx extension

Contains HTML, but not the <HTML>, <BODY>, or <FORM> tags

or

Contains code to handle its own events

<%@ Control Language="vb" %><%@ Control Language="vb" %>

<%@ Control Language="c#" %><%@ Control Language="c#" %>

Why Use User Controls?

Reuse user interface and code

Page2.aspx

Control1.ascx

Page1.aspx

Page3.aspx

Application A Application B

Practice: Listing User Controls

Students will:

List examples of when it is appropriate to use user controls

Time: 5 minutes

Adding a User Control

Use the @ Register directive to include a user control in an ASP.NET Page

Insert the user control in a Web Form

Use Get and Set properties of the user control

or

<%@ Register TagPrefix="demo" TagName="validNum" Src="numberbox.ascx" %><%@ Register TagPrefix="demo" TagName="validNum" Src="numberbox.ascx" %>

<demo:validNum id="num1" runat="server"/> <demo:validNum id="num1" runat="server"/>

num1.pNum = 5 'uses Setx = num1.pNum 'uses Getnum1.pNum = 5 'uses Setx = num1.pNum 'uses Get

num1.pNum = 5; //uses Setx = num1.pNum; //uses Getnum1.pNum = 5; //uses Setx = num1.pNum; //uses Get

Demonstration: Creating a User Control

Create a new user control

Create a property

Lesson: Creating User Controls

Creating a User Control

Demonstration: Using a User Control

Creating a User Control

Two methods for user control creation:

Create a new user control using Visual Studio .NET

Convert an existing ASP.NET page to a user control

Host page interacts with the control using properties

Host page should use flow layout Public Property pNum() As Integer Get

Return Convert.ToInt32(txtNum.Text) End Get Set (ByVal value As Integer) txtNum.Text = CStr(value) End SetEnd Property

Public Property pNum() As Integer Get

Return Convert.ToInt32(txtNum.Text) End Get Set (ByVal value As Integer) txtNum.Text = CStr(value) End SetEnd Property

public int pNum{ get { return Convert.ToInt32(txtNum.Text); } set { txtNum.Text = Convert.ToString(value); }}

public int pNum{ get { return Convert.ToInt32(txtNum.Text); } set { txtNum.Text = Convert.ToString(value); }}

Demonstration: Using a User Control

Insert a user control on a page

Use the user controls in the code-behind page

Review

Adding User Controls to an ASP.NET Web Form

Creating User Controls

Lab 8: Creating User Controls

MedicalMedical.aspxMedicalMedical.aspx

BenefitsHome PageDefault.aspx

BenefitsHome PageDefault.aspx

Life InsuranceLife.aspxLife InsuranceLife.aspx

RetirementRetirement.aspxRetirementRetirement.aspx

DentalDental.aspxDentalDental.aspx

Dentists

DoctorsDoctors.aspx DoctorsDoctors.aspx

Doctors

Logon PageLogin.aspxLogon PageLogin.aspx

RegistrationRegister.aspxRegistrationRegister.aspx

CohoWinery

ProspectusProspectus.aspxProspectusProspectus.aspx

XML Web ServicedentalService1.asmx

XML Web ServicedentalService1.asmx

Page HeaderHeader.ascxPage HeaderHeader.ascx

ASPState

tempdb

Lab Web Application

User Controlnamedate.ascxUser Controlnamedate.ascx

Menu ComponentClass1.vb or Class1.cs

Menu ComponentClass1.vb or Class1.cs

XML Files

Web.config

Documents

Module 8: Creating User Controls. Overview Adding User Controls to an ASP.NET Web Form Creating User Controls