Lesson 3 - Building Your First Web App

Tutorial Series: Free C# Fundamentals via ASP.NET Web Apps

Previous Article  |  Next Article


Get GitHub Code

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       

Related Articles in this Tutorial:

Lesson 1 - Series Introduction

Lesson 2 - Installing Visual Studio 2015

Lesson 3 - Building Your First Web App

Lesson 4 - Understanding What You Just Did

Lesson 5 - Working with Projects in Visual Studio

Lesson 6 - Simple Web Page Formatting in Visual Studio

Challenge 1

Solution 1

Lesson 7 - Variables and Data Types

Lesson 8 - Data Type Conversion

Lesson 9 - Arithmetic Operators

Lesson 10 - C# Syntax Basics

Challenge 2 - ChallengeSimpleCalculator

Solution - ChallengeSimpleCalculator

Lesson 11 - Conditional If Statements

Lesson 12 - The Conditional Ternary Operator

Challenge 3 - ChallengeConditionalRadioButton

Solution - Challenge Conditional RadioButton

Lesson 13 - Comparison and Logical Operators

Lesson 13 Challenge - First Papa Bob's Website

Solution - Challenge First Papa Bob's Website

Lesson 14 - Working with Dates and Times

Lesson 15 - Working With Spans of Time

Lesson 16 - Working with the Calendar Server Control

Challenge 4 - Challenge Days Between Dates

Solution - Challenge Days Between Dates

Lesson 17 - Page_Load and Page.IsPostBack

Lesson 18 - Setting a Break Point and Debugging

Lesson 19 - Formatting Strings

Challenge 5 - Challenge Epic Spies Assignment

Solution - Challenge Epic Spies Assignment

Lesson 20 - Maintaining State with ViewState

Lesson 21 - Storing Values in Arrays

Lesson 22 - Understanding Multidimensional Arrays

Lesson 23 - Changing the Length of an Array

Challenge 6 - Challenge Epic Spies Asset Tracker

Solution - Challenge Epic Spies Asset Tracker

Lesson 24 - Understanding Variable Scope

Lesson 25 - Code Blocks and Nested If Statements

Lesson 26 - Looping with the For Iteration Statement

Challenge 7 - Challenge For Xmen Battle Count

Solution - Challenge For Xmen Battle Count

Lesson 27 - Looping with the while() & do...while() Iteration Statements

Lesson 28 - Creating and Calling Simple Helper Methods

Lesson 29 - Creating Methods with Input Parameters

Lesson 30 - Returning Values from Methods

Lesson 31 - Creating Overloaded Methods

Lesson 32 - Creating Optional Parameters

Lesson 33 - Creating Names Parameters

Lesson 34 - Creating Methods with Output Parameters

Challenge 8 - Challenge Postal Calculator Helper Methods

Solution - Challenge Postal Calculator Helper Methods

Mega Challenge Casino

Solution - Mega Challenge Casino

Lesson 35 - Manipulating Strings

Challenge 9 - Phun With Strings

Solution - Challenge Phun With Strings

Lesson 36 - Introduction to Classes and Objects

Challenge - Hero Monster Classes Part 1

Solution - Hero Monster Classes Part 1

Challenge - Hero Monster Classes Part 2

Solution - Challenge Hero Monster Classes Part 2

Lesson 37 - Creating Class Files Creating Cohesive Classes and Code Navigation

Lesson 38 - Understanding Object References and Object Lifetime

Lesson 39 - Understanding the .NET Framework and Compilation

Lesson 40 - Namespaces and Using Directives

Lesson 41 - Creating Class Libraries and Adding References to Assemblies

Lesson 42 - Accessibility Modifiers, Fields and Properties

Lesson 43 - Creating Constructor Methods

Lesson 44 - Naming Conventions for Identifiers

Lesson 45 - Static vs Instance Members

Challenge 10 - Challenge Simple Darts

Solution - Challenge Simple Darts

Lesson 46 - Working with the List Collection

Lesson 47 - Object Initializers

Lesson 48 - Collection Initializers

Lesson 49 - Working with the Dictionary Collection

Lesson 50 - Looping with the foreach Iteration Statement

Lesson 51 - Implicitly-Typed Variables with the var Keyword

Challenge 11 - Challenge Student Courses

Solution - Challenge Student Courses

Mega Challenge War

Solution - Mega Challenge War

Lesson 52 - Creating GUIDs

Lesson 53 - Working with Enumerations

Lesson 54 - Understanding the switch() Statement

Lesson 55 - First Pass at the Separation of Concerns Principle

Lesson 56 - Understanding Exception Handling

Lesson 57 - Understanding Global Exception Handling

Lesson 58 - Understanding Custom Exceptions

Lesson 59 - Creating a Database in Visual Studio

Lesson 60 - Creating an Entity Data Model

Lesson 61 - Displaying the DbSet Result in an ASP.NET GridView

Lesson 62 - Implementing a Button Command in a GridView

Lesson 63 - Using a Tools-Centric Approach to Building a Database Application

Lesson 64 - Using a Maintenance-Driven Approach to Building a Database Application

Lesson 65 - Creating a New Instance of an Entity and Persisting it to the Database

Lesson 66 - Package Management with NuGet

Lesson 67 - NuGet No-Commit Workflow

Lesson 68 - Introduction the Twitter Bootstrap CSS Framework

Lesson 69 - Mapping Enum Types to Entity Properties in the Framework Designer

Lesson 70 - Deploying the App to Microsoft Azure Web Services Web Apps

Papa Bob's Mega Challenge

Papa Bob's Mega Solution Part 1 - Setting up the Solution

Papa Bob's Mega Solution Part 2 - Adding an Order to the Database

Papa Bob's Mega Solution Part 3 - Passing an Order from the Presentation Layer

Papa Bob's Mega Solution Part 4 - Creating the Order Form

Papa Bob's Mega Solution Part 5 - Adding Enums

Papa Bob's Mega Solution Part 6 - Creating an Order with Validation

Papa Bob's Mega Solution Part 7 - Calculating the Order Price

Papa Bob's Mega Solution Part 8 - Displaying the Price to the User

Papa Bob's Mega Solution Part 9 - Creating the Order Management Page


Comments

Please login or register to add a comment