Web Server controls

1. Web Server controls

2. Button Web Server Controls • Buttons in an ASP.NET Web page allow users to send commands. • Buttons submit the page to the server and cause it to be processed along with any pending events. • Web server controls include three types of buttons: • a standard command button (Button control), • a hyperlink-style button (LinkButton control), • a graphical button (ImageButton control). All three provide similar features, but each offers a different look.

3. Button control • Presents a standard command button, which is rendered as an HTML input element. • <asp:Button id="Button1" Text="Submit" runat="server"/>

4. LinkButton • Renders as a hyperlink in the page. • it contains client-side script that causes the form to be posted back to the server. • <asp:LinkButton id="LinkButton1" Text="Click Me" Font-Name="Verdana" Font-Size="14pt" runat="server"/>

5. ImageButton • Allows you to specify a graphic as a button. • <asp:ImageButton id="imagebutton1" runat="server" AlternateText="ImageButton 1" ImageAlign="left" ImageUrl="images/pict.jpg" />

6. Label Control • The Label Web server control provides a way to display text programmatically control in an ASP.NET Web page. • If you want to display static text, you can present it using HTML; • Use a Label control only if you need to change the contents or other characteristics of the text in server code. • <asp:Label id="Label1" Text="Label Control" runat="server"/>

7. Literalcontrol • The Literal control,Like the Label control, the Literal control allows you to programmatically set text to be displayed in the page. • However, the Literal control does not support style properties • It renders nothing except the text assigned to it. • <asp:Literal id="Literal1" Text="Hello World!!" runat="server"/>

8. Hyperlink • A control that displays a link to another Web page. • <asp:HyperLink id="hyperlink1"ImageUrl="images/pict.jpg" NavigateUrl="http://www.microsoft.com"Text="Microsoft Official Site" runat="server"/>

9. ListBox • The ListBox Web server control allows users to select one or more items from a predefined list. • The ListBox control is actually a container for one or more list items. • Each list item is an object of type ListItem with its own properties which are: • Text:The text displayed in the list item. • Value:The value associated with an item.

10. ListBox (Cont.) • <asp:ListBox id="ListBox1" Rows="6" Width="100px" SelectionMode="Single" runat="server"> <asp:ListItem Value=“1”>Item 1</asp:ListItem> <asp:ListItem Value=“2”>Item 2</asp:ListItem> <asp:ListItem Value=“3” Selected=“true”>Item 3</asp:ListItem> <asp:ListItem Value=“4”>Item 4</asp:ListItem> <asp:ListItem Value=“5”>Item 5</asp:ListItem> <asp:ListItem Value=“6”>Item 6</asp:ListItem> </asp:ListBox> • Here you are adding items to the list box at design time

11. ListBox(Cont) • To access the selected item in a list (listBox1): • listBox1.SelectedItem • listBox1.SelectedItem.Text • listBox1.SelectedItem.Value • To insert an item programmatically: Dim item as new ListItem(“text”,”value”) listBox1.items.add(item)

12. ListBox (Cont) • The autopostback facility is available in ListBox and can be enabled. • Enable the AutoPostBack property to allow the list box to make post back to the server. • The event procedure (SelectedIndexChanged) is associated with ListBox and raised when a different list box item item is selected. • Protected Sub rbl1_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles rbl1.SelectedIndexChanged • End Sub

13. RadioButtonList Control • The RadioButtonList Web server control provides a way for users to select from among exclusive options. • RadioButtonList acts as a single-selection-mode list box. • RadioButtonList contains a group of ListItems listed as radio buttons • The addition of ListItems on a radioButton List is done using the same way used in ListBox control.

14. RadioButtonList Control (cont) • The autopostback facility is available in RadioButtonList and can be enabled. • The event procedure (SelectedIndexChanged) is associated with RadioButtonList and raised when a different radio button item is selected. • Protected Sub rbl1_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles rbl1.SelectedIndexChanged • End Sub

15. RadioButtonList Control (cont) • To return the selectedItem from a radioButtonList, the selectedItem property is used: • Ex) to return the ListItem of (rlb1) rlb1.SelectedItem • To select a certain ListItem (given its text), we use _______(exercise).

16. Exercise • learn by your self How to insert CheckBoxList and DropDownList controls • You should be able to populate them with data in design and run time • You should be able how to retrieve the selected items of them

17. DataBinding • Most of the web server controls can be bound to different data sources. • Then, these controls will be populated with data from the data sources. • DataTable object can be a data source for data-bound controls. • Examples for data-bound controls are: • DropDownList • ListBox • CheckBoxList • RadioButtonList

18. DataBinding • Ex) suppose you have a DropDowList control (ddl) and a DataTable object (dt). • To associate the (ddl) with (dt) • ddl.DataSource = dt • ddl.DataTextField = “Text Column name” • ddl.DataValueField = “Value Column Name” • To bind the (ddl) with the data in (dt) • ddl.DataBind

19. DataBinding • To prepare A dataTable (dt) object • Dim dt as New Data.DataTable • To add columns to that (dt) • dt.Columns.add(“first col name”) • dt.Columns.add(“second col name”) • To prepare a row to be inserted to that table is: • Dim row as Data.DataRow = dt.NewRow • row(“first col name”) = “Some Value” • row(“second col name”) = “Some value” • dt.rows.add(row)

20. RepeaterControl • The Repeater Web server control is a data-bound container control that produces a list of individual items. • It displays the contents (rows) of a certain data source on the web page by repeating its content using the repeater.

21. Reapter Tag <asp:Repeater ID="rpt" runat="server"> <HeaderTemplate> <!-- tags put here appears once before rpt content--> </HeaderTemplate> <ItemTemplate> <!-- content of a data source is repeated here --> </ItemTemplate> <FooterTemplate> <!-- tags put here appears once after rpt content--> </FooterTemplate> </asp:Repeater>

22. Repeater example • Assume that we have the DataTable object (dt) filled with data as follows: • This data stored in the table and need to be displayed on a web form using a repeater control(rptItems)

23. Repeater example(Cont) • You have to associate the (rptItems) with the data Source (dt) by: • rptItems.DataSource = dt • The columns of the (dt) should be mapped in the <ItemTemplate> tag of the repeater (as shown in the next slide) • Finally, the rpt is bound to dt using: • rptItems.DataBind()

24. Repeater example(Cont) <asp:Repeater ID="rpt" runat="server"> <HeaderTemplate> <table border="2" cellpadding="5"> </HeaderTemplate> <ItemTemplate> <tr> <td> <%#Eval(“Item_id")%> </td> <td> <%#Eval(“Item_name")%> </td> <td> <%#Eval("Item_desc")%> </td> </tr> </ItemTemplate> <FooterTemplate> </table> </FooterTemplate> </asp:Repeater>

25. File Uploading Control • The FileUpload control allows you to provide users with a way to send a file from their computer to the server. • The control is useful for allowing users to upload pictures, text files, or other files. • To use a file upload control, insert it in a web form a call it (FileUpload1).

26. FileUploadingControl (Cont) • On the click event handler of a button, add: Dim path As String = Server.MapPath("UploadedImages/") If FileUpload1.HasFile Then Try FileUpload1.PostedFile.SaveAs(path & _ FileUpload1.FileName) Catch ex As Exception Label1.Text = "File could not be uploaded." End Try Else Label1.Text = No file was selected" End If

27. File Uploading Control (Cont) • Server.MapPath(virtual_path): • Maps a virtual path to a physical path on the server. • Ex) if your are creating your ASP.NET web application using the root folder C:\Inetpub\wwwroot\webSite1 • Then, executing the method Server.MapPath(“”) will return: C:\Inetpub\wwwroot\webSite1 • And, writing it as (Server.MapPath(“someVFolder”)) will return C:\Inetpub\wwwroot\webSite1\someVFolder

28. File Uploading Control (Cont) • FileUpload1.HasFile property • returns true if the user has selected a certain file (to be uploaded) using the FileUpload1 Control. • FileUpload1.PostedFile.SaveAs(path & _ FileUpload1.FileName) • It will upload a file to the passed physical path on the server.