Your First ASP.Net Page
While you can build ASP.Net applications using NotePad and the free .Net framework SDK, life will be much easier if you use advanced development IDE (Integrated development environment) such as Microsoft Visual Studio which we well use most of the time in the ASP.Net tutorials.
The first step is to open your Visual Studio, I am using Visual Studio 2008 here, click File > New > Project and choose Web from the Project Types list under the Visual C# node, notice that you can use other languages like VB.Net for your code behind ASP.Net, browse for the location where you want to save your first application, type HelloWorld in the Name text box, uncheck "Create directory for solution" and click Ok.
Now let's examine our IDE and what Visual Studio has generated for us. First take a look at the Solution Explorer, it is located at the right hand by default. If you by mistake have closed it or any other window we are talking about in this tutorial, don't worry, just click the View menu and you will find them all there!
The solution explorer is what keeps track of all the files in your project. You will see that Visual Studio has generated some files for us! We will examine them one by one in a minute but first let me tell you, in ASP.Net, the code, the ASP and HTML codes are separated in different files. People who worked in the previous version of ASP (which is now called ASP Classic) had to mix all the code in one page which wasn't really a good experience.
The first page you will see is the Default.aspx which is by default, the default page that the IIS on the server will call first. It's like the "entry" for your web site. If you click the plus sign on the left of the Default.aspx node, you will find another two files: Default.aspx.cs and Default.aspx.designer.cs. Now you must be wondering, why are there three files for one page?
The Default.aspx file has the layout of the page and the Default.aspx.cs has the code or what is called the Code Behind, it's the separation of the code and layout I've told you about, but what about the third file Default.aspx.designer.cs? In the ASP.Net world, every thing is in text files which is great, you can easily find and debug the code that Visual Studio generates for you, this code used to be stored in the same .cs (C Sharp) files in the older versions of .Net which sometimes caused trouble when mixed with the code the developer wrote. Now it's separated in a third file which is Default.aspx.designer.cs. This wasn't possible before "Partial Classes". Every new page you generate will have those two files too by default.
Now let's examine the first file, Default.aspx, double click it in the Solution Explorer and click "Source" located at the bottom of your page. Let's examine the first lines there, that's what you would type if you were using text editor instead of Visual Studio for ASP.Net:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="HelloWorld._Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <div> </div> </form> </body> </html>Now look at what's between <%@ and %>:
Page Language="C#": Is the language we will be using in this page, you can use other .net languages such as VB.Net but I really prefer C# in .Net Applications.
AutoEventWireup="true": This means that Visual Studio will generate code to bind the events and the page framework will automatically call events based on their names.
CodeBehind="Default.aspx.cs": This is the file that will hold the code that you will type as I've told you before.
Inherits="HelloWorld._Default": Because almost every thing in ASP.Net is in classes, this is the class that your page will inherit from, you will find this class in the Default.aspx.designer.cs and most of the time, you need not to worry about this class or what is written in it because Visual Studio will take the responsibility of modifying this code when you add controls on your page. If you are not familiar with OOP (Object Oriented Programming) basics like classes and inheritance don't worry, I Will cover OOP in much more details in more advanced tutorials.Every thing after that is ordinary XHTML standard code except for the runat="server" which means this part of code will be handled at the server level and could have ASP.Net Code. Also notice that all the controls you will use in the ASP.Net will be located between the <form id="form1" runat="server"> and the </form> tags.
Now let's return to the Design mode by clicking "Design" from the bottom of the page or simply pressing Shift+F7. We will now use our first ASP.Net controls, from the Toolbox on the left of Visual Studio which has all the controls you could use categorized into tabs, under the Standard tab, drag a Label control and drop it any where on your page. Also, drag and drop a Button control. Double click on the Button control and you will be taken directly to the Default.cs file to type your code and the cursor will be positioned in the Button1_Click(object sender, EventArgs e) event handler, the default event for the Button control. Ready to type your first ASP.Net line of code? Simply type this:
Label1.Text = "Hello World!";
And that's all! I'm sue you have noticed that just when you start typing Label1 that you can choose the code instead of typing every thing, also, just typing the dot after Label1 - which is the name of the Label control we dropped on the form - you will have a list of the properties of the control for you just to choose from and press Enter, this is called "Intellisense" and it's really a great time saver by Visual Studio. Also, notice that C# is case Sensitive.
Now to test your first program, you don't need to have IIS installed and configured on your machine! Just pressing F5 will open the ASP.Net development server and will automatically open your default browser. Visual Studio will ask you if you want to modify Web.config file to enable debugging, we will talk in more details about the Web.config file and the debugging later but for now you can safely click Ok.
In your browser click the button and finally, you will see the Hello World in your browser. CONGRATULATIONS you have created your first ASP.Net Project!
- How to Adjust Audio/Video Sync In An AVI File Using VirtualDub
Rating: 3.6/5 Votes: 188
- Show the Url of the Page
Rating: 3.5/5 Votes: 43
- Changing Hair Color Using Photoshop
Rating: 3.4/5 Votes: 71
- Shiny Buttons
Rating: 3.4/5 Votes: 19
- Fit Text in a Shape
Rating: 3.4/5 Votes: 127