session 5 - trandinhvi.files.wordpress.comexploring asp.net / session 5 / 3 of 29 review contd…...

Session 5

Web Server Controls

Exploring ASP.NET / Session 5 / 2 of 29

Review

The @ Page directive is used to specify attributes that affect the code in the .aspx page.

The <script> section is where most of the code for providing the required functionality is written.

There are two types of server controls: HTML Controls Web Controls

All event procedures receive two arguments from the events: The event sender The class instance that holds data for the event

The _VIEWSTATE control is a hidden control that is added to the form when the form is submitted to the server.

It is possible to check whether a .aspx page is posted back to the server, with the help of the IsPostBack property of the page.


Review Contd… ASP.NET has several built-in objects that are used to provide the

required functionality in an ASP.NET application. They are the following: Request Response Application Session Server ObjectContext

The base directory is called the virtual root, and the directory in which we store the application files is called the virtual directory.

The Request object corresponds to the request message of the HTTP protocol, and the Response object corresponds to the response message of the HTTP protocol.

The Form.Get method of the Request object is used to retrieve the data submitted by the user.

The Redirect method of the Response object is used to redirect the user to another page.


Objectives

Explain Web Controls

Explain why controls are objects

Use Controls for Text Entry

Use Controls for Control Transfer

Use Controls for Selection

Discuss Rich Controls


Web Controls

ASP.NET

Controls

Intrinsic

List

Rich

Validation


Web Controls as Objects

Like objects, web controls possess methods and properties, and respond to events

It is possible to set the properties and call the methods of the web controls once they are included onto the web page

Server-side code can be written for the web control to respond to events that occur on the client-side


Web Controls as Objects - Example

<html> <script language="C#" runat ="server" > void Button1click(Object Src, EventArgs E) { lblMessage.Text =Src.ToString(); btnButton1.Enabled = false; btnButton2.Visible = true; } void Button2click(Object Src, EventArgs E) { lblMessage.Text=""; btnButton2.Visible = false; btnButton1.Enabled = true; } </script>


Web Controls as Objects - Example

<body> <form runat="server"> <asp:label id="lblMessage" text="Click on the button"

runat="server"/> <br><br> <asp:button id="btnButton1" type = submit text= "Click

me to know who I am" OnClick="Button1click" runat = "server" /> <asp:button id="btnButton2" type = submit text=

"Clear the label" visible=false OnClick="Button2click" runat = "server" />

<br> </form> </body> </html>


Web Controls as Objects - Output

Output of Example 1

Before clicking the button

Output of Example 1

After clicking the button


<input type=

“checkbox”>

<input type= “radio”>

<asp:CheckBox>

<asp:RadioButton>

<asp:TextBox rows=“1”>

<asp:TextBox rows=“10”>

<input type= “text”>

< textarea>

Intrinsic Controls


<asp:textbox id="name"

runat="server"/>

<asp:textbox id="add"

textmode="multiline" rows=“10"

columns="10" runat="server"/>

<asp:textbox id="pwd"

textmode="password" runat="server"/>

Text Entry - Intrinsic Control


Posting data back

to the server

Navigate between the pages

Save or access

data from the

server

Control Transfer - Intrinsic Control


Control Transfer


<asp:checkbox id="chkbx1" Text="Select Me" runat="server"/>

Intrinsic Control: Selection

<asp:CheckBoxList id="CheckBoxList1" runat="server">

<asp:ListItem Value="Maths">Maths</asp:ListItem>

<asp:ListItem Value="Science">Science</asp:ListItem>

<asp:ListItem Value="English">English</asp:ListItem>

<asp:ListItem

Value="Computers">Computers</asp:ListItem>

</asp:CheckBoxList>



<asp:radiobutton id ="radbt1" Text =" Radio Button no 1"

groupname="radio" runat="server"/>

<asp:radiobutton id ="radbt2" Text =" Radio Button no 2"


<asp:radiobutton id ="radbt3" Text =" Radio Button no 3“



<asp:listbox id="lstbx1" SelectionMode=”Single”

runat="server"/>

<asp:dropdownlist id= "dropdnlst1" runat="server" />


<asp:RadioButtonList id="RadioButtonList1" runat="server">

<asp:ListItem Value="Red">Red</asp:ListItem>

<asp:ListItem Value="Blue">Blue</asp:ListItem>

<asp:ListItem Value="Green">Green</asp:ListItem>

<asp:ListItem Value="Yellow">Yellow</asp:ListItem>

</asp:RadioButtonList>


ArrayList arrlist= new

ArrayList();

arrlist.Add ("Four");

arrlist.Add ("Five");

arrlist.Add ("Six");

ddl.DataSource =arrlist;

void Page_Load (Object Src, EventArgs E)

{

ddl.Items.Add("<10");

ddl.Items.Add("10-20");




ddl.Items.Add(">50");

}

<asp:listbox id="lbs" runat="server">

<asp:ListItem> One </asp:ListItem>

<asp:ListItem> Two </asp:ListItem>

<asp:ListItem> Three </asp:ListItem>

</asp:listbox>

<asp:dropdownlist id= "ddl"

runat="server" >

<asp:ListItem> One </asp:ListItem>

<asp:ListItem> Two </asp:ListItem>

<asp:ListItem> Three </asp:ListItem>

</asp:dropdownlist>

Intrinsic Control: Selection – Methods to populate data


<asp:panel id="panel1" Visible="False" runat="server" >

<asp:textbox id="OldPwd" textmode="password"

runat="server"/>

<asp:textbox id="NewPwd" textmode="password"

runat="server"/>

</asp:panel>

Container controls can contain other controls. One of the main uses of container controls, is that the

visibility of a group of controls can be changed at one point by placing them in a container control, and setting the property of the container control.

Container


Used for changing

the advertisements

on the web pages

Gives full functionality of

a calendar

Rich Controls


<Advertisements>

<Ad>

<ImageUrl> </ImageUrl>

<TargetUrl> </TargetUrl>

<AlternateText>

</AlternateText>

<Keyword> </Keyword>

<Impressions>

</Impressions>

</Ad>

</Advertisements>

Absolute or relative Url of the image file

Target website after clicking the Ad

Text that will be displayed when

the mouse is rolled over the

image

Category assigned to the ad

Priority of the advertisement in

the schedule of rotation

AdRotator


AdRotator – Output


Calendar Control

Simple to use, and gives us the full functionality of a calendar

The calendar can be created and formatted to suit the look and feel of the web page.

Example -

<asp:calendar id="calender1" runat="server"

backcolor="white" forecolor="black"

borderwidth="2" Bordercolor="black"

showgridlines="true"/>


Calendar Control

In most cases, a calendar is used to allow the user to quickly choose a date, instead of manually typing it in

The calendar control responds to two events

Date Changes

Month Changes


Calendar Control - Example <html>

<script language="C#" runat ="server" >

void date_changed(Object sender,EventArgs e)

{

lblMessage.Text= "The date(s) you have selected is:

From " + calendar1.SelectedDates[0].ToShortDateString() + "

to " + calendar1.SelectedDates[calendar1.SelectedDates.Count

- 1].ToShortDateString();

}

void month_changed(Object sender,MonthChangedEventArgs e)

{

lblCur_m.Text= "The current month you selected is: "

+ e.NewDate.ToString("Y");

lblPrev_m.Text= "The previous month you selected is:

" + e.PreviousDate.ToString("Y");

}

</script>


Calendar Control - Example

<body>

<form runat="server">

<table>

<tr>

<td>

<asp:calendar id="calendar1" runat="server"

OnSelectionChanged="date_changed"

OnVisibleMonthChanged="month_changed"

SelectionMode="DayWeekMonth" borderwidth="3"

Bordercolor="red" showgridlines="true">

<SelectedDayStyle BackColor="Yellow" ForeColor="Red">

</SelectedDayStyle>

</asp:Calendar>

</td>

<td>&nbsp &nbsp

<asp:label id="lblMessage" runat = "server"/><br>


Calendar Control - Example

<br>&nbsp &nbsp

<asp:label id="lblCur_m" runat = "server"/>

<br>

<br>&nbsp &nbsp

<asp:label id="lblPrev_m" runat = "server"/>

</td>

</tr>

</table>

</form>

</body>

</html>


Calendar Control - Output


Summary

There are four sets of controls in ASP.NET: Intrinsic Controls List Controls Rich Controls Validation Controls

Like objects, web controls possess methods and properties and respond to events.

ASP.NET provides three intrinsic controls for entering text. They

are as follows: Single Line Entry Multi-Line Entry Password Entry


Summary Contd…

There are four controls in ASP.NET that can be used to navigate between pages, or transfer control to a specified page: Button

LinkButton

ImageButton

Hyperlink

ASP.NET provides the following set of selection controls: Checkbox

RadioButton

Listbox

DropDownList

ASP.NET provides container controls, that is, the controls that can contain other controls.

ASP.NET provides two rich controls: AdRotator Control

Calendar Control

session 5 - trandinhvi.files.wordpress.comexploring asp.net / session 5 / 3 of 29 review contd…...

Documents