You are on page 1of 10

Fritz Onion's Intro to ASP.

NET
Part 1 of 4 - ASP.NET
Fundamentals (in C#)
Table of Contents
Fritz Onion's Intro to ASP.NET Part 1 of 4 - ASP.NET Fundamentals (in C#) .................... 1
Exercise 1 Creating a simple .aspx page........................................................................................................................2
Exercise 2 Building and using a supplemental assembly ..............................................................................................5
Exercise 3 Building a .aspx page with code behind.......................................................................................................7
Fritz Onion's Intro to ASP.NET Part 1 of 4 - ASP.NET Fundamentals (in C#)

Fritz Onion's Intro to ASP.NET Part 1 of 4 -


ASP.NET Fundamentals (in C#)
After completing this lab, you will be better able to:
Objectives ƒ Understand class creation and assembly loading in ASP.NET
ƒ Work with code behind to separate logic from presentation
ƒ Build, deploy, and use assemblies in the /bin directory
After working on this lab, you must have:
Prerequisites ƒ Web development experience
ƒ Object-oriented programming experience
ƒ Some familiarity with C#

Estimated Time to 40 Minutes


Complete This Lab
See Essential ASP.NET with Examples in C#, Chapter 1
For more information

Page 1 of 8
Fritz Onion's Intro to ASP.NET Part 1 of 4 - ASP.NET Fundamentals (in C#)

Exercise 1
Creating a simple .aspx page

Scenario
In this exercise, you will create a new ASP.NET Web Project with Visual Studio .NET 2003 and create a simple
.aspx page that displays artificial weather for a number of different zip codes.

Tasks Detailed Steps


1. Create a new Web a. Click in the virtual machine window.
project with Visual b. Click the Administrator icon.
Studio .NET 2003.
c. Log on with a password of password.
d. Click Start | All Programs | Microsoft Visual Studio .NET 2003 | Microsoft
Visual Studio .NET 2003.
e. Click File | New | Project
f. Select Visual C# Projects from the Project Types section.
g. Select ASP.NET Web Application from the Templates section.
h. In the Location dialogue box type http://localhost/AspDotNetIntroLab1/before
and click OK.
Note that we are using the technique of creating the virtual directory in which our site
lives before creating the Visual Studio .NET project in these labs (which is why you
ran the creatvdirs.exe utility during setup) - if you don't have the virtual directory pre-
created, Visual Studio .NET will create one for you at that location on the machine.
2. Remove all of the a. Left-click the AssemblyInfo.cs file in the Solution Explorer and shift-left-click
generated files from on the bottom file, WebForm1.aspx so that all files are selected.
the project. b. Press the Delete key.
c. Click OK to confirm the deletion.
Since we want to create a simple .aspx file, we will start by removing all of the files
that Visual Studio .NET created for us.
3. Add a new file to the a. Right-click on the before project in the Solution Explorer and select Add | Add
project, New Item.
WeatherPage.aspx. b. In the Templates section of the dialog box, select the Text File template.
c. In the Name box type WeatherPage.aspx.
d. Click Open.
We want to add a new page to the project, WeatherPage.aspx, but do not want to
create a code-behind file for it yet
4. Add the shell to your a. Switch to HTML-mode by clicking on the HTML tab on the bottom left part of
WeatherPage.aspx. the page.
b. Add an @Page directive specifying C# as the language for the page by typing:
<%@ Page language="C#" %>
c. Add the following HTML code just below the page directive by pasting Snippet1
from c:\labs\Snippets\Lab1 Snippets:
<html>
<body>
<h1>My weather forecast page</h1>

Page 2 of 8
Fritz Onion's Intro to ASP.NET Part 1 of 4 - ASP.NET Fundamentals (in C#)
Tasks Detailed Steps
<p>The weather for zipcode 04090 is: </p>
<p>The weather for zipcode 90210 is: </p>
<p>The weather for zipcode 84101 is: </p>
<p>The weather for zipcode 80014 is: </p>
<p>The weather for zipcode 02101 is: </p>
</body>
</html>
5. Try running your a. To test your page in the browser, right click on the WeatherPage.aspx file in the
page. Solution Explorer and select Set as start page.
b. Select Debug | Start without debugging (or press Ctrl-F5) to launch the page in
the browser.
c. Close the Internet Explorer window.
6. Next, add a server- a. Add a server-side script block just below your @Page directive:
side code block to <script runat="server">
your page with a // TODO
method called </script>
'GetForecast'. b. Type the following code in the newly created script block of WeatherPage.aspx
after //TODO.
static Random rand = new Random();
This adds a member variable declaration to your script block for a reference to the
Random class and initializes it to a newly allocated instance of Random.
c. Add the following code in the script block of WeatherPage.aspx by pasting
Snippet2
string GetForecast(string zip)
{
string ret = string.Empty;

switch (rand.Next(5))
{
case 0:
ret = "Sunny and warm";
break;
case 1:
ret = "Partly cloudy and chilly";
break;
case 2:
ret = "Cold with a chance of snow";
break;
case 3:
ret = "Rain";
break;
case 4:
ret = "Foggy and damp";
break;
}
return ret;
}
This adds a method declaration to your script block which accepts a string as input
(zipcode) and returns a string (forecast) which is a randomly generated weather
forecast.
7. Finally, complete a. Use server-side script notation to call GetForecast at the end of each paragraph

Page 3 of 8
Fritz Onion's Intro to ASP.NET Part 1 of 4 - ASP.NET Fundamentals (in C#)
Tasks Detailed Steps
each of the <p> element - the first one should now look like:
elements of your <p>The weather for zipcode 04090 is:
page by actually <%= GetForecast("04090") %> </p>
calling your
GetForecast function
to retrieve the
forecast for that
zipcode!
8. Compile and run a. You can explicitly compile by pressing Ctrl-Shift-B, or selecting Build | Build
your page! Solution from the menu.
b. Launch your application by selecting Debug | Start without debugging (or press
Ctrl-F5) (which will also compile your application if necessary).
c. Verify that you see randomly generated forecasts for each zip code and close the
Internet Explorer window.

Page 4 of 8
Fritz Onion's Intro to ASP.NET Part 1 of 4 - ASP.NET Fundamentals (in C#)

Exercise 2
Building and using a supplemental assembly

Scenario
In this exercise, you will build a secondary library (assembly) which contains a WeatherForecaster class to
perform the weather forecast functions that you build directly into the page in the last exercise.

Tasks Detailed Steps


1. Add a new class a. Right-click the Solution icon in the Solution Explorer and select Add | New
library project to project.
your solution b. Select Visual C# Projects under Project Types, and Class Library under
Templates.
c. Type WeatherForecaster in the Name field.
d. Type C:\labs\AspDotNetIntroLab1\before in the Location field.
e. Click OK
2. Change the version a. Double-click the AssemblyInfo.cs file in the new class library project
attribute to be 1.0.0.0 b. Locate the AssemblyVersion attribute and change it from 1.0.* to 1.0.0.0.
c. The code should then look like:
[assembly: AssemblyVersion("1.0.0.0")]
This is so it doesn't regenerate a version number with each compile.
3. Change the main a. Right-click on the Class1.cs file in your Solution Explorer and select Rename.
class file name to be b. Type in WeatherForecaster.cs as the new file name and press Enter.
WeatherForecaster.cs
4. Change the a. Double-click the WeatherForecaster.cs file.
namespace and b. Change the containing namespace of the class from WeatherForecaster to
classname of your AspDotNetIntro.Lab1.
WeatherForecaster
c. Change the name of the class from Class1 to WeatherForecaster.
class
d. Remove the default constructor in the class since it is now named incorrectly.
This is the one method that was added to the class for you, simply delete it in its
entirety.
e. Your class should now look like:
namespace AspDotNetIntro.Lab1
{
public class WeatherForecaster
{
}
}
5. Populate your class a. Double-click WeatherPage.aspx in the Solution Explorer.
with the member and b. Highlight the entire contents of the server-side script block into the clipboard
method you added to (excluding the tags), right-click it and select Cut.
your .aspx file earlier
c. Double-click WeatherForecaster.cs in the Solution Explorer.
d. Right-click in the body of the new WeatherForecaster class and select Paste.
e. Modify the GetForecast method to include both the 'public' and 'static' modifiers
since we must be able to call this externally
public static string GetForecast(string

Page 5 of 8
Fritz Onion's Intro to ASP.NET Part 1 of 4 - ASP.NET Fundamentals (in C#)
Tasks Detailed Steps
zip)
{
//...
6. Add a reference to a. Right click on the References folder in your before web project in the Solution
your Explorer and select Add Reference.
WeatherForecaster b. In the Add Reference dialog click on the Projects tab.
assembly in your
c. Select the WeatherForecaster project and click Select.
Web project
d. Click OK.
Adding this reference causes VS.NET to copy the WeatherForecaster assembly to
the /bin directory of the web application, as well as add it to the list of referenced
assemblies during compilation.
7. Change the calls to a. Double-click the WeatherPage.aspx file
GetForecast to use b. Change the calls to GetForecast in the interspersed script blocks to use the
your new class namespace-qualified class reference
library in your
AspDotNetIntro.Lab1.WeatherForecaster.GetForecast("04090")
WeatherPage.aspx
.
page
8. Compile and test! a. Compile by pressing Ctrl-Shift-B, or select Build | Build Solution from the
menu.
b. Launch your application by selecting Debug | Start without debugging (or press
Ctrl-F5).
c. Verify that you see randomly generated forecasts for each zip code and close the
Internet Explorer window.

Page 6 of 8
Fritz Onion's Intro to ASP.NET Part 1 of 4 - ASP.NET Fundamentals (in C#)

Exercise 3
Building a .aspx page with code behind

Scenario
In this exercise, you will add another page to your Web application that uses code-behind to separate code from
presentation.

Tasks Detailed Steps


1. Add a new WebForm a. Right-click the before web project in the Solution Explorer and select Add |
to your Web project Add Web Form….
called b. Type WeatherPageWithCodeBehind.aspx in the Name field and click Open.
WeatherPageWithCo
deBehind.aspx
2. Change the page a. Right-click the design space and select Properties.
layout to 'flow' b. Select FlowLayout in the Page Layout drop-down menu.
c. Click OK.
Doing this avoids the idiosyncrasies associated with fixed positioning in HTML.
3. . Add the same a. Switch the view to HTML on the WeatherPageWithCodeBehind.aspx by
paragraph elements clicking the HTML button in the lower left corner of Visual Studio.
from your b. Open the WeatherPage.aspx file in HTML view and copy the elements between
WeatherPage.aspx to the <body> and </body> elements.
the form element of
c. Switch to the WeatherPageWithCodeBehind.aspx page and paste the contents
your new page
into the <form> element.
4. Add a GetForecast a. Select View | Code from the menu (or press F7), or push the Show all files icon in
method to the code- the Solution Explorer, expanding the plus sign next to the .aspx file and double-
behind class of your clicking the .cs file underneath.
new page Change the namespace from before to AspDotNetIntro.Lab1.
Copy the contents of the WeatherForecaster.cs to
WeatherPageWithCodeBehind.aspx, in the brackets of public class.
Change the GetForecast from public to protected (since it is only being accessed
by a derived class now)
static Random rand = new Random();

protected string GetForecast(string zip)


//...

5. Change at least one a. Open your WeatherPageWithCodeBehind.aspx file in HTML mode.


of the calls to b. Select one of the calls to GetForecast with the fully-qualified namespace, and
GetForecast in your reduce it to simply (so that it calls the inherited method instead of the method on
WeatherPageWithCo the WeatherForecaster class):
deBehind.aspx to use
GetForecast("04090").
your code-behind
method instead of the
class library method

6. Compile and test! a. Right click WeatherPageWithCodeBehind.aspx in the Solution Explorer and

Page 7 of 8
Fritz Onion's Intro to ASP.NET Part 1 of 4 - ASP.NET Fundamentals (in C#)
Tasks Detailed Steps
select Set as start page, then select Debug | Start without debugging to test the
page.

Page 8 of 8

You might also like