PROGRAMMER’S WORLD C# MASTERCLASS EXTRA

Start programming on the web

This Series
Web
programming
Web development for a .NET developer using C#, beginning with an
with C#
introduction to web programming concepts and terminology
Tutorial One
Introduction to his month sees the start of a new tutorial series
web programming
and WinForms T on web programming: how to create interesting
and interactive website features using the ASP.
NET and Web Forms frameworks built into .NET. Along the
Tutorial Two way, we’ll look at what web programming features are
Using Web Matrix provided by VS.NET and what you can do with Web
Matrix – Microsoft’s free, community-supported ASP.NET
development tool. This month provides an introduction to
web programming concepts and terminology for those
PROJECT TIME previously confined to desktop programming.
In previous tutorials, we’ve put a lot of emphasis on
2 00HRS MINS desktop programming, but done very little web development.
In this new tutorial series, we try to redress the balance by
SKILL LEVEL focusing specifically on web development from the
perspective of a .NET developer using C#.
0 10
5 INTERMEDIATE
You should have
What do we mean by web development? When you
create a desktop application, you start by dropping WinForms
done some desktop components onto a design-time form, arranging them as
programming with C# required, modifying their behaviour and appearance through Amazon is essentially a set of cooperating web applications that
the use of properties, and then connecting them together provide a unified experience for the inveterate book browser.
YOU’LL NEED THIS
through event handlers, which produce the wanted
VS.NET 2003 or later, interaction with the end user. The end result is a self- This has some interesting repercussions. Think about
! and Web Matrix
contained program.
On the other hand, when you visit www.amazon.co.uk,
what happens when the user fills in a web-based form.
Strictly speaking, event processing is performed on the
FILES ON SUPERDISC you’re using a sophisticated web application rather than a server, but this requires a ‘round-trip’ to the server. In other
All project files needed to desktop one. An innovation of .NET is the ability to create words, the user clicks a button, checks a check-box or
complete this Masterclass web applications using the same, familiar RAD (Rapid whatever, necessitating that the server is informed of the
are on the Superdisc Application Development) paradigm. In other words, to create user action and requiring the server to render and return an
a simple web application, you use Web Forms rather than updated HTML page that reflects the new state of play. This
WinForms, but the overall approach is still the same; you add is called round-tripping, and posting an event to the server is
components to a form, set up their properties, link them naturally referred to as a postback. It goes without saying
together with event handlers and so forth. that you should code things in such a way as to minimise
It seems almost magical that things work out this way. round-tripping for performance reasons. Even if your client
After all, in a desktop application, the WinForms controls each connection is connected to the Internet via a broadband
render themselves using the underlying GDI+ graphics library. connection, the server might be very busy or preoccupied,
This gets mapped onto driver calls to the video display. which will obviously degrade response times; the bottom
However, a completely different mechanism is used by web line here is to minimise the server and client interaction
applications. The lingua franca of the Internet is HTML – the wherever possible.
hypertext markup language that we’re all familiar working From the perspective of the server-side code, a
with. When a Web Forms control renders itself, the result is mechanism is needed to determine whether this is the first
actually a chunk of HTML code that’s designed to create the time an ASP.NET page has been loaded, or whether this load
appropriate appearance and behaviour on the client is the result of a postback. In other words, is it the first time
machine. Thus, when a web page is ‘rendered’ on the client the remote browser has accessed the page, or has the user
machine, each of the individual components on that page clicked the Refresh button, hit ‘Submit’? This is done by
are responsible for supplying the necessary HTML to produce examining a property of the Page class called IsPostBack. Our
the wanted effect. hypothetical C# server-side code might look like this:

1 Understanding state and postbacks The code void Page_Load()

corresponding to each of the ASP.NET controls is running on {
the webserver and not on the client. Each ASP.NET control is if (!IsPostBack)
{
written as a specific class, typically authored in C#. All the
// Perform first-load processing...
browser sees, however, is a bunch of HTML. Moreover, HTML }
doesn’t itself have any concept of a state or persistent }
connection – it’s completely stateless.

170 PCPlus 235 | October 2005

PCP235.pcsharp 170 8/9/05 2:28:39 pm

 MASTERCLASS EXTRA C# PROGRAMMER’S WORLD

So what is C#? Dave Jewell

dave.jewell@pcplus.co.uk
Microsoft’s latest, most innovative programming
language to date. Not simply a rehash of C++, it Dave is a freelance journalist,
provides unprecedented control over Microsoft consultant and programmer who’s
Windows and your own modern programs. written several programming books
and thousands of technical articles

As with the WinForms .NET components you’re used to, ASP. PASSING SHOT
NET components expose properties, methods and events. In Next month we’ll be focusing
the above code fragment, the Page_Load handler gets called on Web Matrix from Microsoft.
in response to a Load event. If the IsPostBack property This is a community-supported
returns false, then we know it’s not a load that results from a project that provides a high-
postback. This means it must be the first load of the page, quality, zero-cost tool for ASP.
and any appropriate first-time initialisation can be performed. NET website development. If
you can’t wait until next month
2 What’s in a Page? The Page class inhabits the System. but want to check it out for
yourself, point your browser at
Web.UI namespace and, as the name suggests, provides a
www.asp.net/webmatrix and
server-side encapsulation of a Web Forms page or .ASPX file. get downloading. It’s a trim 1.3
A Web Forms page consists of static HTML and/or one or MByte download, but does
more ASP.NET controls. As with regular desktop programming, assume that the .NET
there’s a design-time form where you can lay out the various framework is already installed.
ASP.NET controls which make up the page, and there’s also Here we’re building a web page that initially contains nothing but The website contains a lot of
separate ‘code-behind’ source which contains the server-side a ListBox component, also from the System.Web.UI namespace. tutorial information, a guided
script that implements the page. As with any other .NET tour and even a freely
source code, the code-behind file has the extension ‘.CS’ if it three entries of the list-box to ‘Starter’, ‘Main Course’ and downloadable Web Matrix
book in PDF format. And yes,
happens to be a C# file. ‘Desert’. I also modified the control’s background colour. The
you can program Web Matrix
If you’re using something like Visual Studio 2005 (or even resulting HTML looks like this: using C#.
the existing 2003 version), you’ll find that the IDE will
automatically handle the creation of the code-behind file as <asp:ListBox ID=‘ListBox1’ runat=‘server’
shown in the accompanying screenshot. Here, we have the BackColor=‘#C0C0FF’ Height=‘280px’
default web page with the designer view showing a simple OnSelectedIndexChanged=‘ListBox1_
SelectedIndexChanged’ Width=‘384px’>
list-box. This corresponds to the file Default.aspx. The
<asp:ListItem>Starter</asp:ListItem>
corresponding code-behind source is contained inside <asp:ListItem>Main Course</asp:ListItem>
Default.aspx.cs. <asp:ListItem>Desert</asp:ListItem>
If you look at the properties page on the right, you’ll see <asp:ListItem></asp:ListItem>
that the ListBox class is actually implemented inside System. </asp:ListBox>
Web.UI.WebControls along with the rest of the ASP.NET
components. To see all the web controls (and other goodies) As you can see, an ASP.NET control is introduced by the
contained within this namespace, you can use something <asp> tag. In this case, the list-box contains three ListItem
like Reflector to browse the metadata within the assembly. entries (actually four, the last one doesn’t have a caption set).
It’s instructive to add a few random Web Forms What’s interesting is that you can select different parts of this
components to a page and then swap over to the Source tab HTML from inside VS.NET, and the Properties window will
in order to see the HTML ‘source’ file that’s being generated. I change to reflect the currently selected item. For example,
tried adding a list-box to a page and then changing the first with a ListItem selected, you can modify its Enabled,

Running ASP on your development machine

IIS, PWS, XP Pro and more
If you want to do ASP.NET development
on your PC, then you’ll need a
webserver to dish up those web pages
that you’ve lovingly crafted. The ideal
solution is to use IIS, which
unfortunately doesn’t come with XP
Home Edition. This in itself is a good
argument for getting XP Pro which, in
my opinion, should be used for all
serious software development. There
are various dirty hacks around for
getting IIS working on Home Edition, but
I wouldn’t recommend them.
Assuming you’ve got XP Pro, you can
install IIS by going to the Control Panel,
selecting ‘Add or remove programs’ and
then clicking ‘Add or remove Windows
components’ on the left. In the list-box
that appears, choose Internet
Information Services (IIS) and click ‘OK’.
You should end up with a directory,
Inetpub, on drive C that contains
another folder called wwwroot. All file
references will be relative to this
directory by default. An absolute
pathname of c:\Inetpub\wwwroot\
Site1\ … will be accessed as http://
localhost/Site1/… from the perspective
of your web browser. These pathname
mappings can be modified if desired.
To check if the server is running, or to
alter the configuration, go to Control
Panel | Administrative Tools | Internet
Information Services. From here, you
can modify many aspects of IIS
operation (see the accompanying
screenshot on the right) and stop or
start the server.
Although IIS is very powerful and You can access IIS using a
highly configurable, it can be like using management plug-in, which is
accessed via the Internet
the proverbial sledge-hammer to crack a
Information Services icon on the
nut for simple Web projects. An smaller, Control Panel. Here, we can see
but still very capable alternative is default website properties.
Personal Webserver, or PWS, which is
included as part of the Web Matrix
package. We’ll be looking at that next
month when we cover Web Matrix in
more detail. ■

PCPlus 235 | October 2005 171

PCP235.pcsharp 171 8/9/05 2:28:41 pm

 PROGRAMMER’S WORLD C# MASTERCLASS EXTRA

Understanding __ViewState field

How the server keeps tracks the state of each ASP.NET control
If you take the trouble to look at the
source code of a web page that’s been
implemented using ASP.NET (view page
source in your web browser), you’ll see
some interesting stuff. For example,
there’s a mysterious looking hidden
field called __ViewState which looks
like a long string of gobbledygook. This
is a dictionary object which is hashed
into a string of ASCII characters so that it
can be passed back to the server.
Here’s how it works. Suppose a
checkbox is currently checked. Each
time the containing web page generates
a postback event, the view state
information is returned to the server. If
you happen to uncheck the checkbox,
this change will be reflected in the view
state information and the server will
detect that the checkbox state has
changed. This will case the
OnCheckedChanged event to fire on the
server, executing whatever event
handler you provide. The new view
state information returned from the
postback will then reflect the new state
of the checkbox. ■
Here’s a typical __ViewState
field strutting its stuff. Because
it’s a hashed dictionary object,
it’s not fit for human
consumption, but it provides the
server with all it needs to know
about control state.

GOING FURTHER
At first glance, ASP.NET and
web programming might look
intimidating (it still looks
pretty intimidating after a
second or third glance). But
help is at hand in the form of a
large number of ASP.NET titles,
which you can pick up from
Amazon using that oh-so-
tempting ‘Buy now with 1-
Click’ button. One of my
favourites is ‘Build Your Own
ASP.NET Website Using C# &
VB.NET’ by Z. Ruvalcaba.
Another is ‘Beginning ASP.Net
1.1 E-Commerce: From Novice
to Professional’ by Darie and
Watson. Read this, and you
can implement a ‘Buy Now’
button for your own website.
NEXT MONTH
Next month, we’ll get to grips
with Web Matrix, Microsoft’s
free but powerful development
tool for creating websites
based around ASP.NET.
Selected, Text and Value properties via the Properties window
and the changes are immediately reflected in the HTML
code. If you look at the C# code-behind source, you’ll see
something like this:
public partial class _Default : System.
Web.UI.Page
{
protected void Page_Load(object sender,
EventArgs e)
{
}
protected void ListBox1_SelectedIndexChang
ed(object sender, EventArgs e) Reflector can be used to browse the assemblies that contain the
{ implementations of the various ASP.NET controls.
}
} client. If you examine the top of the .ASPX file generated by
VS.NET, this is what you’ll see:
Here, the page has two defined property handlers; the Load
hander that we mentioned earlier and also a handler to <%@ Page Language=‘C#’
AutoEventWireup=‘true’ CodeFile=‘Default.
control what happens when the list-box selection is
changed. It’s easy to think of this in terms of plain-vanilla aspx.cs’ Inherits=‘_Default’ %>
desktop programming, but remember: this handler is invoked
on the server when the list-box selection is changed on the Crucially, this associates the .ASPX file with the C# containing
remote client machine. any defined event handlers and so forth. The
You might be perplexed by the partial keyword in the AutoEventWireup attribute (which is also new in ASP.NET 2.0)
above C# declaration. This is a new enhancement that was causes the ASP.NET system to automatically ‘wire up’ each of
added to the C# language in order to support ASP.NET 2.0. It’s the event handlers in the code file to the appropriate event
been added to VB.Net for the same reason. In essence, this exposed by the page.
keyword allows the declaration of a C# class declaration to In next month’s tutorial, we’ll get to grips with Web Matrix,
extend across more that one source. We’re telling the build some simple web pages and see how all this stuff
compiler: this is some of the declaration for the _Default works out in practice. The ASP.Net learning curve is a bit
class, but not all of it. This much ought to be obvious steep in places, but its well worth getting to grips with this
because, if you think about it, where are the declarations for technology. If you browse the web, you’ll find that more and
the list-box and those four ListItem entries? They simply don’t more third-party ASP.NET controls are available which can be
appear in the C# source file at all. used to create stunning web sites. To see what’s on offer, go
There’s actually a lot of magic that happens behind the to www.asp.net and then click ‘Control Gallery’ from the
scenes when the server receives a page request from a toolbar. You’ll be impressed with what’s now available. PCP

Web programming without the GUI

PayPal represent a convenient
way to pay for goods and
services. With Web services, you
can add PayPal payment
facilities to your own website.
What else can you do besides create awesome websites?
You might be forgiven for thinking that
web programming is all about producing
great-looking websites. To a large extent
it is, and this will be the main focus of
this tutorial series. But there’s a lot more
to explore than that. There’s been an
explosion in so-called ‘web services’,
SOAP-based API’s that allow application
code on one machine to invoke services
on a remote server.
There are a wide assortment of Web
services available right now. If you want
to handle PayPal payments on your Web
site, then you can download and install
the PayPal SDK from www.paypal.com/
sdk. Being able to do this is pretty
useful stuff, especially if you’re a
shareware developer.
Web services are based around SOAP
which, if you’re unfamiliar with the term,
stands for Simple Object Access
Protocol. Put simply, SOAP provides a
standard mechanism for clients to
interact with remote objects in a
platform independent and language
independent manner. When I say
‘language independent’, I’m talking
about both sides of the fence. As a web
service consumer, you don’t care what
programming language the remote
object was written in, and the remote
object likewise doesn’t give a damn
whether you’re accessing it with C#,
VB.NET, JavaScript or whatever. SOAP, in
turn, is based around XML.
SOAP support is already built right
into Microsoft’s .NET framework. There’s
a class name lookup facility inside
Reflector; if you type ‘Soap’ into the
search box, you’ll see a cascade of class
names such as SoapServices,
SoapFieldAttribute and
SoapMethodAttribute. All of this forms a
part of the System.Runtime.Remoting
namespace where the web services
support is implemented. You can read
more on all these classes in the
Microsoft documentation. ■

172 PCPlus 235 | October 2005

PCP235.pcsharp 172 8/9/05 2:28:42 pm