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.

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

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"/>

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" />

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"/>

Literal control 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"/>

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"/>

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.

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

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)

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

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.

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

Data Binding 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

Data Binding 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

Data Binding 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)

Repeater Control 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.

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>

Repeater example Assume that we have the DataTable object (dt) filled with data as follows: Item_desc Item_name Item_id text1 coffee 1 text2 Tea 2 This data stored in the table and need to be displayed on a web form using a repeater control(rptItems)

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()

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>

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

File Uploading Control (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

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.