Programming Using C# & .

NET Module 4 & 5 1

MODULE – 4
Graphical User Interface and Windows Form

1. GUI and Basic Controls:

A graphical user interface (GUI) allows a user to interact visually with a program gives a program a distinctive
“look” and “feel”.
GUIs are built from GUI controls which are sometimes called components or widgets (window gadgets). GUI
controls are objects that can display information on the screen or enable users to interact with an application via
the mouse, keyboard or some other form of input.
Several common GUI controls are listed in below table:
Table 1.1: Some basic GUI Controls
Control Description
Label Displays images or uneditable text.
Enables the user to enter data via the keyboard.
TextBox
It can also be used to display editable or uneditable text.
Button Triggers an event when clicked with the mouse.
CheckBox Specifies an option that can be selected (checked) or unselected (not checked).
Provides a drop-down list of items from which the user can make a selection
ComboBox
either by clicking an item in the list or by typing in a box.
Provides a list of items from which the user can make a selection by clicking one
ListBox
or more items.
Panel A container in which controls can be placed and organized.
NumericUpDown Enables the user to select from a range of numeric input values.

2. Event Handling in GUI:

GUIs are event driven. When the user interacts with a GUI component, the interaction — known as an event—
drives the program to perform a task.
 Common events that might cause an application to perform a task include clicking a Button, typing in a
TextBox, selecting an item from a menu, closing a window and moving the mouse. All GUI controls have
events associated with them.
 A method that performs a task in response to an event is called an event handler, and the overall process of
responding to events is known as event handling.
Example: The Form shown below contains a Button that a user can click to display a MessageBox.

Mrs. Suma M G, AP, Dept. of MCA, RNSIT for latest updates visit: www.google/+sumamgrnsit
Programming Using C# & .NET Module 4 & 5 2

Example:
using System;
using System.Text;
using System.Windows.Forms;
namespace WFormsDemo{
// Form that shows a simple event handler
public partial class SimpleEventExample : Form {
public SimpleEventExample () {
InitializeComponent();
}
// handles click event of Button button1
private void button1_Click(object sender, EventArgs e){
MessageBox.Show("Button was Clicked");

}
}
}

 By convention, the IDE names the event-handler method as objectName_eventName

(e.g., btton1_Click). The button1_Click event handler executes when the user clicks the button control.
 Each event handler receives two parameters when it’s called.
— The first — an object reference typically named sender is a reference to the object that generated
the event.
/*private void- button1_Click(object
— The second sender, EventArgs
is a reference to an event arguments e)EventArgs
object of type
{
MessageBoxButtons yesb = MessageBoxButtons.YesNo;
3. Label and LinkLabel control:dgre=
DialogResult MessageBox.Show("Hello",
"Message",yesb,MessageBoxIcon.Warning);
Label:
if (dgre == DialogResult.Yes)
 Labels provide text information
this.Close(); as well as images and are defined with class Label.
else
 A Label displays text that the user cannot directly modify.
MessageBox.Show("Demo");
 A Label’s text
}*/ can be changed programmatically by modifying the Label’s Text property.
Lists common Label Common Properties Description
properties. Font The font of the text on the Label.
Text The text on the Label.
The alignment of the Label’s text on the control —
 horizontally (left, center or right) and
TextAlign  vertically (top, middle or bottom).
 The default is top, left.
LinkLabel:
 The LinkLabel control displays links to other resources, such as files or web pages.
 A LinkLabel appears as underlined text (colored blue by default).
 When the mouse moves over the link, the pointer changes to a hand; this is similar to the behaviour of a
hyperlink in a web page.
 The link can change color to indicate whether it is not yet visited, previously visited or active.
 When clicked, the LinkLabel generates a LinkClicked event.
 Class LinkLabel is derived from class Label and therefore inherits all of class Label’s functionality.
Mrs. Suma M G, AP, Dept. of MCA, RNSIT for latest updates visit: www.google/+sumamgrnsit
Programming Using C# & .NET Module 4 & 5 3

List of common properties and Even of LinkLabel:

properties and an event Description
Specifies the color of the active link when the user is in the process
ActiveLinkColor of clicking the link. The default color (typically red) is set by the
system
LinkArea Specifies which portion of text in the LinkLabel is part of the link.
Specifies the link’s behavior, such as how the link appears when the
LinkBehavior
mouse is placed over it.
LinkColor Specifies the original color of the link before it’s been visited.
The default color (typically blue) is set by the system.
LinkVisited If true, the link appears as though it has been visited (its color is
changed to that specified by property VisitedLinkColor).
The default value is false.
Text Specifies the control’s text.
UseMnemonic If true, the & character in the Text property acts as a shortcut (similar
to the Alt shortcut in menus).
VisitedLinkColo Specifies the color of a visited link. The default color (typically
purple) is set by the system.
(Event arguments LinkLabelLinkClickedEventArgs)
Common Event
Generated when the link is clicked. This is the default event when
LinkClicked
the control is double clicked in Design mode.
Example:

using System;
using System.Windows.Forms;
namespace LinkLabelTest{
public partial class LinkLabelTestForm : Form{
public LinkLabelTestForm(){
InitializeComponent();
}
private void cDriveLinkLabel_LinkClicked( object sender,
LinkLabelLinkClickedEventArgs e) {
driveLinkLabel.LinkVisited = true;
System.Diagnostics.Process.Start( @"C:\" );
}
private void displaylabel_Click(object sender, EventArgs e){
// display the text that the user typed
displayPasswordLabel.Text = inputTextBox.Text;
}
}
}

Mrs. Suma M G, AP, Dept. of MCA, RNSIT for latest updates visit: www.google/+sumamgrnsit
Programming Using C# & .NET Module 4 & 5 4

4. Class controls methods and properties.

Controls derive from class Control (namespace System.Windows.Forms).Some of class Control’s properties and
methods listed below:

Form properties,
Description
methods & an event
AcceptButton Button that is clicked when Enter is pressed.
AutoScroll bool value that allows or disallows scrollbars when needed.
Properties

CancelButton Button that is clicked when the Escape key is pressed.

FormBorderStyle Border style (e.g., none, single, three-dimensional).
Font of text displayed on the Form, and the default font for controls
Font
added to the Form.
Text Text in the Form’s title bar.

Closes a Form and releases all resources, such as the memory used for
Close
Methods

the Form’s contents. A closed Form cannot be reopened.

Hide Hides a Form, but does not destroy the Form or release its resources.
Show Displays a hidden Form.
Occurs before a Form is displayed to the user. The handler for this event
Event

Load is displayed in the Visual Studio editor when you double click the Form
in the Visual Studio designer.

5. MonthCalendar and DateTimePicker:

The MonthCalendar control “displays a monthly calendar on the Form”. The user can select a date from the
currently displayed month or can use the provided arrows to navigate to another month.

 The user can select a date from the currently displayed month or can use the provided arrows to navigate
to another month. When a date is selected, it is highlighted.
 Multiple dates can be selected by clicking dates on the calendar while holding down the Shift key.
 The default event for this control is the DateChanged event, which is generated when a new date is
selected.
 Properties are provided that allow you to modify the appearance of the calendar, how many dates can be
selected at once, and the minimum date and maximum date that may be selected.

Mrs. Suma M G, AP, Dept. of MCA, RNSIT for latest updates visit: www.google/+sumamgrnsit
Programming Using C# & .NET Module 4 & 5 5

MonthCalendar properties and a common MonthCalendar event are summarized in below table.

Properties and Event Descriptions

Sets which day of the week is the first displayed for each week in
FirstDayOfWeek
the calendar
MaxDate The last date that can be selected.
MaxSelectionCount The maximum number of dates that can be selected at once
MinDate The first date that can be selected.
MonthlyBoldedDates An array of dates that will displayed in bold in the calendar.
SelectionEnd The last of the dates selected by the user.
SelectionRange The dates selected by the user.
SelectionStart The first of the dates selected by the user.
Common MonthCalendar Event
DateChanged Generated when a date is selected in the calendar.
.
The DateTimePicker control is similar to the MonthCalendar control but “displays the calendar when a
down arrow is selected”.
 The DateTimePicker can be used to retrieve date and time information from the user.
 The DateTimePicker is also more customizable than a MonthCalendar control — more properties are
provided to edit the look and feel of the drop-down calendar.
DateTimePicker properties and a common event are listed below:

Properties and Event Descriptions

CalendarForeColor Sets the text color for the calendar.
CalendarMonthBackground Sets the calendar’s background color.
CustomFormat Sets the custom format string for the user’s options.
Format Sets the format of the date and/or time used for the user’s options.
The values are enumeration type, that are:
— Long (displays the date in long format, as in Thursday, July 10, 2010)
— Short (displays the date in short format, as in 7/10/2010),
— Time (displays a time value, as in 5:31:02 PM)
— Custom (indicates that a custom format will be used).
MaxDate and MinDate The maximum and minimum date and time that can be selected.
Indicates if a CheckBox should be displayed to the left of the selected
ShowCheckBox
date and time.
ShowUpDown Indicates whether the control displays up and down Buttons.
stores a DateTime object, which always contains both date and time
information which is selected by user.
— Retrieve the date information from the DateTime object by using
Value property Date,
— Retrieve only the time information by using the TimeOfDay
property.

Mrs. Suma M G, AP, Dept. of MCA, RNSIT for latest updates visit: www.google/+sumamgrnsit
Programming Using C# & .NET Module 4 & 5 6

Properties and Event Descriptions

Common DateTimePicker Event Generated when the Value property changes, including when the user
ValueChanged selects a new date or time.

6. Display hidden text in a password textbox:

using System;
using System.Windows.Forms;
namespace LabelTextBoxButtonTest{
public partial class LabelTextBoxButtonTestForm : Form{
public LabelTextBoxButtonTestForm(){
InitializeComponent();
} // end constructor
private void displayPasswordButton_Click(object sender, EventArgs e)
{
displayPasswordLabel.Text = inputPasswordTextBox.Text;
}
}
}

7. Anchoring and Docking:

Anchoring and Docking is used to specify the layout of controls inside a container(Form).
 Anchoring causes controls to remain at a fixed distance from the sides of the container even when
the container is resized.
 Anchoring enhances the user experience.
 By default, most controls are anchored to the top-left corner of the Form.
 Anchor one control to the right and bottom sides by setting the Anchor property as shown in
below figure.

Mrs. Suma M G, AP, Dept. of MCA, RNSIT for latest updates visit: www.google/+sumamgrnsit
Programming Using C# & .NET Module 4 & 5 7

After set the anchor property to Bottom, Right, now execute the application and shown as below:

 Docking attaches a control to a container such that the control stretches across an entire side or fills
an entire area.
 Docking allows a control to span an entire side (left, right, top or bottom) of its parent
container or to fill the entire container.
 When the parent control is resized, the docked control resizes as well.
 When the Form is resized, the Button is resized to the Form’s new width.
 Forms have a Padding property that specifies the distance between the docked controls and
the Form edges. This property specifies four values (one for each side),and each value is set
to 0 by default.

8. ToolTips Controls and its properties and events:

ToolTips serve as useful reminders for each toolbar icon’s functionality. ToolTips is used to remind users of
each control’s purpose.
Example: Microsoft Word has tooltips that help users determine the purpose of the application’s icons.
Common properties and a common event of class ToolTip described below:

Properties and Events Description

AutoPopDelay The amount of time (in milliseconds) that the tool tip appears while the
mouse is over a control.
InitialDelay The amount of time (in milliseconds) that a mouse must hover over a
control before a tool tip appears.
ReshowDelay The amount of time (in milliseconds) between which two different tool
tips appear (when the mouse is moved from one control to another).
Common Event Raised when the tool tip is displayed. This event allows programmers to
Draw modify the appearance of the tool tip.

Mrs. Suma M G, AP, Dept. of MCA, RNSIT for latest updates visit: www.google/+sumamgrnsit
Programming Using C# & .NET Module 4 & 5 8

The following figures shows how to create and set the tooltips controls:
i. We named the ToolTip component labelsToolTip.

ii. We set the tool tip text for the first Label to "First Label" and the tool tip text for the second Label to
"Second Label”.

iii. Demonstrates the ToolTip component.

Mrs. Suma M G, AP, Dept. of MCA, RNSIT for latest updates visit: www.google/+sumamgrnsit
Programming Using C# & .NET Module 4 & 5 9

Windows Presentation Foundation [WPF]

WPF is a UI framework, which helps you to create interactive client applications.
 It supports various application development features, such as controls, graphics, layout, and data binding.
 WPF uses XAML language for application programming.
 Can use WPF for creating both standalone and browser-hosted applications.
WPF 4.0 has several improvements and enhancements over its previous version, WPF 3.5. Some new features
of WPF 4.0 includes following:

 New WPF controls to develop business applications

 Support for development of touch-enabled application
 Easing functions for enhancing animations
 Visual State Manager(VSM)
 Selection and Caret brushes
 New WPF text rendering stack
 Improvement in XAML browser Applications(SBAPs)

Let’s explore these features of WPF 4.0 in detail:

1. New WPF Controls:

There are three new controls: i. DataGrid ii. Calendar iii. DatePicker
Let’s look the brief description for these:
i. DataGrid controls:
A DataGrid is a control that displays data in a customizable grid. It provides a flexible way to display a
collection of data in rows and columns.
 It generates columns automatically, on the basis of the type of the data stored in them, by setting the
ItemSource property.
 Can perform various operations, such as grouping, sorting, and filtering on the data stored in the
DataGrid control.
 Enables to perform validation on the cell and row levels.
o Cell – validate the properties of a bound data object when another user updates the value.
o Row – validate the entire data object when another user modifies the data in a row.

ii. Calendar Controls:

Calendar is a control that enables you to select a date from a visual calendar. It can be used as a separate control
of the drop down part of the DatePicker control.
The default view of the Calendar control looks

Mrs. Suma M G, AP, Dept. of MCA, RNSIT for latest updates visit: www.google/+sumamgrnsit
Programming Using C# & .NET Module 4 & 5 10

We can change the Display mode to Year and Decade generates by setting the property DisplayModes.

Year Decades

Mrs. Suma M G, AP, Dept. of MCA, RNSIT for latest updates visit: www.google/+sumamgrnsit
Programming Using C# & .NET Module 4 & 5 11

Module – 5
Web App Development and DataAccess using ADO.NET

1. Multi-tier Applications Architecture:

Web-based applications are multitier applications and also referred as n-tier applications.
 Multitier applications divide functionality into separate tiers (that is, logical groupings of functionality).
 Tiers can be located on the same computer, the tiers of web-based applications commonly reside on
separate computers for security and scalability.

There are 3 tiers. They are:

i. Information Tier:
 The information tier also called the bottom tier.
 It maintains the application’s data.
 This tier typically stores data in a relational
database management system.
Example: A retail store might have a database for
storing product information, such as descriptions,
prices and quantities in stock.
The same database also might contain customer
information, such as user names, billing addresses
and credit card numbers.
 This tier can contain multiple databases, which
together comprise the data needed for an
application.

ii. Business Logic: Figure5.1: Basic architecture of a three-tier web-based

application
 The middle tier implements business logic,
controller logic and presentation logic to control interactions between the application’s clients and its
data.
 The middle tier acts as an intermediary between data in the information tier and the application’s clients.
 The middle-tier controller logic processes client requests (such as requests to view a product catalog)
and retrieves data from the database.
 The middle-tier presentation logic then processes data from the information tier and presents the content
to the client.
 Web applications typically present data to clients as web pages.
 Business logic in the middle tier enforces business rules and ensures that data is reliable before the server
application updates the database or presents the data to users.
 Business rules dictate how clients can and cannot access application data, and how applications process
data.
Mrs. Suma M G, AP, Dept. of MCA, RNSIT for latest updates visit: www.google/+sumamgrnsit
Programming Using C# & .NET Module 4 & 5 12

Example: A business rule in the middle tier of a retail store’s web-based application might ensure that all
product quantities remain positive.
A client request to set a negative quantity in the bottom tier’s product information database would be rejected
by the middle tier’s business logic.

iii. Client Tier:

 The client tier, or top tier, is the application’s user interface, which gathers input and displays output.
 Users interact directly with the application through the user interface (typically viewed in a web
browser), keyboard and mouse.
 In response to user actions (Example: clicking a hyperlink), the client tier interacts with the middle
tier to make requests and to retrieve data from the information tier.
 The client tier then displays to the user the data retrieved from the middle tier.
 The client tier never directly interacts with the information tier.

2. Validation Controls in ASP.NET:

Validation control or Validator, which determines whether the data in another web control is in the proper
format.
 Validators provide a mechanism for validating user input on the client.
 When the page is sent to the client, the validator is converted into JavaScript that performs the validation
in the client web browser.
 JavaScript is a scripting language that executed on the client. Unfortunately, some client browsers might
not support scripting or the user might disable it.
For this reason, you should always perform validation on the server. ASP.NET validation controls can function
on the client, on the server or both.
An important aspect of creating ASP.NET Web pages for user input is to be able to check that the information
users enter is valid. ASP.NET provides a set of validation controls that provide an easy-to-use but powerful way
to check for errors and, if necessary, display messages to the user.
There are six types of validation controls in ASP.NET that listed below:
The below table describes the controls and their work:
Validation Control Description
RequiredFieldValidation Makes an input control a required field
Compares the value of one input control to the value of another input
CompareValidator
control or to a fixed value
RangeValidator Checks that the user enters a value that falls between two values
RegularExpressionValidator Ensures that the value of an input control matches a specified pattern
Allows you to write a method to handle the validation of the value
CustomValidator
entered
ValidationSummary Displays a report of all validation errors occurred in a Web page
All these validation control classes are inherited from the BaseValidator class hence they inherit its properties
and methods that are ControlToValidate, Display, EnableClientScript, Enabled, Text, isValid, and validate()
method.

Mrs. Suma M G, AP, Dept. of MCA, RNSIT for latest updates visit: www.google/+sumamgrnsit
Programming Using C# & .NET Module 4 & 5 13

RequiredFieldValidator Control:
The RequiredFieldValidator control ensures that the required field is not empty. It is generally tied to a text box
to force input into the text box.
Syntax: <asp:RequiredFieldValidator ID="rfvcandidate"
runat="server" ControlToValidate ="ddlcandidate"
ErrorMessage="Please choose a candidate"
InitialValue="Please choose a candidate">
</asp:RequiredFieldValidator>

RangeValidator Control:
The RangeValidator control verifies that the input value falls within a predetermined range.
It has three specific properties:
Properties Description
It defines the type of the data. The available values are: Currency, Date,
Type
Double, Integer, and String.
MinimumValue It specifies the minimum value of the range.
MaximumValue It specifies the maximum value of the range.

Syntax: <asp:RangeValidator ID="rvclass" runat="server"

ControlToValidate="txtclass"
ErrorMessage="Enter your class (6 - 12)" MaximumValue="12"
MinimumValue="6" Type="Integer">
</asp:RangeValidator>

CompareValidator Control:
The CompareValidator control compares a value in one control with a fixed value or a value in another control.
It has the following specific properties:
Properties Description
Type It specifies the data type.
ControlToCompare It specifies the value of the input control to compare with.
ValueToCompare It specifies the constant value to compare with.
It specifies the comparison operator, the available values are: Equal,
Operator NotEqual, GreaterThan, GreaterThanEqual, LessThan, LessThanEqual,
and DataTypeCheck.

Syntax:
<asp:CompareValidator ID="CompareValidator1" runat="server"
ErrorMessage="CompareValidator">
</asp:CompareValidator>

Mrs. Suma M G, AP, Dept. of MCA, RNSIT for latest updates visit: www.google/+sumamgrnsit
Programming Using C# & .NET Module 4 & 5 14

RegularExpressionValidator:
The RegularExpressionValidator allows validating the input text by matching against a pattern of a regular
expression. The regular expression is set in the ValidationExpression property.
The following table summarizes the commonly used syntax constructs for
Regular expressions: \b, \n, \,\f, \r, \v, \t
Metacharacters: ., [abcd], [^abcd], [a-zA-Z], \w, \W, \s, \S, \d, \D
Quantifiers: *, +, ?, {n}, {n, }, {n,m}
Syntax:
<asp:RegularExpressionValidator ID="string" runat="server"
ErrorMessage="string" ValidationExpression="string"
ValidationGroup="string">
</asp:RegularExpressionValidator>

CustomValidator:
The CustomValidator control allows writing application specific custom validation routines for both the client
side and the server side validation.

 The client side validation is accomplished through the ClientValidationFunction property. The client
side validation routine should be written in a scripting language, such as JavaScript or VBScript, which
the browser can understand.
 The server side validation routine must be called from the control's ServerValidate eventhandler. The
server side validation routine should be written in any .Net language, like C# or VB.Net.
Syntax:
<asp:CustomValidator ID="CustomValidator1" runat="server"
ClientValidationFunction=.cvf_func.
ErrorMessage="CustomValidator">
</asp:CustomValidator>

ValidationSummary:
The ValidationSummary control does not perform any validation but shows a summary of all errors in the page.
The summary displays the values of the ErrorMessage property of all validation controls that failed validation.
The following two mutually inclusive properties list out the error message:
 ShowSummary : shows the error messages in specified format.
 ShowMessageBox : shows the error messages in a separate window.
Syntax:
<asp:ValidationSummary ID="ValidationSummary1" runat="server"
DisplayMode = "BulletList" ShowSummary = "true"
HeaderText="Errors:" />

Mrs. Suma M G, AP, Dept. of MCA, RNSIT for latest updates visit: www.google/+sumamgrnsit
Programming Using C# & .NET Module 4 & 5 15

Validation Groups:
Complex pages have different groups of information provided in different panels. In such situation, a need might
arise for performing validation separately for separate group. This kind of situation is handled using validation
groups.
To create a validation group, you should put the input controls and the validation controls into the same logical
group by setting their ValidationGroup property.

3. Session Management in ASP.Net using Controls:

Cookies: Cookies provide you with a tool for personalizing web pages. A cookie is a piece of data stored by
web browsers in a small text file on the user’s computer. A cookie maintains information about the client during
and between browser sessions.

Session tracking using the .NET class HttpSessionState:

If the user clicks the link for book recommendations, the information stored in the user’s unique
HttpSessionState object is read and used to form the list of recommendations. That can be done using Session
property.

Session Property:
Every Web Form includes a user-specific HttpSessionState object, which is accessible through property Session
of class Page. We use this property to manipulate the current user’s HttpSessionState object.
When a page is first requested, a unique HttpSessionState object is created by ASP.NET and assigned to the
Page’s Session property.
The session object is created from the HttpSessionState class, which defines a collection of session state items.

The HttpSessionState class has the following properties:

Properties Description
SessionID The unique session identifier.
The value of the session state item with the specified name. This is the default
Item(name)
property of the HttpSessionState class.
Count The number of items in the session state collection.
Gets and sets the amount of time, in minutes, allowed between requests before
TimeOut
the session-state provider terminates the session.

The HttpSessionState class has the following methods:

Methods Description
Add(name, value) Adds an item to the session state collection.
Clear Removes all the items from session state collection.
Remove(name) Removes the specified item from the session state collection.
RemoveAll Removes all keys and values from the session-state collection.
RemoveAt Deletes an item at a specified index from the session-state collection.

Mrs. Suma M G, AP, Dept. of MCA, RNSIT for latest updates visit: www.google/+sumamgrnsit
Programming Using C# & .NET Module 4 & 5 16

Example: The session state object is a name- void StoreSessionInfo(){

value pair to store and retrieve some String fromuser = TextBox1.Text;
Session["fromuser"] = fromuser;
information from the session state object. You }
could use the following code for the same: void RetrieveSessionInfo(){
String fromuser = Session["fromuser"];
Label1.Text = fromuser;
}
4. AJAX and other Technologies:
AJAX is differ from other technologies, such as ASP.NET and JSP, which use the postback model. To
understanding, you first need to analyse how other technologies work. Let’s understanding the working of
Traditional web applications with the below figure:

Traditional Web Applications are based on the request-response or

postback model.
 Each client interaction with the UI of a traditional Web
application, an Http request is sent to the server, which
processes the request and sends the results back to the
browser.
 At the time, when this request-response process is in progress,
seeing a blank screen can be quite frustrating at times.
 Considering modern scenario, when more and more transactions
are taking place through the Internet from all over the world, this
time-consuming process can be frustrating.
To remove this shortcoming, AJAX, which implements an entirely
different approach to web development, has been introduce as shows
the AJAX Web Application model:

Traditional web application model

The AJAX Web Application model handles the client-side

activities, such as validations, without making a round trip to the
server.

The tasks that are required to be processed at the server-end are

handled by the AJAX engine.

The AJAX engine makes asynchronous calls to the server without

interrupting the user’s interactions with the UI; therefore it enhances
the user-interactivity and performance, which makes AJAX
different from other technologies.

AJAX web application model

Mrs. Suma M G, AP, Dept. of MCA, RNSIT for latest updates visit: www.google/+sumamgrnsit
Programming Using C# & .NET Module 4 & 5 17

5. AJAX Control ToolKit:

The control toolbox in the Visual Studio IDE contains a group of controls
called the “AJAX Extensions”.

The ScriptManager Control:

The ScriptManager control is the most important control and must be
present on the page for other controls to work.
Syntax: <asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

If you create an 'Ajax Enabled site' or add an 'AJAX Web Form' from the 'Add Item' dialog box, the web form
automatically contains the script manager control.
The ScriptManager control takes care of the client-side script for all the server side controls.

The UpdatePanel Control:

The UpdatePanel control is a container control and derives from the Control class. It acts as a container for the
child controls within it and does not have its own interface.
When a control inside it triggers a post back, the UpdatePanel interferes to initiate the post asynchronously and
update just that portion of the page.
Example: <asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="btnpartial" runat="server"
onclick="btnpartial_Click" Text="Partial PostBack"/>
<br />
<br />
<asp:Label ID="lblpartial" runat="server"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>

Properties of the UpdatePanel Control

The following table shows the properties of the update panel control:
Properties Description
This property indicates whether the post backs are coming from the child
ChildrenAsTriggers
controls, which cause the update panel to refresh.
It is the content template and defines what appears in the update panel
ContentTemplate
when it is rendered.
RenderMode Shows the render modes. The available modes are Block and Inline.
UpdateMode Gets or sets the rendering mode by determining some conditions.
Defines the collection trigger objects each corresponding to an event
Triggers
causing the panel to refresh automatically.

Mrs. Suma M G, AP, Dept. of MCA, RNSIT for latest updates visit: www.google/+sumamgrnsit
Programming Using C# & .NET Module 4 & 5 18

Methods of the UpdatePanel Control

The following table shows the methods of the update panel control:

Methods Description
Creates a Control object that acts as a container for child
CreateContentTemplateContainer
controls that define the UpdatePanel control's content.
Returns the collection of all controls that are contained in the
CreateControlCollection
UpdatePanel control.
Initializes the UpdatePanel control trigger collection if partial-
Initialize
page rendering is enabled.
Update Causes an update of the content of an UpdatePanel control.

The behavior of the update panel depends upon the values of the UpdateMode property and ChildrenAsTriggers
property.
UpdateMode ChildrenAsTriggers Effect
Always False Illegal parameters.
UpdatePanel refreshes if whole page refreshes or a
Always True
child control on it posts back.
UpdatePanel refreshes if whole page refreshes or a
Conditional False
triggering control outside it initiates a refresh.
UpdatePanel refreshes if whole page refreshes or a
Conditional True child control on it posts back or a triggering control
outside it initiates a refresh.

The UpdateProgress Control:

The UpdateProgress control provides a sort of feedback on the browser while one or more update panel controls
are being updated.
Example: While a user logs in or waits for server response while performing some database oriented job.
It provides a visual acknowledgement like "Loading page...", indicating the work is in progress.
Syntax: <asp:UpdateProgress ID="UpdateProgress1" runat="server"
DynamicLayout="true" AssociatedUpdatePanelID="UpdatePanel1" >

<ProgressTemplate>
Loading...
</ProgressTemplate>

</asp:UpdateProgress>

The above snippet shows a simple message within the ProgressTemplate tag.
However, it could be an image or other relevant controls. The UpdateProgress control displays for every
asynchronous postback unless it is assigned to a single update panel using the AssociatedUpdatePanelID
property.

Mrs. Suma M G, AP, Dept. of MCA, RNSIT for latest updates visit: www.google/+sumamgrnsit
Programming Using C# & .NET Module 4 & 5 19

Properties of the UpdateProgress Control

The following table shows the properties of the update progress control:
Properties Description
Gets and sets the ID of the update panel with which this control is
AssociatedUpdatePanelID
associated.
Gets or sets the cascading style sheet (CSS) attributes of the
Attributes
UpdateProgress control.
Gets and sets the time in milliseconds after which the progress template is
DisplayAfter
displayed. The default is 500.
DynamicLayout Indicates whether the progress template is dynamically rendered.
Indicates the template displayed during an asynchronous post back which
ProgressTemplate
takes more time than the DisplayAfter time.

Methods of the UpdateProgress Control

The following table shows the methods of the update progress control:
Methods Description
Returns a list of components, behaviors, and client controls that are
GetScriptDescriptors
required for the UpdateProgress control's client functionality.
Returns a list of client script library dependencies for the UpdateProgress
GetScriptReferences
control.

The Timer Control

The timer control is used to initiate the post back automatically. This could be done in two ways:
i. Setting the Triggers property of the UpdatePanel control:
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnpanel2" EventName="Click" />
</Triggers>

ii. Placing a timercontrol directly inside the UpdatePanel to act as a child control trigger. A single timer
can be the trigger for multiple UpdatePanels.
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always">
<ContentTemplate>
<asp:Timer ID="Timer1" runat="server" Interval="1000"> </asp:Timer>
<asp:Label ID="Label1" runat="server" Height="101px" style="width:304px">
</asp:Label>
</ContentTemplate>
</asp:UpdatePanel>

Mrs. Suma M G, AP, Dept. of MCA, RNSIT for latest updates visit: www.google/+sumamgrnsit
Programming Using C# & .NET Module 4 & 5 20

6. Controls are provide by AJAX on Server Side:

There are two Controls are provided by AJAX on Server Side: They are
i. TimerControl
ii. UpdateProgressControl

7. Standard web controls:

The basic controls available in ASP.NET. They are:

Web Controls Descriptions

Button When a user clicks a button, two events are raised: Click and Command
Syntax:
<asp:Button ID="Button1" runat="server"
onclick="Button1_Click" Text="Click" / >
Properties: Text, ImageUrl, Alternate Text, CausesValidation, PostBackUrl,
CommandName, CommandArgument
TextBox  used to accept input from the user.
 can accept one or more lines of text depending upon the settings of the TextMode
attribute.
Syntax: <asp:TextBox ID="txtstate" runat="server"></asp:TextBox>
Label  To display text which can be changed from one execution of a page to the next.
 If you want to display text that does not change, you use the literal text.
Syntax:
<asp:Label ID="txtstate" runat="server"></asp:Label>
Common Properties of the Text Box and Labels: TextMode, Text, MaxLength, Wrap, ReadOnly,
Columns, rows
DropDownList Displays a drop-down list of choices from which a user can select an item.
Syntax:
<asp:DropDownList ID="DropDownList1" runat="server"
AutoPostBack="True"
OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
</asp:DropDownList>
Properties: Items, Rows, SelectIndex, SelectedValue. SelectiionMode,
RadioButtonList Groups radio buttons.
Syntax:
<asp:RadioButtonList ID="RadioButtonList1" runat="server"
AutoPostBack="True"
OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged">
</asp:RadioButtonList>
Properties: RepeatLayout, RepeatDirection, Repeatolumns
HyperLink The HyperLink control is like the HTML <a> element.
Syntax:
<asp:HyperLink ID="HyperLink1" runat="server">
HyperLink
</asp:HyperLink>
Properties: ImageUrl, NavigateUrl, Text, Target.
Image The image control is used for displaying images on the web page, or some alternative
text, if the image is not available.
Syntax: <asp:Image ID="Image1" runat="server">
Properties: AlternateText, ImageAlign, ImageUrl

Mrs. Suma M G, AP, Dept. of MCA, RNSIT for latest updates visit: www.google/+sumamgrnsit
Programming Using C# & .NET Module 4 & 5 21

1. Define GUI. Mention the basic GUI controls. Explain.

2. Explain event handling in GUI with an example.
3. List and explain the class controls properties and methods
4. What are the differences between label and linklabel control. Give example.
5. Explain MonthCalendar control and DateTimePicker control with their properties.
6. Write a program to display hidden text in a password textbox.
7. Explain Anchoring and Docking.
8. What are the uses of tooltip? List out the properties and events.
9. Discuss the new features of WPF Controls.
10. Describe the Multi-tier application architecture, with a neat diagram
11. Mention the Standard web controls.
12. Explain different validation controls in ASP.NET.
13. What are cookies? Explain the session management in ASP.Net using controls.
14. List the various technologies that are used by AJAX.
15. Describe any 4 controls from AJAX control toolkit
16. How many controls are provided by AJAX on server side? Mention them.

Mrs. Suma M G, AP, Dept. of MCA, RNSIT for latest updates visit: www.google/+sumamgrnsit