CSC209 Web Programming

1. CSC209 Web Programming Chapter 4 – Working with ASP .NET Controls Dr. StephanosMavromoustakos

2. Introduction to Server Controls • Server 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” />

3. Introduction to Server Controls • Open your project • In 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.

4. Introduction to Server Controls • Your Design View should look like this:

5. Introduction to Server Controls • Right-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

6. Introduction to Server Controls • Save 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.

7. Common Properties for All Controls • ID – uniquely identifies the control • Runat – always set to Server • ClientID – contains the client-side ID attribute that will be assigned to the element in the final HTML • BackColor/ForeColor – change the color of the background and text of the control in the browser • Font – Define different font-related settings • Height/Width – Determines the height and width of the control in the browser • Visible – Determines whether the control is sent to the browser or not.

8. CSS and Controls • As 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:

9. 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; }

10. List Controls • Open 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 source 2- add items to the list manually 3 – 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)

11. List Controls • Click the Edit Items link • Click 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>

12. List Controls • Switch 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:

13. 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>

14. 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.Items If item.Selected Then Label1.Text &= "In the CBL you selected " & item.Value& "<br />" End If Next 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 />"

15. Container Controls The ability to group related content and controls e.g. • Panel • PlaceHolder • MultiView • Wizard

16. Using the Panel Control • Start by creating a new Web Form called Containers.aspx in the Demos folder • Switch into Design View and drag a CheckBox and a Panel control inside the <div> element • Change the Text property of the CheckBox to Show Panel and set its AutoPostBack property to True • Set the Visible property of the Panel to False. This hides the Panel control when the page first loads • Inside the Panel type I am visible now. • Double-click the CheckBox and add the following code: Panel1.Visible = CheckBox1.Checked

17. Using the Panel Control • Save the changes and press Ctrl F5 • Click the CheckBox to see the Panel appearing

18. The ASP.NET State Engine • The 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.

19. How the State Engine Works • The state engine in ASP.NET is capable of storing state for many controls. • Under the Demos folder create a new page called State.aspx • From Design View click inside the <div> element and add a table with 2 rows and 2 columns by choosing TableInsert 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

20. How the State Engine Works • Click the first button and set its ID to btnSetDate and its Text to Set Date • The other button call it btnPlainPostBack and set its text property to Plain PostBack

21. How the State Engine Works • Double-click the Set Date button and add the code: Label1.Text = DateTime.Now.ToString() • Open the page in the browser with Ctrl F5 • Select 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

22. How the State Engine Works • Check 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.