Web Engineering-II

Using ASP.net

Topic: Understanding Standard Web form Controls.

By
Adnan Amin
Lecturer / Software Programmer
Information and Communication Technology (ICT Dept)
www.geoamins.com

By: Adnan Amin (Lecturer/ Software Progr) 1

Web Server Controls
 There are many best capabilities of the
web server controls.
◦ AutoPostBack property
◦ Auto browser detection and adaptation.
◦ Latest and Complex web server controls.
◦ Easily connecting to data sources using
database.

By: Adnan Amin (Lecturer/ Software Progr) 2

 The Web control class.
 All of the web server controls builts from
WebControls class.
◦ System.Web.UI.WebControls
 Webcontrols class provides many standards
control properties.
◦ Color, access key, visibility, foreground color, back
color etc.
 Such complex properties can easily apply on
WebControls.
◦ <asp: Label ID=“Label1” Font-Bold=“True”
runat=“server”> </asp:Label>
By: Adnan Amin (Lecturer/ Software Progr) 3
The Web Browser Auto Detection
 The web controls have the capabilities of
◦ Auto detect the browser
◦ Accordingly generate the code
◦ Display the output.

Typical Code for ASP.net Button

<asp : Button id= “Button1” Text=“Button” >
</asp:Button>

Generates this HTML in Internet Explorer 7

<input type=“submit” name=“Button1”

value=“Button” />
By: Adnan Amin (Lecturer/ Software Progr) 4
Creating Controls using Coding

 Textbox
 Label
 Button
 Checkbox
 Radio button
 Listbox
 Dropdown list
 Image
 Hyperlink
By: Adnan Amin (Lecturer/ Software Progr) 5
Code for Textbox
Textboxs are used when you want the user to type
or enter letters, numbers, etc. in a form.

<form id="form1" runat="server">

This is textbox web control:
<asp:TextBox ID="TextBox1" runat="server">
</asp:TextBox>
</form>

Output: This is textbox web control:

By: Adnan Amin (Lecturer/ Software Progr) 6

Coding for Creating Label.
Label control is used to display message or title or
comments like data. It can used to display both type of
data such as fixed or dynamic.

<form id="form1" runat="server">

<asp:Label ID="Label1" runat="server“ Text=“Enter name">
</asp:Label>
</form>

Output: Enter Name

By: Adnan Amin (Lecturer/ Software Progr) 7

Coding for Creating Button.
When the user clicks on the button, the content of the
form is sent to the server or perform some action. The
form's action attribute defines the name of the file to
send the content to.The file defined in the action attribute
usually does something with the received input.

<form id="form1" runat="server">

<asp:Button ID="button1" runat="server“ Text="Submit" />
</form>
Output: Submit

By: Adnan Amin (Lecturer/ Software Progr) 8

Coding for Creating Checkbox.
Checkboxes are used when you want the user to select
one or more options of a limited number of choices.

<form id="form1" runat="server">

<asp:CheckBox ID="CheckBox1" runat="server" Text="checkbox" />
</form>

Output: Checkbox

By: Adnan Amin (Lecturer/ Software Progr) 9

Coding for Creating RadioButton.
Radio Buttons are used when you want the user to
select one of a limited number of choices.

<form id="form1" runat="server">

<asp:RadioButton ID="RadioButton1“ GroupName="gender" runat="server"
Text="Male" />
<asp:RadioButton ID="RadioButton2“ GroupName="gender" runat="server"
Text="Female" />

</form>

Output: Male Female

By: Adnan Amin (Lecturer/ Software Progr) 10

Coding for Creating Dropdownlist.
The dropdownlist is used to create a list (drop-down list).
The Listitem tags inside the dropdownlist element define
the available options in the list.
<form id="form1" runat="server">
Select the Subject:
<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem>Java</asp:ListItem>
<asp:ListItem>Visual Basic</asp:ListItem>
<asp:ListItem>C++</asp:ListItem>
</asp:DropDownList>
</form>
Output: Select the Subject:

By: Adnan Amin (Lecturer/ Software Progr) 11

Coding for Creating Listbox.
Listboxs are used when you want the user to select
one of a limited number or multiple of choices.
<form id="form1" runat="server">
 <asp:ListBox ID="ListBox1" runat="server">
 <asp:ListItem>Pakistan</asp:ListItem>
 <asp:ListItem>Afghanistan</asp:ListItem>
 <asp:ListItem>India</asp:ListItem>
 <asp:ListItem>Iran</asp:ListItem>
 </asp:ListBox>
</form>

Pakistan
Afghanistan
Output:
India
Iran By: Adnan Amin (Lecturer/ Software Progr) 12
 Open New Website Project in Visual Studio.net and type the following code

<form id="form1" runat="server">

Enter Your First Name:<br />
<asp:TextBox ID="textbox1" runat="server"></asp:TextBox>
<br />
Do Practice

Enter Your Second Name:<br />

<asp:TextBox ID="textbox2" runat="server"></asp:TextBox>
<br />

<asp:Button ID="button1" runat="server" Text="Submit" />

<br />

<asp:Panel ID="Panel1" runat="server" Width="154px">

<asp:Label ID="Label1" runat="server" Text="First Name:"> </asp:Label>
<asp:Label ID="Label3" runat="server" Text="your first Name:"> </asp:Label>
<asp:Label ID="Label2" runat="server" Text="Last Name:"> </asp:Label>
<asp:Label ID="Label4" runat="server" Text="your last Name:"></asp:Label>
</asp:Panel>
</form>

By: Adnan Amin (Lecturer/ Software Progr) 13

Double Click on Submit Button
 Type the following code in code behind the page button click even.
Protected Sub button1_Click (ByVal sender As Object, ByVal e As System.EventArgs)
Handles button1.Click
Label3.Text = textbox1.Text
Label4.Text = textbox2.Text
End Sub

By: Adnan Amin (Lecturer/ Software Progr) 14

 Press Ctrl+F5 (run without debugging)

 Output
Do Practice

First Name:

Last Name:

Submit

 Frist Name: your first name

 Last Name: your last name

By: Adnan Amin (Lecturer/ Software Progr) 15

Find value of selected radio button.
 For example,You have two radio buttons for
gender (male and female). The user will
select only one option either male or
female. How you will determine that the
user’s selected option is male or female?

 Here we will use the conditional statements

such as if-else statement to determine
about the selected option.

By: Adnan Amin (Lecturer/ Software Progr) 16

Find value of selected radio button. Do Practice •Create the Following Controls
• RadioButton1
• RadioButton2
• Label2
• Button

Type the following code into

Button_Click event
If RadioButton1.Checked Then
Label2.Text = "Male"
Elseif RadioButton2.Checked Then
Label2.Text = "Female“
Else
Label2.Text=“No gender”
End If

By: Adnan Amin (Lecturer/ Software Progr) 17

 Assignment #1
Issue date: 29/08/2010 Submit before: 01/09/2010

asp.net web form output

First Name: First Name: Atif

Last Name: Last Name: Amin

Gender: Male Female Gender: Male

Country: Country: Afghanistan

Address: Address: Institute of higher

education kabul.

Submit

By: Adnan Amin (Lecturer/ Software Progr) 18

 Thank You!
 Visit:
◦ www.geoamins.com
 Written By
◦ Adnan Amin

By: Adnan Amin (Lecturer/ Software Progr) 19