Differences between Web based and Windows based application

 The main difference between the Web based application and Windows based
application is that the Web application can be access from anywhere in the world
through the internet whereas window based application need to be install on your
machine to access.

 Web applications are programs that used to run inside some web server (e.g., IIS) to
fulfill the user requests over the http. Windows applications typically run under all 32-
bit versions of Windows, but earlier applications might also run under the 16-bit
versions (Windows 3.x) as well. Windows applications run on personal computers and
work stations. Windows based app. need to be installed on your machine to access.
Windows applications (desktop) need to be installed on each client's PC.

 Web applications are forever physical 3 tier application like as done on UNIX. Client
(the web browser), The middle Tier (the web application) The server (the database).
Physical is a window form application mostly a 2 tier, although in a good design it has
multi layers (what is by some called tiers). Client (the window forms) and the server
(the database).

 Web applications have validation controls. windows apps don't have validation
controls, data needs to be validated through code

 Common Web applications include Webmail, online retail sales, online auctions,
wikis, discussion boards, Weblogs etc. Whereas windows application includes the
mostly the desktop applications.

 Windows application runs faster than Web application.

 Windows applications have many inbuilt classes in .Net compared to Web application.

WebControls and HtmlControls

When sitting down to write an ASP.NET application the designer in Visual Studio.NET gives
us a toolbox window full of controls. Two of the areas on the toolbox seem to overlap: the
Web Form controls tab and the HTML controls tab. Both sections have a button control we
can drag onto a form, for instance. we will take a look at differences, strengths, and
weaknesses between these two sections of controls. System.Web.UI.HtmlControls
namespace contains HTML controls and System.Web.UI.WebControls namespace
contains WebControls.

HTML Controls

HTML controls are “close to the metal” in the sense that HTML controls are a thin wrapper
around their HTML element equivalents. When we drag a control from the HTML controls
textbox onto a web form, VS.NET places the basic HTML markup into the form. Unlike Web
Form controls, the IDE does not associate the HTML control with a member variable in our
code-behind class.

2-1
If we drag and drop the “Text Field” control onto a form, for example, we will get the
following HTML in our web form:

<INPUT type="text">

We can associate this input field with a variable in code behind if we just make a couple
changes to the markup by hand:

<INPUT type="text" runat="server" id="ProductName">

Giving the control a runat=”server” attribute and an ID allows us to manipulate the control
during server side processing from our code. All we need is a protected field in our code-
behind file with a name matching the ID.

Protected HtmlInputText ProductName;

The HTML controls might feel slightly quirky if you are used to forms based development
with Microsoft tools. For instance, HTML controls have no direct properties available to set
the colors or font used by the control when it renders. Another example is the Value property
exposed by the HtmlInputText field. We generally expect a text box control to have a Text
property for us to get or set the string to display.

In this sense, HTML controls remain true to their roots and are not far removed from writing
just HTML. If we want to set colors or font information – we can use the Attributes property.
The Attributes property represents all the name / value pairs in the HTML element for the
control. For example, a control might have an attribute “class” which will assign the
cascading style sheet class. In the example above, we are assigning some inline style
information to the style attribute of the control. On the client this attribute will render inline
with the element.

<input name="ProductName" id="ProductName" type="text" value="Foo Berry Tea"

style="COLOR: red; FONT-FAMILY: 'Courier New'; BACKGROUND-COLOR: gray" />
Web Controls

When we drag a control from the Web Controls section of the toolbox onto a form, VS.NET
automatically gives the tag a runat=”server” attribute and an ID. The IDE also automatically
adds a protected field to our code behind class for us to interact with the control
programmatically. In the following example we have dragged a TextBox control onto the web
form, and adjusted the appearance using the Properties window of the web form designer.

<asp:TextBox id="TextBox1" runat="server" Font-Names="Courier New"/>

We can also interact with this control from code behind as follows.

protected System.Web.UI.WebControls.TextBox TextBox1;

private void Page_Load(object sender, System.EventArgs e)
{
TextBox1.Text = "Foo Berry Tea";
TextBox1.BackColor = Color.LightGray;

2-2
 TextBox1.ForeColor = Color.Red;
}

Notice the web control version of a textbox operates at a slightly higher level of abstraction
when compared to the HTML control. For example, the TextBox control has properties to set
the colors (BackColor, ForeColor). We don’t need to know how to use inline styles – the code
for the control will take care of rendering the correct HTML to achieve the desired
appearance in the client’s web browser.

The web controls section of the toolbox also offers some controls you won’t find in pure
HTML. These controls, like the RegularExpressionValidator, produce a combination of
HTML and JavaScript on the client to offer more functionality than you can get from
available HTML controls.

The web control approach is object oriented, easier to use server-side, and more robust than
using HTML controls. Since everything in software development has a trade-off, you might
be wondering what the downside to using a web control is (some may say the trade-off is
performance, but in reality the overhead of using a web control is almost negligible). There
really is no downside to using web controls over HTML controls – we should always favor
using the web control.

Differences between HtmlControls and WebControls

HtmlControls don't fire Click event on server side. Unlike WebControls, HtmlControls use
OnClick handler on client side. You can access to Click event by using java script. To handle
click event on server side you need to use ServerClick event with event handler named
OnServerClick.

HtmlInputText control doesn't have Text property. To get string inside Html text box you
need to use Value property.

HtmlGenericControl also doesn't have Text property. To write text inside

HtmlGenericControl you need to use its InnerText property.

Advantages of HtmlControls

* HtmlControls are very useful if you need to translate classic ASP web site to ASP.NET.
Just add runat="server" to needed <input> or <select > tags and you can convert HTML
form to ASP.NET web form fast.

* With HtmlControls you can easily access any html tag on web page. For example, if you
want to change some attribute of <body> tag, just add runat="server" and you can do it with
one line of code like with TextArea in last example.

* If you need to manipulate HTML tags, you will can do it easily with HtmlControls, instead
of working with ASP.NET code inside of <% and %> like in classic ASP before.

* Reset of all input elements on form is very easy to do with HtmlInputReset control.

* Adding meta tags is easy to do with HtmlMeta control. Or, simply add id and
runat="server" to meta tag, like this:

2-3
<meta runat="server" name="description" id="MetaDescription">

HTML Input Controls

the following controls, which are based on the HTML INPUT element, are available on the
HTML tab of the Toolbox:

 Input (Button) control: INPUT type="button" element

 Input (Checkbox) control: INPUT type="checkbox" element

 Input (File) control: INPUT type="file" element

 Input (Hidden) control: INPUT type="hidden" element

 Input (Password) control: INPUT type="password" element

 Input (Radio) control: INPUT type="radio" element

 Input (Reset) control: INPUT type="reset" element

 Input (Submit) control: INPUT type="submit" element

 Input (Text) control: INPUT type="text" element

HTML server controls added from the Toolbox to a page in Visual Studio are simply HTML
elements with certain attributes already set. You can also create HTML elements in Source
view by typing markup.

By default, HTML elements on a Web Forms page are not available to the server; they are
treated as markup that is passed through to the browser. However, if you add an id attribute
and the attribute runat="server", ASP.NET recognizes the element as a control on the page
and you can program it with server-based code.

Unlike other HTML elements, if you convert an HTML INPUT element to an ASP.NET
server control, it is not created as an instance of the HtmlInputControl class. You cannot
create an instance of the HtmlInputControl class directly. Instead, this class is inherited by
the classes listed in the table below.

The following table lists the type that is used to instantiate INPUT elements as ASP.NET
server controls if the markup contains the attribute runat="server" and an id attribute.

HTML controls and their rendering

Let's take a look at the "HTML Control" group on the Tool Palette. There are more than a
dozen controls to choose from. The following list explains their relation with classic HTML
elements.

Some HTML controls don't correspond to a specific control like a button, hyperlink or a text
box. What's more, such controls do not have a visual representation by themselves. Some
examples include: <div>, <span>, <font> etc.

2-4
 HTML Control HTML representation Declare as / Description

HTML Label <div> HtmlGenericControl

HTML Button <input type="button"> HtmlButton

HTML TextBox <input> HtmlInputText

HTML TextArea <textarea> HtmlTextArea

HTML Password <input type="password"> HtmlInputText

HTML Submit Button <input type="submit"> HtmlInputButton

HTML Reset Button <input type="reset"> HtmlInputButton

HTML Image Button <input type="image"> HtmlInputImage

HTML CheckBox <input type="checkbox"> HtmlInputCheckBox

HTML Radio Button <input type="radio"> HtmlInputRadioButton

HTML DropDown <select> HtmlSelect

HTML ListBox <select> HtmlSelect

HTML Hidden Field HtmlInputHidden

HTML File Upload <input type="file"> HtmlInputFile

HTML Anchor <a> HtmlAnchor

HTML Image HtmlImage

HTML Table <table> HtmlTable

Web Server Controls

Like HTML server controls, Web server controls are also created on the server and
they require a runat="server" attribute to work. However, Web server controls do not
necessarily map to any existing HTML elements and they may represent more complex
elements.

ASP.NET Web server controls are objects on ASP.NET Web pages that run when the
page is requested and that render markup to the browser. Many Web server controls are
similar to familiar HTML elements, such as buttons and text boxes. Other controls encompass
complex behavior, such as a calendar controls, and controls that you can use to connect to
data sources and display data.

2-5
The syntax for creating a Web server control is:

<asp:control_name id="some_id" runat="server" />

Web Server Control Description

AdRotator Displays a sequence of images
Button Displays a push button
Calendar Displays a calendar
CalendarDay A day in a calendar control
CheckBox Displays a check box
CheckBoxList Creates a multi-selection check box group
DataGrid Displays fields of a data source in a grid
DataList Displays items from a data source by using templates
DropDownList Creates a drop-down list
HyperLink Creates a hyperlink
Image Displays an image
ImageButton Displays a clickable image
Label Displays static content which is programmable (lets you apply
styles to its content)
LinkButton Creates a hyperlink button
ListBox Creates a single- or multi-selection drop-down list
ListItem Creates an item in a list
Literal Displays static content which is programmable(does not let you
apply styles to its content)
Panel Provides a container for other controls
PlaceHolder Reserves space for controls added by code
RadioButton Creates a radio button
RadioButtonList Creates a group of radio buttons
BulletedList Creates a list in bullet format
Repeater Displays a repeated list of items bound to the control
Style Sets the style of controls
Table Creates a table
TableCell Creates a table cell
TableRow Creates a table row

2-6
 TextBox Creates a text box

Common features
Mostly all Web Server controls inherit from a common base class, namely the WebControl
class defined in the System.Web.UI.WebControls namespace. This base class implements a
set of common properties that all Web Server controls have: Attributes, CSSClass,
BackColor, Enabled, Visible, Width, etc. Web server controls that do not inherit from the
WebControl class include Literal, PlaceHolder, Repeater, and Xml.

All Web Controls from the System.Web.UI.WebControls namespace are prefixed with "asp:".
Web Controls from third-party vendors will have a different prefix. For example, controls in
Borland.Data.Web namespace (those found on the "DB Web" section on the Tool Palette)
have the "borland:" prefix. All Web Controls on a Web Form must have a name - specified
using the "ID" attribute. You use the ID attribute, the name of the component, to access its
properties and methods.

In general, Web Controls can be split into several categories:

 Intrinsic controls are rendered to simple HTML elements. For example, a Button Web
Server controls renders to an <input> element, but provides additional server-side
functionality for a developer

 Validation controls provide a way to reduce the number of server round-trips by

adding client side validation code

 Rich controls like Calendar or DataGrid provide a rich user interface for particular
tasks. They both render to quite complex table elements. What's more DataGrid even
enables editing data from a database ... but we'll leave this discussion for some other time.

Here are a few Web Controls essentials:

 All Web Controls follow a rich object model that provides type-safe programming
capabilities
 Web Controls are able to raise a greater variety of server-side events
 Some controls (DataGrid, repeater, etc) have the ability to define your own look for
the control using templates.
 There must be some magic here since Web development is stateless and yet each
control can raise a Change event if the value in the control has changed.

And most importantly:

 Web Controls are extensible, meaning that you can create your own Web Controls as
in the good old days of VCL and Delphi for Win32 :)

2-7
 WebControl "limitations"
Even though we have just started exploring Web Server controls some of the
limitations are:

 Most Web Controls cannot act as containers - you cannot simply nest their tags and
overlap with other controls. However the Table, Panel and Repeater can act as containers.

 You'll find it hard to manipulate most Web Server controls using client-side code
(JavaScript).

ASP.NET Web Control Standard Properties

Properties

The following table describes the properties inherited from the WebControl class:

Property Description
AccessKey The keyboard key for accessing a control
Attributes The collection of attributes applied to a control
BackColor The background color of a control
BorderColor The border color of a control
BorderStyle The border style of a control
BorderWidth The border width of a control
CssClass The CSS class applied to a control
Enabled A value indicating whether or not control is enabled
Font The font attributes for the control
EnableTheming Whether or not themes apply for a control
ForeColor The foreground color of the control
Height The height of the control
IsEnabled A value indicating whether or not control is enabled (Get
value only)
Style The inline CSS style of the control
TabIndex The tab order of the control
ToolTip The text that appears when the user rests the mouse pointer
over a control
Width The width of the control

Button Controls:

2-8
ASP .Net provides three types of button controls: buttons, link buttons and image buttons. As
the names suggest a button displays text within a rectangular area, a link button displays text
that looks like a hyperlink. And an Image Button displays an image.

When a user clicks a button control, two events are raised Click and Command.

Basic syntax for button controls:

<asp:Button ID="Button1" runat="server"

onclick="Button1_Click" Text="Click" />

Common Properties of the Button control:

Property Description

Text The text displayed by the button. This is for button and link
button controls only.

ImageUrl For image button control only. The image to be displayed for
the button.

AlternateText For image button control only. The text to be displayed if the
browser can't display the image.

CausesValidation Determines whether page validation occurs when a user clicks

the button. The default is true.

CommandName A string value that's passed to the Command event when a user
clicks the button.

CommandArgument A string value that's passed to the Command event when a user
clicks the button.

PostBackUrl The URL of the page that should be requested when the user
clicks the button.

Text Boxes and Labels:

Text box controls are typically used to accept input from the user. A text box control can
accept one or more lines to text depending upon the setting of the TextMode attribute.

Label controls provide an easy way to display text which can be changed from one execution
of a page to the next. If you want to display a text that does not change, you use the literal
text.

Basic syntax for text controls:

2-9
<asp:TextBox ID="txtstate" runat="server" ></asp:TextBox

Common Properties of the Text Box and Labels:

Property Description

TextMode Specifies the type of text box. SingleLine creates a standard text
box, MultiLIne creates a text box that accepts more than one
line of text and the Password causes the characters that are
entered to be masked. The default is SingleLine.

Text The text content of the text box

MaxLength The maximum number of characters that can be entered into the
text box.

Wrap It determines whether or not text wraps automatically for multi-

line text box; default is true.

ReadOnly Determines whether the user can change the text in the box;
default is false, i.e., the user can change the text.

Columns The width of the text box in characters. The actual width is
determined based on the font that's used for the text entry

Rows The height of a multi-line text box in lines. The default value is
0, means a single line text box.

The mostly used attribute for a label control is 'Text', which implies the text displayed on the
label.

Check Boxes and Radio Buttons:

A check box displays a single option that the user can either check or uncheck and radio
buttons present a group of options from which the user can select just one option.

To create a group of radio buttons, you specify the same name for the GroupName attribute
of each radio button in the group. If more than one group is required in a single form specify
a different group name for each group.

If you want a check box or radio button to be selected when it's initially displayed, set its
Checked attribute to true. If the Checked attribute is set for more than one radio button in a
group, then only the last one will be selected.

Basic syntax for check box:

2-10
<asp:CheckBox ID= "chkoption" runat= "Server">
</asp:CheckBox>

Basic syntax for radio button:

<asp:RadioButton ID= "rdboption" runat= "Server">

</asp: RadioButton>

Common Properties of the Check Boxes and Radio Buttons:

Property Description

Text The text displayed next to the check box or radio button.

Checked Specifies whether it is selected or not, default is false.

GroupName Name of the group the control belongs to.

List Controls:

ASP.Net provides the controls: drop-down list, list box, radio button list, check box list and
bulleted list. These control let a user choose from one or more items from the list.

List boxes and drop-down list contain one or more list items. These lists could be loaded
either by code or by the ListItem Collection Editor.

Basic syntax for list box control:

<asp:ListBox ID="ListBox1"
runat="server"
AutoPostBack="True"
OnSelectedIndexChanged="ListBox1_SelectedIndexChanged">
</asp:ListBox>

Basic syntax for a drop-down list control:

<asp:DropDownList ID="DropDownList1"
runat="server"
AutoPostBack="True"
OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
</asp:DropDownList>

Common Properties of List box and Drop-down Lists:

Property Description

2-11
Items The collection of ListItem objects that represents the items in
the control. This property returns an object of type
ListItemCollection.

Rows Specifies the number of items displayed in the box. If actual list
contains more rows than displayed then a scroll bar is added.

SelectedIndex The index of the currently selected item. If more than one item
is selected, then the index of the first selected item. If no item is
selected, the value of this property is -1.

SelectedValue The value of the currently selected item. If more than one item
is selected, then the value of the first selected item. If no item is
selected, the value of this property is an empty string("").

SelectionMode Indicates whether a list box allows single selections or multiple

selections.

Common Properties of each list item objects:

Property Description

Text The text displayed for the item

Selected Indicates whether the item is selected.

Value A string value associated with the item.

It is important to notes that:

 To work with the items in a drop-down list or list box, you use the Items property of
the control. This property returns a ListItemCollection object which contains all the
items of the list.

 The SelectedIndexChanged event is raised when the user selects a different item from
a drop-down list or list box.

The List Item Collections:

The ListItemCollection object is a collection of ListItem objects. Each ListItem object

represents one item in the list. Items in a ListItemCollection are numbered from 0.

When the items into a list box are loaded using strings like: lstcolor.Items.Add("Blue") . then
both the Text and Value properties of the list item are set to the string value you specify. To
set it differently you must create a list item object and then add that item to the collection.

2-12
The ListItem Collection Editor is used to add item to a drop-down list or list box. This is used
to create a static list of items. To display the Collection Editor select Edit item from the smart
tag menu, or select the control and then click the ellipsis button from the Item property in the
Properties window.

Common Properties of List Item Collection:

Property Description

Item(integer) A ListItem object that represents the item at the specified index.

Count The number of items in the collection.

Common methods of List Item Collection:

Methods Description

Add(string) Adds a new item to the end of the collection and assigns the
string parameter to the Text property of the item.

Add(ListItem) Adds a new item to the end of the collection.

Insert(integer, string) Inserts an item at the specified index location in the collection,
and assigns the string parameter to the Text property of the
item.

Insert(integer, ListItem) Inserts the item at the specified index location in the collection.

Remove(string) Removes the item with the Text value same as the string.

Remove(ListItem) Removes the specified item.

RemoveAt(integer) Removes the item at the specified index as the integer.

Clear Removes all the items of the collection.

FindByValue(string) Returns the item whose Value is same as the string.

FindByValue(Text) Returns the item whose Text is same as the string.

Radio Button list and Check Box list

A radio button list presents a list of mutually exclusive options. A check box list presents a
list of independent options. These controls contain a collection of ListItem objects that could
be referred to through the Items property of the control.

2-13
Basic syntax for radio button list:

<asp:RadioButtonList ID="RadioButtonList1"
runat="server"
AutoPostBack="True"
OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged">
</asp:RadioButtonList>

Basic syntax for check box list:

<asp:CheckBoxList ID="CheckBoxList1"
runat="server"
AutoPostBack="True"
OnSelectedIndexChanged="CheckBoxList1_SelectedIndexChanged">
</asp:CheckBoxList>

Common Properties of Check Box and Radio Button Lists:

Property Description

RepeatLayout This attribute specifies whether the table tags or the normal
html flow to use while formatting the list when it is rendered.
The default is Table

RepeatDirection It specifies the direction in which the controls to be repeated.

The values available are Horizontal and Vertical. Default is
Vertical

RepeatColumns It specifies the number of columns to use when repeating the

controls; default is 0.

Bulleted lists and Numbered lists:

The bulleted list control creates bulleted lists or numbered lists. These controls contain a
collection of ListItem objects that could be referred to through the Items property of the
control. Basic syntax of a bulleted list:

<asp:BulletedList ID="BulletedList1" runat="server">

</asp:BulletedList>

Common Properties of the Bulleted List:

Property Description

BulletStyle This property specifies the style and looks of the bullets, or
numbers.

2-14
RepeatDirection It specifies the direction in which the controls to be repeated.
The values available are Horizontal and Vertical. Default is
Vertical

RepeatColumns It specifies the number of columns to use when repeating the

controls; default is 0.

HyperLink Control:

The HyperLink control is like the HTML <a> element.

Basic syntax for a hyperlink control:

<asp:HyperLink ID="HyperLink1" runat="server">

HyperLink
</asp:HyperLink>

It has the following important properties:

Property Description

ImageUrl Path of the image to be displayed by the control

NavigateUrl Target link URL

Text The text to be displayed as the link

Target The window or frame which will load the linked page.

Image Control:

The image control is used for displaying images on the web page, or some alternative text, if
the image is not available.

Basic syntax for an image control:

<asp:Image ID="Image1" runat="server">

It has the following important properties:

Property Description

AlternateText Alternate text to be displayed

ImageAlign Alignment options for the control

2-15
ImageUrl Path of the image to be displayed by the control

Table control

Table control is used to structure a web pages. In other words to divide a page into several
rows and colums to arrange the information or images. When it is rendered on the page, it is
implemented through <table> HTML tag.

Its properties like BackColor, ForeColor, BorderColor, BorderStyle, BorderWidth, Height etc.
are implemented through style properites of <table> tag.

We can simply use HTML <table> control instead of using asp:Table control. However many
of one benefits of using asp:Table control is we can dynamically add rows or columns at the
runtime or change the appearance of the table.
You can skip ID property of the TableRow or TableCell, however it is advisable to write these
property otherwise you will not be able to play with these controls.

Following are some important properties that are very useful.

BackImageUrl Used to Set background image of the table

Caption Used to write the caption of the table.

<asp:Table ID="Table2" runat="Server" CellPadding="2" CellSpacing="1"

BorderColor="CadetBlue" Caption="Demo of asp:Table control" BorderWidth="1"
BorderStyle="Dashed">
<asp:TableRow ID="TableRow2" runat="Server" BorderWidth="1">
<asp:TableCell ID="TableCell4" runat="Server" BorderWidth="1">
Row 1 - Cell 1
</asp:TableCell>
<asp:TableCell ID="TableCell5" runat="Server">
Row 1 - Cell 2
</asp:TableCell>
</asp:TableRow>
<asp:TableRow ID="TableRow3" runat="Server">
<asp:TableCell ID="TableCell6" runat="Server">
Row 2 - Cell 1
</asp:TableCell>
<asp:TableCell ID="TableCell7" runat="Server">
Row 2 - Cell 2
</asp:TableCell>
</asp:TableRow>
</asp:Table>

2-16