Lesson 4 - Understanding What You Just Did

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

Previous Article  |  Next Article


In this lesson, we will take a closer look at some key concepts we came across in the previous lesson. First, you may have noticed a handy tool called “IntelliSense” when typing out code in Visual Studio. For instance, when you typed out the word “result”, you might have seen IntelliSense pop up giving you a list of options for completing that bit of code:

cs-asp-004---understanding-what-you-just-did.001

Step 1: Using IntelliSense

You can then "step through" the options with your arrow keys until you find what you need, and insert it into your code. In this case, the code reference we’re looking for is the Server Control variable called resultLabel. If you hit a completion key on your keyboard (tab, space, or enter), it will autocomplete and write the rest of the variable name for you. However, we knew ahead of time that we wanted to access the Text property that is contained within resultLabel, so instead of pressing Enter or Tab, if we instead press the period key (dot accessor)on the keyboard, we are given access to a new list of IntelliSense options for properties:

cs-asp-004---understanding-what-you-just-did.002

Having selected the Text property using the arrow keys, you can hit the equals sign on the keyboard to complete that variable name and put the cursor in a position where you can assign whatever text you would want to be stored in that property.

As you can see, IntelliSense can become your best friend when coding in Visual Studio. It makes your typing quicker and more accurate, while also narrowing down a list of options available to you based on the context of the coding element you are accessing.

Step 2: Distinguishing Default.aspx vs Default.aspx.cs

The next thing to go over is understanding the relation ship between the Default.aspx.cs and Default.aspx files within your project. These two project files represent two sides of the same coin, and are found by clicking on the arrow beside Default.aspx in the Solution Explorer:

cs-asp-004---understanding-what-you-just-did.003

As implied from this file hierarchy, the files ending in .cs (denoting “c-sharp” files) can be seen as representing the code behind the Default.aspx form. When you double-click the Default.aspx file - and look at its “Source” view - you will even find this referenced on the first line of code:

cs-asp-004---understanding-what-you-just-did.004

And when you double-click the Default.aspx.cs file you will see this “CodeBehind” for the Default.aspx form:

cs-asp-004---understanding-what-you-just-did.005

When running on the web server, this code will be responsible for handling the back-end logic for the form, while the Default.aspx code handles what’s delivered to the front-end and is immediately viewable to the user. Although we will go into more detail later, it’s worth noting for now that both of these files will merge into a single file called Default.aspx when the code gets compiled.

Step 3: Server Controls in Detail

Turning our attention now to Server Controls, you will notice that the Toolbox contains an exhaustive list of Server Controls organized by category:

cs-asp-004---understanding-what-you-just-did.006

We've been working with several Server Controls in the Standard category, but some other common Controls available here are:

  • Data Controls – bind to a data source like a database.

  • Validation Controls – ensure end-users are providing inputs in an acceptable format.

  • Navigation Controls – for creating menus, and site navigation.

  • Login Controls – handle securing a site with password protection and retrieval.

While these stock Server Controls are useful for general use, there are also entire libraries of purchasable Server Controls that provide additional – and often very specific – features. Every Control has one thing that it does well that distinguishes it from all of the other controls, or else it wouldn't exist. As we saw in the previous lesson, the TextBox Control that we used is good at receiving alphanumeric characters from the end-user, while the Button Control that we also used is great for allowing the end-user to click on it in order to take some action (such as processing the form). And, the Label Control is good at displaying information, such as the information the end-user provided and executed using those two other Controls.

Step 4: Referencing Server Controls in Code

Now, the execution of all of this occurs within the code behind the Button Control. When you double-click the button in the Design view, it takes you to this code block called okButton_Click, which is enclosed within a set of curly braces (each opening/closing set of curly braces is referred to as a “code block”):

cs-asp-004---understanding-what-you-just-did.007

In this case, this code block is labeled based on the name we chose for the Button, okButton, with “_Click” appended to the end of it. You can view the reference for this by going to the Properties window for the button and clicking on the Events icon (the lightning bolt beside the Properties icon):

cs-asp-004---understanding-what-you-just-did.008

This, essentially, binds the okButton_Click code block together with the act of clicking on the Button; when the button is clicked, it executes the code contained in okButton_Click. Whereas the fields and properties we previously dealt with described the appearance of the Button, this click-action Event – along with its code block(s) – describes what the button does. As such, you could consider this code block as the event handler for this button, in that it handles what the button executes in the event of a click.

Step 5: Understanding the okButton_Click Event

Let’s now turn to understanding what this particular code block does. You can see that we are using the names, or programmatic IDs for several of the Server Controls:

  • firstNameTextBox

  • lastNameTextBox

  • resulLabel

The first two references take whatever text the user typed in, each contained in a preset Property called firstNameTextBox.Text and lastNameTextBox.Text, respectively. And then the values for each of these text Properties become stored into separate variables, labeled firstName and lastName:

cs-asp-004---understanding-what-you-just-did.009

Tip:

These variables can be thought of as “buckets” that are just big enough to store information of the type specified (before the named labels). In this case, that type is of type string, meaning a “string of characters.” Picture strings as a set of alpha-numeric characters strung together, one after the other, as though on a clothes line.

You declare a variable by first specifying its type, and then its label (so we can reference it by name later in code). This tells the computer to set aside in memory a “bucket” just large enough to store that information for later use, as we did here:

cs-asp-004---understanding-what-you-just-did.012

On this line, we are creating yet another “bucket” called result, as it’s the result of combining the values contained within firstName and lastName along with the literal string values for "Hello" and an empty space for nicer formatting. The plus sign, referred to as the “concatenation operator,” essentially glues together all of these separate string values, before dumping it into the result bucket by using the equals sign, or “assignment operator.”

And, finally, we simply set the resultLabel.Text property with the contents of result:

cs-asp-004---understanding-what-you-just-did.013

Recall that during design time (before the application runs) resultLabel.Text was set, by default, as an empty string. However, the code block that references this property is, nonetheless, able to manipulate the value at runtime.

cs-asp-004---understanding-what-you-just-did.014

Step 6: Understanding Design-time vs Runtime

The process by which this design-time/human readable code becomes compiled down to a runtime/machine-readable format, and ultimately displayed for the end-user, can be visualized as follows:

cs-asp-004---understanding-what-you-just-did.015

  1. Human-readable code is complied to a machine-readable format.

  2. This code is compiled into a .NET Assembly - typically a single file with a .dll file extension in the case of a web application - that will be used and referenced whenever we want to serve up a web page.

  3. A web server will launch ASP.NET, that in return calls our .dll assembly into play, requesting a definition for default.aspx

  4. Our code will execute, and ASP.NET will deliver it to the requesting web server. The web server, in return, will send it back to the end user's web browser.

This entire compilation process gets kick-started whenever you click on the button that sends the results to the browser:

cs-asp-004---understanding-what-you-just-did.016

How is this able to display in the browser without first having a web server running the compiled .NET assembly? The answer is that there is a web server running locally on your computer. Visual Studio runs a mini web server called IIS Express (Internet Information Services Express), which you will notice becomes visible on your taskbar at compilation. This mini server is meant for local development purposes only:

cs-asp-004---understanding-what-you-just-did.017

In the next lesson, we will cover a bit more on Server Controls and how to style web pages, before delving deeper into the fundamentals of the C# language.


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