Tải bản đầy đủ - 0 (trang)
Chapter 11. Creating and Using User Controls

Chapter 11. Creating and Using User Controls

Tải bản đầy đủ - 0trang

Containsan

Doesnotcontainan

//
//element

element

Note

AnotherdifferencebetweenaWebformandauser

controlisthataWebformderivesfromthePageclass

andausercontrolderivesfromtheUserControlclass.

However,thetopicofprogrammaticinheritanceis

beyondthescopeofthisbooksowewon'tgointodetail

onthisdifference.



Chapter11.CreatingandUsingUser

Controls

INTHISCHAPTER

WhatAreUserControls?164

CreatingaUserControl164

AddingUserControlstoaPage166

ConvertingaPagetoaUserControl168

Checkpoint169



WhatAreUserControls?

AsyoudevelopWebformsforawebapplication,it'slikelythat

you'llidentifysomepartsofapagethatcanbereusedin

severalotherpages.InChapter14ofthisbook,youwillbe

creatingalogininterfaceforsomemembershippages.Although

mostwebapplicationshavealoginpagethatcontainsalogin

interface,thatsamelogininterfacecanalsobeusedinother

pagessothatuserscanloginfromseveralplacesinthesite.

WhenyoucreatethelogininterfaceasanASP.NETusercontrol,

youcaneasilyreuseitinanypage.

ASP.NETusercontrolsarecreatedjustlikeWebforms,but

thereareseveraldifferencesbetweenthetwo.Table11.1lists

thedifferencesbetweenaWebformandausercontrol.

Table11.1.DifferencesBetweenWebFormsand

UserControls

WebForm

UserControl

.aspxfileextension



.ascxfileextension



Definedwithan@Page Definedwithan@Control

directive

directive



Containsan

Doesnotcontainan

// //element

element

Note

AnotherdifferencebetweenaWebformandauser

controlisthataWebformderivesfromthePageclass

andausercontrolderivesfromtheUserControlclass.

However,thetopicofprogrammaticinheritanceis

beyondthescopeofthisbooksowewon'tgointodetail

onthisdifference.



CreatingaUserControl

TocreateanASP.NETusercontrol,followthesesteps:

1. SelectFile,NewFile.

2. Fromthelistoftemplates,chooseWebUserControl.

3. Selectalanguagefortheusercontrol'sserver-sidecode.



Tip

Theusercontrol'slanguagedoesnothaveto

matchthepageonwhichitisbeingused.

4. Ifyou'dlikefortheserver-sidecodetobeinacode-behind

file,checkthePlaceCodeinSeparateFilecheckbox.

Formoreinformationoncode-behindfilesin

ASP.NET,see"Code-BehindServer-SideCode,"p.

26.



5. ClickAddtoaddthenewusercontroltoyourweb

application.

Aftertheusercontrolhasbeencreated,youcanaddASP.NET

controlstoitjustasyouwouldaWebform.Followthesesteps

toaddthebasiccontrolsthatyou'llbuilduponinChapter14.

1. Ifyouaren'tinDesignview,clicktheDesignbutton.

2. Ifthetoolboxisn'tvisible,pressCtrl+Alt+Xtodisplayit.



3. Double-clickontheLoginViewcontrolintheLoginsectionof

thetoolboxtoaddittotheusercontrol.

4. ClickinsidetheLoginViewcontrol.

5. Double-clickontheLogincontrolintheLoginsectionofthe

toolboxtoaddittotheusercontrolinsidetheLoginView

control.

Note

You'renotexpectedtoknowhowtousetheLoginView

orLogincontrolsatthispoint.You'llconfigurethem

laterinChapter14.



YourusercontrolshouldnowlookliketheoneshowninFigure

11.1.SelectFile,SaveWebUserControl.ascxAsandsavethe

usercontrolaslogin.ascx.

Figure11.1.TheusercontrolcontainsaLoginViewcontrol

andaLogincontrol.

[Viewfullsizeimage]



Tip

Afteryousavetheusercontrolaslogin.ascx,youcan

right-clickonWebUserControl.ascxinSolution

Exploreranddeleteitifyouwantto.



AddingUserControlstoaPage

Toaddausercontroltoapage,simplydraganddroptheuser

controlfromSolutionExplorerontothepage.Whenyoudoso,

VisualWebDeveloperaddsan@RegisterdirectivetotheWeb

formthatlookslikethefollowing:



<%@Registersrc="~/login.ascx"tagname="login"tagprefix="uc1"

Tip

ThetildeinthesrcattributeisanASP.NETconvention

thatpointstotherootdirectoryofyourwebapplication.

YoucanuseatildeanywhereinyourASP.NETfilesto

indicatetherootoftheapplication.



The@RegisterdirectivetellsVisualWebDeveloperthename

oftheusercontrolfile,thetagnamethatisusedfortheuser

control,andthetagprefix.Thetagnameandtagprefixare

usedintheHTMLsourcefortheWebform.Theformatisas

follows:





Therefore,theusercontrolregisteredbytheexample@

Registerdirectiveshownpreviouslywouldappearasfollowsin

Sourceview:





Ofcourse,it'snotnecessaryforyoutoknowallthisbecause

VisualWebDeveloperautomaticallytakescareofitwhenyou



draganddroptheusercontrolontoyourpage.



CreatingaUserControl

FollowthesestepstocreateanewASP.NETWebformandadd

theusercontroltoit:

1. SelectFile,NewFile.

2. Fromthelistoftemplates,selectWebForm.

3. Changethenametologin.aspx.

4. PlaceacheckintheSelectMasterPagecheckbox.

5. ClickAddtoaddthenewWebform.

6. IntheSelectaMasterPagedialog,selectthe

MasterPage.mastermasterpageandclickOK.

7. SwitchtoDesignviewifnecessary.

8. Dragthelogin.ascxusercontrolfromSolutionExplorer

intothemainContentContentcontrolasshowninFigure

11.2.



Figure11.2.Thelogin.ascxusercontrolhas

beendroppedintothemainContentContent

control.

[Viewfullsizeimage]



EditingaUserControl

Afteryou'veaddedtheusercontroltothepage,youcaneditit

byeitheropeningthelogin.ascxfilefromSolutionExploreror

byclickingtheSmartTagbuttonontheusercontrolwithinthe

WebformandselectingEditUserControl,asshowninFigure

11.3.

Figure11.3.Youcaneditausercontrolbyselectingthe

EditUserControllinkintheSmartTagoptionsforthe

usercontrol.

[Viewfullsizeimage]



IfyoueditausercontrolbyopeningitinSolutionExplorer,you

canrefreshtheusercontrolintheWebformtoseethechanges

byselectingtheRefreshContentslink,asshownpreviouslyin

Figure11.3.

Onethingyoumaynoticeaboutusercontrolsisthatyoucannot

applyCSSstylesorotherformattingtothemwhentheyareon

aWebform.Ifyouwanttoformatausercontrol'sappearance,

youneedtoformatitbyeditingtheusercontrolfileorusea

themetoalteritsappearance.

FormoreinformationonusingCSSinVisualWeb



Developer,seeChapter17,"Creatingand

ManagingCSSStyles."



FormoreinformationonASP.NETthemes,see

"IntroductiontoASP.NETThemes,"p.270.



Tài liệu bạn tìm kiếm đã sẵn sàng tải về

Chapter 11. Creating and Using User Controls

Tải bản đầy đủ ngay(0 tr)

×