CSC209 Web Programming

Chapter 4 – Working with ASP .NET Controls

Dr. Stephanos Mavromoustakos

Introduction to Server ControlsServer controls “live” on the server inside an

ASPX page. Instead of defining HTML controls in your

pages directly, you define an ASP.NET Server Control with the following syntax where the italic parts differ for each control (e.g. creating a TextBox that can hold the same welcome message and current time)<asp:TextBox ID=“txtMessage” Runat=“Server” />

Introduction to Server ControlsOpen your projectIn the Demos folder create a new Web Form called

ControlsDemo.aspx.Switch to Design View. Drag a TextBox, a Button, and

a Label control onto the design surface within the dashed lines of the <div> tag that was added for you

Type the text Your Name in front of the TextBox and add a line break between the Button and the Label by positioning your cursor between the two controls in Design View and then pressing Enter or place your cursor after the label and then press the left arrow key twice.

Introduction to Server ControlsYour Design View should look like this:

Introduction to Server ControlsRight-click the Button and in the Properties set

the control’s text property to Submit and set its ID (found at the bottom of the of the list) to btnSubmit

Change the ID of the TextBox to txtName using the Properties Grid.

Clear the Text property of the Label1 using the Properties. You can leave its ID set to Label1.

Double-click the button to add the code between the “Protected” and the “End Sub”:

Label1.Text = "Your Name is " & txtName.Text

Introduction to Server ControlsSave the changes to the page and press Ctrl F5

to open it in the browser. Fill in your name in the text box, and then click

the button Right-click your page to see the HTML code

Note: Some properties can only be set programmatically and not with the Properties Grid.

Common Properties for All ControlsID – uniquely identifies the controlRunat – always set to ServerClientID – contains the client-side ID attribute that

will be assigned to the element in the final HTMLBackColor/ ForeColor – change the color of the

background and text of the control in the browserFont – Define different font-related settingsHeight/Width – Determines the height and width of

the control in the browserVisible – Determines whether the control is sent to

the browser or not.

CSS and ControlsAs learned previously, avoid inline styles and

opt for external CSS instead (for readability, reusability, and maintenance) such as:

<asp:TextBox ID=“TextBox1” AccessKey=“a” CssClass=“TextBox” Enabled=“True” TabIndex=“1” ToolTip=“Hover Text here” Visible=“True” runat=“server” Text=“Hello World”>

</asp:TextBox>

And the following CSS class:

CSS and Controls.TextBox{

color: White;background-color: Black;border-color: Blue;border-width: 4px;border-style: Dashed;font-size: 30px;height: 40px;width: 200px;

}

List ControlsOpen your project and in the Demos folder, create a new Web

Form called ListControls.aspx. Switch to Design View and then drag a DropDownList within the

<div> element.The pop-up menu that appears is called the Smart Tasks panel or

menu. There are 3 options: 1 – bind the control to a data source2- add items to the list manually3 – sets the AutoPostBack property. If this is checked, the control

will submit the page it’s contained in back to the server as soon as the user chooses a new item from the list

The Smart Tasks panel appears only for the more complex controls. To reopen the Smart Tasks panel, right-click the control and choose Show Smart Tag (or click the little arrow at the top-right corner of the control)

List ControlsClick the Edit Items linkClick the Add button. In the Properties Grid on the right,

enter C# for the Text property and then press Tab.Repeat twice adding to your list items for Visual Basic

and CSS. Click OK. Your code should be:<asp:DropDownList ID="DropDownList1" runat="server" Height="16px" Width="69px">

<asp:ListItem>C#</asp:ListItem> <asp:ListItem>Visual Basic</asp:ListItem> <asp:ListItem>CSS</asp:ListItem></asp:DropDownList>

List ControlsSwitch to Source View if necessary, and then

drag a CheckBoxList control directly in the code window, right after the DropDownList

Copy the three <asp:ListItem> elements from the DropDownList and paste them between the opening and closing tags of the CheckBoxList.

The code should be:

List Controls<asp:DropDownList ID="DropDownList1" runat="server" Height="16px" Width="69px">

<asp:ListItem>C#</asp:ListItem> <asp:ListItem>Visual Basic</asp:ListItem> <asp:ListItem>CSS</asp:ListItem></asp:DropDownList> <asp:CheckBoxList ID="CheckBoxList1" runat="server">

<asp:ListItem>C#</asp:ListItem><asp:ListItem>Visual Basic</asp:ListItem><asp:ListItem>CSS</asp:ListItem>

</asp:CheckBoxList>

List Controls Switch to Design View and then drag a Button to the right of the CheckBoxList (The button

will be placed below the CheckBoxList). Drag a label control and drop it next to the button. Create some space between the button

and label1 by positioning your cursor there and pressing Enter twice. Double-click the button to enter the code:

Label1.Text = "In the DDL you selected " & DropDownList1.SelectedValue & " <br />"

For Each item As ListItem In CheckBoxList1.ItemsIf item.Selected Then

Label1.Text &= "In the CBL you selected " & item.Value & "<br />" End IfNext

Save the changes and request the page in the browser

Note: The &= assigns the Value of the list item together with the text “In the CBL you selected “ to the Text property of the Label1. It is shorthand for this:

Label1.Text = Label1.Text + "In the CBL you selected " + item.Value + "<br />"

Container ControlsThe ability to group related content and

controls e.g.PanelPlaceHolderMultiViewWizard

Using the Panel ControlStart by creating a new Web Form called

Containers.aspx in the Demos folderSwitch into Design View and drag a CheckBox and a

Panel control inside the <div> elementChange the Text property of the CheckBox to Show

Panel and set its AutoPostBack property to TrueSet the Visible property of the Panel to False. This

hides the Panel control when the page first loadsInside the Panel type I am visible now.Double-click the CheckBox and add the following code:

Panel1.Visible = CheckBox1.Checked

Using the Panel ControlSave the changes and press Ctrl F5Click the CheckBox to see the Panel

appearing

The ASP.NET State EngineThe HTTP protocol used to request and serve

pages in a web browser is stateless. This means that the web server does not keep track of requests that have been made from a specific browser. The web server has no recollection of pages you requested previously; which leads to problems. E.g. for a login screen to fill in the username automatically and/or the “Remember me next time” to retain its selection.

How the State Engine WorksThe state engine in ASP.NET is capable of storing state

for many controls.Under the Demos folder create a new page called

State.aspxFrom Design View click inside the <div> element and

add a table with 2 rows and 2 columns by choosing TableInsert Table from the main menu

In first cell of the first row, drag a label. In the first cell of the second row drag a Calendar control. From the Smart Tasks panel click the Auto Format and select Simple and click OK.

Drag a button into each of the 2 cells of the right column of the table

How the State Engine WorksClick the first button and set its ID to

btnSetDate and its Text to Set DateThe other button call it btnPlainPostBack and

set its text property to Plain PostBack

How the State Engine WorksDouble-click the Set Date button and add the code:

Label1.Text = DateTime.Now.ToString()

Open the page in the browser with Ctrl F5Select a date. Notice as soon as you click the date, the

page seems to reload, caused by a postback.Click the Set Date button few times.Then click the Plain PostBack button.Go back to VWD and change the EnableViewState

property of the label to False.Ctrl F5 and repeat the previous steps to see what

happens now

How the State Engine WorksCheck your HTML page source<form name="form1" method="post" action="State.aspx" id="form1">

A form can be submitted in two ways: with POST or with GET. In the former case, all data from the form is added to the body of the request and then sent to the server. In case of the GET method, all the data is appended to the actual address of the request.

Also look at the hidden ViewState field<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTYzNjg0OTc2OGRkmoVrW229D9udLqx1kSHaUOeAgVI=" /> This is to protect the information stored and to decrease the size of it ASP.NET has converted the page state in the string you see.