spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / programming / asp_net / 1 To page 1To page 2To page 3To page 4To page 5To page 6current page
[previous]

Oracle DBA (IL)
Next Step Systems
US-IL-Lombard

Justtechjobs.com Post A Job | Post A Resume
Developer News
OpenOffice 3.2 Lands Amid Critical Changes
Red Hat, IBM Firmly in KVM Virtualization Camp
Red Hat Talks Up Open Source Cloud Plans


Build Your Own ASP.NET Website Using C# & VB.NET. Pt. 2.

Your First ASP.NET Page

For your first run at ASP.NET, we’ll create the simple example shown in Figure 1.9.

Figure 1.9. We’ll create a simple ASP.NET page that says "Hello there" and displays the time.

We’ll create a simple ASP.NET page that says "Hello there" and displays the time.

Let’s get started! Open your text editor (Notepad[2] is fine). If you have software that creates ASP.NET pages automatically, such as Visual Studio .NET, please do not use it yet. These programs provide lots of powerful tools for building complex ASP.NET pages in a hurry, but for simple examples like this one, they tend to get in the way, rather than provide assistance.

Open your text editor, and start by entering the plain HTML for our page:

<html>
<head>
<title>My First ASP.NET Page</title>
</head>
<body>
<p>Hello there!</p>
<p>The time is now: </p>
</body>
</html>

So far, so good, right? Now, we’ll add some ASP.NET code that will create the dynamic elements of the page, starting with the time.

<html>
<head>
<title>My First ASP.NET Page</title>
</head>
<body>
<p>Hello there!</p>
<p>The time is now: <asp:Label runat="server" id="lblTime" /></p>
</body>
</html>

We’ve added an <asp:Label> tag to the document. This is a special tag that lets us insert dynamic content into the page. The asp: part of the tag name identifies it as a built-in ASP.NET tag. ASP.NET comes with numerous built-in tags; <asp:Label> is arguably the simplest.

The runat="server" attribute identifies the tag as something that needs to be handled on the server. In other words, the Web browser will never see the <asp:Label> tag; ASP.NET sees it and converts it to regular HTML tags before the page is sent to the browser. It’s up to us to write the code that will tell ASP.NET to replace this particular tag with the current time.

To do this, we must add some script to our page. Like ASP before it, ASP.NET gives you the choice of a number of different languages to use in your scripts. The two most common languages are Visual Basic.NET (VB.NET) and C# (pronounced “C sharp”). Let’s take a look at examples using both. Here’s a version of the page in VB.NET:

Example 1.1. FirstPage.aspx

<html>
<head>
<title>My First ASP.NET Page</title>
<script runat="server" language="VB">
Sub Page_Load(s As Object, e As EventArgs)
  lblTime.Text = DateTime.Now.ToString()
End Sub
</script>
</head>

<body>
<p>Hello there!</p>
<p>The time is now: <asp:Label runat="server" id="lblTime" /></p>
</body>
</html>

Here’s the same page written in C#:

Example 1.2. FirstPage.aspx

<html>
<head>
<title>My First ASP.NET Page</title>
<script runat="server" language="C#">
protected void Page_Load(Object s, EventArgs e)
{
  lblTime.Text = DateTime.Now.ToString();
}
</script>
</head>

<body>
<p>Hello there!</p>
<p>The time is now: <asp:Label runat="server" id="lblTime" /></p>
</body>
</html>

Both versions of the page achieve exactly the same thing. If you’ve never done any server-side programming before, this may be starting to look a little scary. Let’s break down the new elements of this page:

Example 1.3. FirstPage.aspx (excerpt)

<script runat="server">

This tag, otherwise known as a code declaration block, marks the start of server-side code. Like the <asp:Label> tag, this <script> tag uses the runat="server" attribute to let ASP.NET know that the tag should be processed before sending the page to the browser.

Example 1.4. FirstPage.aspx (excerpt)

Sub Page_Load(s As Object, e As EventArgs)

Example 1.5. FirstPage.aspx (excerpt)

protected void Page_Load(Object s, EventArgs s) {

I won’t go into too much detail here. For now, all you need to know is that you can write script fragments that are run in response to different events, such as a button being clicked or an item being selected from a drop-down list. What the first line basically says is "execute the following script whenever the page is loaded." Note that C# groups code into blocks with curly braces, while Visual Basic tends to use statements such as End Sub to mark the end of a particular sequence. So, the curly brace in the C# code above ({) marks the start of the script that will be executed when the page loads for the first time. For the technically minded, the code we’ve just seen is a method definition for a page load event handler, which is essentially the code that the server runs when the page is requested for the first time.

Finally, here’s the line that actually displays the time on the page:

Example 1.6. FirstPage.aspx (excerpt)

  lblTime.Text = DateTime.Now.ToString()

Example 1.7. FirstPage.aspx (excerpt)

  lblTime.Text = DateTime.Now.ToString();

You can see that these two .NET languages have much in common, because they are both built on the .NET Framework. In fact, the only difference with the above line is that C# ends code lines with a semicolon (;). In plain English, here’s what this line says:

Set the Text property of lblTime to the current date/time, expressed as a string of text.

Note that lblTime is the value we gave for the id attribute of the <asp:Label> tag where we want to show the time. So, lblTime.Text, the Text property of lblTime, refers to the text that will be displayed by the tag. DateTime is a class that’s built into the .NET Framework, and which lets you perform all sorts of useful functions with dates and times. There are thousands of these classes that do all sorts of useful things within the .NET Framework. These classes are also known as the .NET Framework Class Library.

The DateTime class has a property called Now that always contains the current date and time. This Now property has a method called ToString() that expresses that date and/or time as text (a segment of text is commonly called a string in programming circles). Classes, properties, and methods: these are all important words in the vocabulary of any programmer, and we’ll discuss them later on in the book. For now, all you need to take away from this discussion is that DateTime.Now.ToString() will give you the current date and time as a text string, which you can then tell your <asp:Label> tag to display. The rest of the script block simply ties up loose ends:

Example 1.8. FirstPage.aspx (excerpt)

End Sub
</script>

Example 1.9. FirstPage.aspx (excerpt)

}
</script>

The closing (End Sub) and (}) mark the end of the script to be run when the page is loaded, and the </script> tag marks the end of the script block.

Create a new subdirectory of C:\Inetpub\wwwroot on your Web server, and save your file there under the name FirstPage.aspx. Now, open your browser and point type this URL in the address bar:

http://localhost/test/FirstPage.aspx

Replace test with the name that you gave to the directory in which you saved the file. You should see a page similar to the one we saw in Figure 1.9.

If the time isn’t displayed, chances are that you opened the file directly in your browser instead of loading it through your Web server. Because ASP.NET is a server-side language, your Web server needs to access the file before it’s sent to your browser for display. If it doesn’t get access to the file, the ASP.NET code is never converted into HTML that your browser can understand, so make sure you load the page by typing an actual URL (e.g. http://localhost/test/index.aspx), not just a path and filename.

With the page displayed in your browser, use the View Source feature (View, Source in Internet Explorer) to view the HTML code for the page. Here’s what you’ll see:

<html>
<head>
<title>My First ASP.NET Page</title>
</head>
<body>
<p>Hello there!</p>
<p>The time is now: <span id="lblTime">10/13/2003 1:55:09 
PM</span></p>
</body>
</html>

Notice that all the ASP.NET code has gone! Even the script block has been completely removed, and the <asp:Label> tag has been replaced by a <span> tag (with the same id attribute as the <asp:Label> tag that we used) containing the date and time string.

That’s how ASP.NET works. From the Web browser’s point of view, there is nothing special about an ASP.NET page; it’s just plain HTML like any other. All the ASP.NET code is run by your Web server and converted to plain HTML that’s sent to the browser. So far, so good: the example above was fairly simple. The next chapter will get a bit more challenging as we begin to introduce you to some valuable programming concepts.

The ASP.NET Support Site

The official Microsoft ASP.NET support Website can be found at http://www.asp.net/. As you develop ASP.NET Web applications, you will undoubtedly have questions and problems that need to be answered. The ASP.NET support Website was developed by Microsoft as a portal for the ASP.NET community to answer the questions and solve the problems that developers have while using ASP.NET. The support Website provides useful information, such as news, downloads, articles, and discussion forums. You can also ask questions of the experienced community members in the SitePoint Forums.

Summary

In this chapter, you learned about .NET. You also learned of the benefits of ASP.NET and that it’s a part of the .NET Framework. First, you learned about the constructs of ASP.NET and how to locate and install the .NET Framework. Then, we explored the software that’s required not only for this book, but also in order for you or your company to progress with ASP.NET.

You’ve gained a solid foundation in the world of ASP.NET! The next chapter will build on this knowledge and begin to introduce you to ASP.NET in more detail, including page structure, languages to use, programming concepts, and form processing.



[1] Don’t worry if you don’t yet know what a Web Service is. I’ll explain all about them in Chapter 17, XML Web Services.

[2] If you do use Notepad, be aware that to need to put quotes around any filename that doesn’t end with .txt in the Save As dialog. Most ASP.NET file names end with .aspx; if you forget to put quotes around them when saving, you’ll end up with files called filename.aspx.txt!

home / programming / asp_net / 1 To page 1To page 2To page 3To page 4To page 5To page 6current page
[previous]


The Network for Technology Professionals

Search:

About Internet.com

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | E-mail Offers

webref The latest from WebReference.com Browse >
Search Engine Optimization: Selecting and Embedding Keywords · Are Google's Language Translation Web Services Ready for Prime Time? · Installing and Using Meeplace, the Business Review CMS
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
IBM DB2 10 for z/OS: Justifying the Upgrade · Living La Vida Colo: Choosing the Right Colocation Facility · FTC Concerns over Social Media Privacy Linger

Created: March 27, 2003
Revised: June 18, 2004

URL: http://webreference.com/programming/asp_net/1