INT422 Internet III Web Programming on Windows

1
INT422 Internet III Web Programming on
Windows

• Creating Web User Controls

2
A buzz word...

• Before we begin we need to define a buzz word
• Assume there in a class called A and a class call
  B
• If in any of the methods of A say foo(), an
  instance of B is created and used then A is the
  consumer of B
• Class A type foo() B b new B()
  b.whatever()
• Or better to say, if A uses B, then A is the
  consumer of B.
• Also in this slide set Web User Controls will
  be refered as User Controls

3
What is a Web User Control?

• A web User Control is essentially a fragment of
  html code that can be reused within web-forms or
  other web User Controls.
• In ASP.net a web User Control is created exactly
  like a web-form. The only difference is that a
  web-from is a child of a Page where a web User
  Control is a child of a UserControl
• public partial class MyPage System.Web.UI.Page
• public partial class MyWebControl
  System.Web.UI.UserControl

4
Creating a Web User Control

• Creation of a user control is useful when
• A piece of a page is being repeated over an over
• A logic is being reused in a several different
  web-forms repeatedly
• A part of a page seems to be isolated and have
  separate logic and properties

5
Creating a Web User Control

• User controls can not be displayed by themselves
• To test and debug a User Control you need to have
  a test web-form.
• When Created unlike other controls, User Controls
  are dragged and dropped into the page from the
  solution explorer rather than the toolbox
  (ASP.net, web application only)

6
Creating a Web User Control

• Assume that in a web application it is needed to
  get the week day (sun to sat) in several
  different pages.
• Since the code for this needs to be written over
  and over, we will create a Web User Control
  called WeekDayPicker, to be able to reuse it.

7
Creating a Web User Control

• To add a User Control to a web application right
  click on the project name (or if you have a
  directory for your controls, right click on the
  directory name) and select Add New Item

8
Creating a Web User Control

• From the Add New Item dialog box select Web User
  Control and in the Name text box type The Name
  that defines the User Control the best.
• Click on Add to add the new User Control to the
  Project

9
Creating a Web User Control

• Now that the new blank User Control is added to
  the project, you need to create a test web form
  to be able to try and test the User Control
• Add a web form the application and call it
  TestDayPicker.aspx

10
Creating a Web User Control

• Add a drop down list to the User Control name it
  ddl_weekday and populate it with the week days as
  Text and number from 1 to 7 for Sun to Sat,
  respectively
• ltaspDropDownList IDddl_weekday"
  runat"server"gt
• ltaspListItem Value"1"gtSundaylt/aspListItemgt
• ltaspListItem Value"2"gtMondaylt/aspListItemgt
• ltaspListItem Value"3"gtTuesdaylt/aspListItemgt
• ltaspListItem Value"4"gtWednesdaylt/aspListItem
  gt
• ltaspListItem Value"5"gtThursdaylt/aspListItemgt
  
• ltaspListItem Value"6"gtFridaylt/aspListItemgt
• ltaspListItem Value"7"gtSaturdaylt/aspListItemgt
  
• lt/aspDropDownListgt
• Save the User Control and open the design of the
  test page

11
Creating a Web User Control

• From the Solution Explorer drag the WeekDayPicker
  User Control and drop it on the design page of
  the Test Page
• In the property of the User Control Change its ID
  to WDP for ease of access in future
• Right click on the Test Page and select View in
  Browser. See Video
• Test page will be displayed with a drop down list
  for week days as if the drop down list is
  directly inserted in the test page.

12
Creating a Web User Control

• Although the drop down list is shown on the Page
  but since the drop down list is actually inside
  the User Control, its properties are inaccessible
  in Text Page.
• To be able to access the desired properties of
  User Control and its content, public properties
  can be added to the User Control

13
Creating a Web User Control

• Properties can be added to the User Control to
  give partail or full access to the selected text
  and selected value of the drop downlist
• public string SelectedText // only read access
  to the selected text
• get
• return ddl_weekday.SelectedItem.Text
• public int SelectedValue // read and write
  access to the selected value
• get
• return int.Parse(ddl_weekday.SelectedValue)
  
• set
• try
• ddl_weekday.SelectedValue
  value.ToString()
• catch
• ddl_weekday.SelectedIndex 0

14
Creating a Web User Control

• All the properties which have write access can be
  set through the properties window in design time
  if needed

• Also properties can be added to the User Control
  to add additional options to the
  consumerpublic string ShortSelectedDay get
  return ddl_weekday.SelectedItem.Text.Substri
  ng(0, 3)

15
Creating a Web User Control

• All these properties can be accessed in the
  consumer page through the User Controls
  IDWDP.SelectedValueWDP.ShortSelectedDay
• By adding labels and buttons and other controls
  to the test-page, check the functionality of your
  User Control in action and make sure it works
  properly. See Video Download WeedDayPicker

16
Creating a Web User Control

• By creating properties, whenever the page is
  posted back you can check those properties for
  values, but it is impossible to let the consumer
  page know that selected week day is changed so
  the consumer can take the proper action
  accordingly.
• To do that you have to create Events for the
  WeekDayPicker Control to notify others for any
  change. Refer to Events and Event handlers slide
  to learn how to this.