New Information Technology

ASP.NET
By: Dr. Galal AL-Marzoqi

1
 Lecture 3

ASP.NET Web Forms and Server Controls

Web forms are considered one of the types of website template, also Web forms

are web pages built on ASP.NET technology. It is executed on the server and

generates the output to the browser.

We can use Visual Studio to create ASP.NET web forms. It is an integrated

development environment (IDE) that allows us to drag and drop server controls

into web forms.

It also allows us to set:

1. Properties,

2. Events,

3. Methods for controls.

We can choose any .NET language such as: VB or Visual C#.

➢ Working with Web Forms

Web Forms represented by .aspx files are the central of any ASP.NET Web Forms

website and the Web Forms can contain a mix:

(of HTML, ASP.NET Server Controls, client-side JavaScript, CSS, and

programming logic).

2
➢ The Different Views on Web Forms
In this section, see three buttons that enables you to look at your Web Form from different
views. in Figure below, we can see three buttons so important:

1. Design button: The Design button enables you to switch the Document Window into Design
View, which gives you an idea of how the page will end up.

2. The Split button: Split View is great if you want to see the code that VS generates when you
add controls to the Design View of your page.

3. Source button: View is the default view when you open a page. It shows you the raw HTML
and other markup for the page, and is very useful if you want to tweak the contents of a page ( it
is can see all code).

3
 Server Controls
Server Control is a tag written in a Web page to represent a programmable server-
side object used for displaying a user interface element in a Web page.
ASP.NET server controls are tags that can be understood by the server.

➢ TYPES OF CONTROLS

ASP.NET uses five types of web controls or more:

⚫ Standard Controls ⚫ Data Controls ⚫ Navigation Controls
⚫ HTML Controls ⚫ HTML Server Controls ⚫ Server Controls
⚫ Ajax Server Controls

4
 ➢ Standard Controls (Simple and List Controls)
It easy for you to find the right controls, they have been placed in separate
control categories in the VS Toolbox (accessible by pressing Ctrl+Alt+X).

1. Simple Controls:

The simple controls represent some controls such as (TextBox, Button, Label,
HyperLink, RadioButton, and CheckBox) that found in standard control inside
Toolbox.
We can descript some controls. The table represents some simple controls that found in
Standard Controls
Control Name Suitable Events Description
TextBox TextChanged It is used to create a text input in the form.
Button Click, Command It is used to create a button.
Label None It is used to display text on the HTML page.
HyperLink None It is used to create a hyperlink control that responds to a click
event.
RadioButton CheckChanged It is used to create radio button.
CheckBox CheckChanged It is used to create checkbox.

5
✓ TextBox

This is an input control which is used to take user input. To create TextBox either
we can write code or use the drag and drop ability of visual studio IDE.
The example is given below
✓ This is server-side control, asp provides own tag to create it.
< asp:TextBoxID="TextBox1" runat="server" ></asp:TextBox>

- The ID is important that each control on the page has a unique ID.
- The runat attribute is used to indicate to control that lives on the server.

✓ Server renders it as the HTML control and produces the following code to the browser.
<input name="TextBox1" id="TextBox1" type="text">

➢ This control has properties in table below.

property Description

AccessKey It is used to set keyboard shortcut for the control.

TabIndex The tab order of the control.

BackColor It is used to set background color of the control.

BorderColor It is used to set border color of the control.

BorderWidth It is used to set width of border of the control.

Font It is used to set font for the control text.

ForeColor It is used to set color of the control text.

Text It is used to set text to be shown for the control.

ToolTip It displays the text when mouse is over the control.

Note: The TextBox contains an important property called TextMode. By using this property
you can set textbox as:
• SingleLine mode: is default mode of textbox control to enter data in a single line.
• MultiLine mode: enables user to enter text in more than one line.
• Password mode: text is hidden the values entered by the user.

6
✓ Button
It is used to submit client request to the server or a command button. To
create Button either we can write code or use the drag and drop facility of visual
studio IDE.

➢ There are three types of buttons control available in ASP.NET:

• Button
• Link Button
• Image Button

The example is given below.

✓ This is a server-side control and asp provides own tag to create it.
< asp:ButtonID="Button1" runat="server" Text="Submit" BorderStyle="Solid" Tool
Tip="Submit"/>

✓ Server renders it as the HTML control and produces the following code to the
browser.

<input name="Button1" value="Submit" id="Button1" title="Submit" style="border-

style:Solid;" type="submit">

➢ This control has its own properties that are tabled below.

Property Description

AccessKey It is used to set keyboard shortcut for the control.

TabIndex The tab order of the control.

BorderWidth It is used to set width of border of the control.

Font It is used to set font for the control text.

ForeColor It is used to set color of the control text.

Visible To set visibility of control on the form.

7
 C# Code:
1. using System;

2. using System.Collections.Generic;

3. using System.Linq;

4. using System.Web;

5. using System.Web.UI;

6. using System.Web.UI.WebControls;

7. namespace WebFormsControlls

8. {

9. public partial class WebControls : System.Web.UI.Page

10. {

11. protected void Button1_Click(object sender, EventArgs e)

12. {

13. Label1.Text = "You Clicked the Button.";

14. } } }

Output:

This button displays a message when clicked, as shown below.

8
✓ HyperLink
It is a control used to create a hyperlink and responds to a click event. We can use
it to refer any web page on the server. To create HyperLink either we can write
code or use the drag and drop ability of visual studio IDE. This control is listed in
the toolbox.

✓ Server-side control and ASP.NET provides own tag to create it.

< asp:HyperLinkID="HyperLink1" runat="server" Text="JavaTpoint" Navi
gateUrl="www.javatpoint.com" ></asp:HyperLink>

✓ Server renders it as the HTML control and produces the following code to the
browser.

<a id="HyperLink1" href="www.javatpoint.com">JavaTpoint</a>

➢ This control has its own properties that are tabled below.

Property Description

AccessKey It is used to set keyboard shortcut for the control.

TabIndex The tab order of the control.

BackColor It is used to set background color of the control.

BorderColor It is used to set border color of the control.

Font It is used to set font for the control text.

Text It is used to set text to be shown for the control.

Visible To set visibility of control on the form.

NavigateUrl It is used to set navigate URL.

Target Target frame for the navigate url.

9
This property window shows properties for the HyperLink control.

Output:

This link redirects to Javatpoint home page.

10
 2. List Controls:

These controls include ListBox, DropDownList, CheckBoxList and

RadioButtonList. To add items to the list, you define elements between the
opening and closing tags of the control, as shown in the following example:

Control Name Suitable Events Description

ListBox SelectedIndexCnhaged It is used to create a ListBox control like
the HTML control.
DropDownList SelectedIndexChanged It is used to create a dropdown list.
CheckBoxList SelectedIndexChanged It is used to create a group of check boxes.
RadioButtonList SelectedIndexChanged It is used to create a group of radio button
controls

✓ DropDownList

The DropDownList is a web server control that used to create an HTML Select
element. It allows to select an option from the dropdown list. It can contain any
number of items.
✓ There are two ways for create DropDownList in asp.net:

• The first way: We can create DropDownList by code:

<asp:DropDownList ID="DropDownList1" runat="server" >

<asp:ListItem Value="">Please Select</asp:ListItem>

<asp:ListItem>New Delhi </asp:ListItem>

<asp:ListItem>Yemen</asp:ListItem>

<asp:ListItem>NewYork</asp:ListItem>

</asp:DropDownList>

11
 ➢ The second way: We can create DropDownList by use the drag and drop
ability of visual studio.

Click on the items (collection) and it will pop up a new window as given below. It provides add
button to add new items to the list, see figure 3 and 4

Adding item to the DropDownList, by providing values to the Text and Value properties. We
have added more items to it and now, it looks like the following in figure 5 and 6.

12
After that, we create button control by C# for using DropDownlist.
Code C#:
protected void Button1_Click(object sender, EventArgs e)
{
if (DropDownList1.SelectedValue == "") {
Label1.Text = "Please Select a City";
else }
Label1.Text = "Your Choice is: " + DropDownList1.SelectedValue; }

Create some slandered controls in Lab?

13