Creating a Simple ASP.Net Page Using Visual Studio


Click here to change the theme.

Please read Notes from Book: Pro ASP.NET 4 first, it has some important introductory material. I will rewrite that sometime so it is a better introduction.

We shall create a couple of very simple ASP.Net pages and deploy them to a server in a couple of ways. This article uses C# but could easily be used for ASP.Net pages using VB.Net.

The first thing to do is to decide whether to create a Web Project or a Web Site. In Visual Studio the "File" | "New" sub-menu has "Project..." and "Web Site...". We create Web Projects using "File" | "New" | "Project...". Web Sites are a newer and improved way to create ASP.Net applications. We should create Web Sites instead of Web Projects unless we know we need a Web Project but for this article we will create a Web Project to see how that works. In the future you will likely create Web Sites.

Basic ASP.Net pages consist of a file with an aspx extension containing HTML and ASP.Net elements and some related C# or VB.Net code. The C# or VB.Net code can be within the aspx file and when it is it is called inline code. The code however can be (and usually is) in a separate file or files and then it is called "code-behind". We will create a page that has inline code to see how that works then the same page using code-behind.

Create the Project

Create a Web Project using "File" | "New" | "Project...". In the left in the C# node select "Web" then select "ASP.NET Web Application". Give it whatever name you want to use, I am calling it "SimpleSite". The New Project page should be as in the following.

ASP.Net New Project Page

When you click OK, you will get a "New ASP.NET Project" page with various templates to choose from. There will probably be multiple versions of ASP.NET to create sites for but we will assume you will want the latest version, whatever it is. Select "Empty" and leave everything as the default. The New ASP.NET Project page should look as in the following:

New ASP.NET Project page

Click OK. The Solution Explorer will look as in the following:

Solution Explorer for the new project

Create the Page Using Inline Code

To create a page, use "Project" | "Add New Item...". In the Add New Item page in the left side choose "Visual C#" | "Web" | "Web Forms". In the middle choose "Web Form". Click "Add".

Since we want to try inline code, delete the following from the Page element at the top:

AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="SimpleSite.WebForm1"

Then add the following to the top of the file (as the first line, before even the Page element):

<%@ Import Namespace="System" %>

The WebForm1.aspx file should now look like:

<%@ Import Namespace="System" %>
<%@ Page Language="C#" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>

</div>
</form>
</body>
</html>

Then in Solution Explorer expand the WebForm1.aspx node. Delete WebForm1.aspx.cs and WebForm1.aspx.designer.cs, so that there is nothing in the WebForm1.aspx except WebForm1.aspx.

Note that you will usually not normally modify a new page in that manner, this is just for pages that you want to use inline code for instead of code-behind.

In the Design view for the page, drag-and-drop two TextBoxes and a button from the Toolbar to the page. Arrange them as you wish. Then double-click the button. Visual Studio will then switch to the Source view for the page. You will see that Visual Studio has added a script block with a Button Click handler in it. Add the following to the Button Click handler:

TextBox2.Text = TextBox1.Text;

The WebForm1.aspx file should now look like:

<%@ Import Namespace="System" %>
<%@ Page Language="C#" %>

<!DOCTYPE html>
<script runat="server">

protected void Button1_Click(object sender, EventArgs e)
{
TextBox2.Text = TextBox1.Text;
}
</script>


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />

</div>
</form>
</body>
</html>

Test and Deploy the Page

Build the project. Note that in the build output it will show that it has created a SimpleSite.dll. A Web Site won't do that but this is a Web Project. The button that you usually use to test a project will probably say "Microsoft Edge" or whatever browser you are using. Click it to test the page. Enter something into the first TextBox then click the button. The text will be copied to the second TextBox.

Note that when the button is clicked a post-back is done. That means that the page must go all the way to the server, even if it is on the other side of the world, then back. That is a lot of time just to copy the data, unless the server is local. Well that is how ASP.Net works. For simple things such as this JavaScript is more efficient.

Deploying the page is optional but I think it is exciting to see how easy it is to deploy a simple page. The single simple page can be deployed as easily as a HTML page. Just copy it the same as you would a HTML page. If you have IIS in your local system then you can just copy the file to there. Otherwise you can FTP the page to the server.

Create the Page Using Code-Behind

We will now create the same page except using code-behind.

As before, create the page using "Project" | "Add New Item...". In the Add New Item page in the left side choose "Visual C#" | "Web" | "Web Forms". In the middle choose "Web Form". Click "Add".

Without doing anything else, switch to Design view for the page if it is not there yet then drag-and-drop two TextBoxes and a button from the Toolbar to the page, as before. Arrange them as you wish. Then double-click the button. Visual Studio will now switch to the WebForm2.aspx.cs file with a Button Click handler in it. Add the same code as before to it.

Test and Deploy the Page

Test it as before.

Deploying it is a little different since there is now a separate WebForm2.aspx.cs file. Well, it is not working for me. I need to resarch this.