Article: HelloWorld in .Net »
FERDY CHRISTANT - NOV 4, 2005 (10:03:33 AM)
Whenever I'm starting to use technology, I like to be as pragmatic as possible. I'm really the kind of person that learns by example first. Once I have my infrastructure in place, I go for the obvious HelloWorld. After that it's books, practice, courses, and Google that help me further. In this article, I like to list the steps needed to get started with ASP.Net 2.0 by installing the appropriate software and running a first HelloWorld program. Note that this is a total newbee tutorial, as I am one myself.
Recently, Microsoft has released a free download of Visual Web Developer 2005. Visual Web Developer 2005 Express Edition Beta 2 is a lightweight, easy-to-use and easy-to-learn development tool focused exclusively on Web development in .Net. Inside, you will find everything you need to begin building dynamic Web applications with ASP.NET 2.0. Installation is straightforward:
- Download the product
- Run the setup program, simply follow the instructions on screen. Below you can see the selections I made in the setup program:
- As the name indicates, this tool allows you to build web applications only. If you would like to build a Windows application, you will need the free Visual C# Express edition Beta2 download.
A first web application
Before we start playing, let's think of a simple case. My idea is to create a welcome page on which the user is prompted for his name. After clicking submit, the user will be redirected to a welcome page, where he will be greeted. This way we will experience both designing a web form and doing a little bit of coding. Ready? Let's start...
First, start Visual Web Developer (I'll refer to VWD from now on). Ignore the welcome screen. We don't need no help, we're going heads first here. Before you do anything, create a folder on your file system to hold your new project. Next, create a new web site project from VWD by selecting File->New Website...
Make the selections as indicated above, yet point the project directory to your own. Note that you are able to develop in multiple languages in this environment, a very cool feature.
After you have created your project, a default file named "Default.aspx" is created an opened in source mode. In source mode, you see the raw HTML and ASP code, which you can manually edit. You can also switch to design mode, where you can visually design your page.
First, we are gonna use the Default.aspx file to design our input web form. Switch to design mode and follow these steps:
- In design mode, type the text "Please enter your name:"
- On the left of the design panel, you will find the Toolbox panel, which is essential for visually designing your web form. Drag the TextBox control next to the "Please enter your name:" text on the design panel.
Name the TextBox "name" by setting the "ID" property to "name" in the attributes panel:
- Likewise, use the attribute editor to set the page title. Change the selection of the attributes panel to DOCUMENT, scroll down to the Title attribute and set it to "HelloWorld".
- We will create a submit button after we have created the greeting page, later you will see why. First, let's try to preview our web form. Go to File->View in Browser or press Ctrl+Shift+W. You will most likely be prompted to log on. Use your Windows account credentials. Next, you should be able to see your simple web form in action at http://localhost:2410/
We will come back to the input form later. First, let's create the response web page. The response page's purpose is to collect the name that was entered in the input form and output it to the web page. Go to File->New File.., select Web Form as the template, and name the new file "greeting.aspx". Follow the steps below to implement the greeting page:
- As explained when we created the input form, use the attribute editor to set the page title of the greeting page to "greeting".
- If not already, open the greeting page in source mode. Position your cursor between the form open and close tags, and insert the following code:
Hello <% Response.Write(Request.Form["name"]); %>
Note that code is case-sensitive in ASP.NET 2.0. The line of code above will collect the value of the name input field of the request, and output it to the response, which is the current web page.
- Save the file (Ctrl+S)
Almost done. There is one more important thing to do. We need to let the input form post to the greeting page. We will do this by creating a submit button:
- Open the input form (Default.aspx) in design mode.
- Place your cursor behind the input field we created earlier, then drag a Button from the ToolBox panel onto the design panel.
- With the button selected, use the attribute editor to set the following attribute values:
name value Text Submit PostBackUrl ~/greeting.aspx UseSubmitBehavior True
The end result of your input form should look something like this:
Testing the end result
This concludes the implementation, let's test it:
- Open the web form in your web browser.
- Enter "World" in the name field.
- Press the submit button or hit Enter.
- If the output of the response page is "Hello World", the test is successfull.
You can download the source code for these two aspx files here.
After playing for an hour or so with VWD, here are some early conclusions:
- It is easy to get started with the product. The download is quite big, but once the installation process starts, you will be up and running in minutes. In addition, the tooling is free and light-weight.
- Developing in VWD feels very natural. Without any prior knowledge or experience of the tool, I was able to implement a simple web application. Being able to visually design your input forms is a great helper in this.
- The syntax of C# is convenient if you're used to Java, it really is not that different. Likewise for the typical web objects, such as Request and Response. Also, the ability to program in your language of preference is cool, even though it still does not deliver platform-independence.
I had fun, it feels good to be this productive in a new platform :)