Once Visual Studio is successfully installed, go ahead and launch it in order to build your very first ASP.NET web application using C#. If you are using Windows 10, you can find Visual Studio by typing in the search textbox beside the Start Menu icon:

cs-asp-003---building-your-first-web-app.001

A good idea would be to right-click and select “Pin to Taskbar” as a convenient way for you to launch the application from the Windows taskbar:

cs-asp-003---building-your-first-web-app.002

Step 1: Getting Familiar with Visual Studio

Once Visual Studio launches you will be lead to an account login prompt. This second login is for synching up settings from other installs of Visual Studio that you may have signed into previously. This includes settings such as fonts, colors, window placement, and so on.

Tip:

It may appear, at first glance, that Visual Studio, C#, and ASP.NET are inextricably linked together. However, that is not necessarily the case. The way you can think of it is that Visual Studio is just a shell environment that lets you edit and manage your projects, which in this case is made up of C# and ASP.NET files.

After logging in you will see a “Start Page” that has a few interesting features. The largest part in the middle (1) is dedicated to providing news related items or links into MSDN (Microsoft Developer Network). This news section features valuable resources, such as, articles and videos that can help you learn more about programming in Visual Studio and keep up to date with the latest features.

On the left-hand side (2) is a convenient way to create a new project, open an existing project or access a list of recent projects, which is a list that will grow larger as we add new projects over the coming lessons. One thing you should keep an eye out for is you might see a little flag in the upper right-hand corner (3) that holds important notifications. If you click it, you will see whether or not there are any suggested updates that you should apply. It’s a good idea to make sure that Visual Studio – as well as anything relating to C#, and ASP.NET – is up to date:

cs-asp-003---building-your-first-web-app.005

Step 2: Setting Up Line Numbers and Font Size

A simple adjustment to make code lines easier to follow, is to enabling line numbers for the left margin. To do so, go to the menu bar in Visual
Studio and select:

Tools > Options

Select from the left-hand menu:

Text Editor > All Languages > Line Numbers

 

cs-asp-003---building-your-first-web-app.006

And now you should see line numbers appearing in the left margin:

cs-asp-003---building-your-first-web-app.007

While you are in the Options menu, note that you can also adjust the font size under:

Environment > Fonts and Colors

cs-asp-003---building-your-first-web-app.008

Step 3: Create a New ASP.NET Application

Once all of that is taken care of, go ahead and create a new project by either following the link on the start page or from the file menu:

File > New Project

Next you will see the New Project dialogue window. From here you will have to navigate the Installed Templates. Within the Installed Templates menu, continue until you find:

Templates > Visual C# > Web

Just make sure that you are using Visual C# templates and not Visual Basic. Select the entry in the middle called “ASP.NET Web Application”:

cs-asp-003---building-your-first-web-app.009

Now change the name of your project to “MyFirstWebApp,” ensuring that no whitespace is used when naming the application. Also, be aware of the capitalization scheme shown. Go ahead and click “OK” in the lower right-hand corner to continue.

Note that there are several different types of ASP.NET applications, but in this series we will focus on Web Forms. However, in the next step be sure to select “Empty” in order to start from an empty template that lets us add a Web Form later. You will also want to select the option to “Add folders and core references for Web Forms” and make sure that the “Host in the Cloud” option is unselected:

cs-asp-003---building-your-first-web-app.010

Tip

The process of creating and setting up new ASP.NET projects outlined here will be the basis for all of the other lessons. Be sure to refer back to this lesson if you have trouble remembering how to get your projects set up in future lessons.

Step 4: Introducing the Solution Explorer

After you click the “OK” button, Visual Studio will go through the process of creating a new project for you. A project can be thought of as a collection of all the file settings, references, and assets (such as, images or sounds) that will be used to create your web app. Once your project loads, take a look at the “Solution Explorer” found on the right-hand side of Visual Studio:

cs-asp-003---building-your-first-web-app.012

The “Solution” (1) is almost always found at the very top of the list within the Solution Explorer, which can be viewed as a hierarchy tree of files and references used in the project. Although you can have more than one project (2) per Solution, most of our lessons will stick to just one. Note that if the Solution Explorer is not visible, you can make it visible by selecting from the Visual Studio Menu:

View > Solution Explorer

The first thing you will want to do within the Solution Explorer is right-click the “MyFirstWebApp” project (making sure not to select the Solution itself but rather the second entry below the Solution):

cs-asp-003---building-your-first-web-app.013

When the context menu pops up, select from it:

Add > Web Form

Following that, you will be prompted to specify a name. Call it “Default,” and then click “OK.” This will create a page titled Default.aspx (the .aspx file name indicates that it’s a Web Form). Once this launches, you will see some HTML mixed with ASP.NET declaratives:

cs-asp-003---building-your-first-web-app.014

Step 5: Using the Designer to Make Webpages

Ignore the background HTML/ASP markup for the Default.aspx file for now as you will be mainly working within the Design mode (or, the “Designer”). This provides a rough approximation of what your web page will look like once it’s running on the client’s web browser. The Designer is a convenient WYSIWYG visual editor that allows you to add markup to your page without having to access the HTML/CSS code behind it. Enter the Designer view by selecting the ‘Design’ button located at the bottom left-hand corner of Visual Studio. Your initial goal in the Designer is to add text and Controls to the page. You should see a dashed box at the very top with the body/div tag above it:

cs-asp-003---building-your-first-web-app.015

Inside of the dashed box near the body tag, type the question: “What is your first name?” with two spaces following the question mark so that we can insert a Control item:

cs-asp-003---building-your-first-web-app.016

Step 6: Insert Controls via the ToolBox

Now, navigate to the Toolbox and find a Server Control called “TextBox.” If the Toolbox is not visible for you, you can make it visible by going to the Visual Studio menu and selecting:

View > Toolbox

cs-asp-003---building-your-first-web-app.017

Tip:

In the upper right hand corner of the Toolbox, you will notice a little pin that allows you to enable or disable auto-hide for that window. Pinning and unpinning is very useful, especially if you find yourself accessing a menu item frequently. Pinning this menu will come in handy for now.

Double-click the TextBox option in order to insert it into the web page where your cursor was last at (the two spaces after the question). Now, making sure that your cursor is positioned after this TextBox, hit the enter key twice on the keyboard and type “What is your last name?” followed again by two spaces. Now, repeat the previous step to insert another TextBox control after this phrase. You should now have something that looks like this:

cs-asp-003---building-your-first-web-app.019

Once again position your cursor at the end of the last line and hit the Enter key two more times. Returning to the Toolbox you will find, near the top, an option that inserts a button inside of your web page:

cs-asp-003---building-your-first-web-app.020

After the button is inserted, once again press enter twice and back in the Toolbox find and insert a Label Control:

cs-asp-003---building-your-first-web-app.021

Step 7: Customizing Controls via the Properties Window

The next thing to do is set some properties for these Controls (which are actually called ASP.NET Server Controls). Go ahead and select the first TextBox:

cs-asp-003---building-your-first-web-app.022

And while it is selected go to its Properties in the right-hand pane. If you don’t see the Properties pane go to the menu and select:

View > Properties Window

Alternatively, you can just press the F4 key to display the Properties window. In this window, change the programmatic ID for the first TextBox to “firstNameTextBox.” This name will let us keep track of what was entered in the TextBox, so we can later reference it within code:

cs-asp-003---building-your-first-web-app.023

While naming is somewhat arbitrary, a good rule of thumb to follow is to pick one that communicates the intent of the Control. Another good rule of thumb is to use the capitalization convention shown, called camel-case (lower-case first letter, followed by upper-case first letters for each word, while using no spaces to separate the words). Next, select the second TextBox and set its ID accordingly, with “lastNameTextBox”:

cs-asp-003---building-your-first-web-app.024

Now, selecting the Button Control in the Designer, go to its Properties window and change its ID to “okButton,” and also change its Text label (under “Appearance”) to “Click Me”. Now the button in the Designer should change as well:

cs-asp-003---building-your-first-web-app.025

And finally, select the Label control in the Designer and change its programmatic ID to “resultLabel”, while also removing the value in the “Text” field:

cs-asp-003---building-your-first-web-app.026

Removing the text for the Label ensures that nothing is shown by default (this will instead be determined in code later). The part that says “[resultLabel]” will only be visible in the Design view, but will not be visible within the public-facing web page. At the end of all of this, the Design view should look like this:

cs-asp-003---building-your-first-web-app.027

Step 8: Write C# Code to Determine Page Behavior

Now, double click the “Click Me” button and a new tab will launch for a file called Default.aspx.cs. In this file, you will see a bunch of C# code with the cursor situated in between curly braces for a block of code called okButton_Click:

cs-asp-003---building-your-first-web-app.028

Within this set of curly braces type in the following code exactly as shown here. (Make sure to include the spaces in the literal strings)

cs-asp-003---building-your-first-web-app.029

Tip

Beginners will often run into errors that usually trace back to incorrectly typed code. Double-check that your code follows along exactly with the lesson material. If you see red squiggly underlines – it’s an indicator that you omitted, or mistyped, something in your code. Unlike writing text messages and emails, coding is an exercise in precision!

Step 9: Save and Run Your Application

The final thing you will want to do for this lesson is save all of your work (meaning all of the changes we have made to all of the files in our entire project). To do so, click on the “Save All” icon in the Visual Studio menu, or else from the menu select:

File > Save All

cs-asp-003---building-your-first-web-app.031

Now, let’s see the result of all of our work by running the application. Click on the green arrow icon in the Visual Studio menu to run the application in your web browser of choice:

cs-asp-003---building-your-first-web-app.032

You can now test out the application in the browser by entering your information in the form, and see the result posted back to you after hitting “Click Me”:

cs-asp-003---building-your-first-web-app.033


Lessons in this Course

[/fusion_text]