Acoptex.com

members

CASPNET WF Learning C# basics using ASP.NET

Tags: C#, Csharp, ASP.NET, C# fundamentals, C# basics

These lessons are designed to keep you engaged with the process of learning C# basics by presenting it through a series of lessons aimed at creating simple, browser-based, web applications using ASP.NET. Our main focus will be on learning C# basics, while the side focus will be on learning ASP.NET. Once you understand the C# basics, you will then be able to delve far deeper into ASP.NET, which will also be made easier having come to understand HTML, CSS, and other web related technologies.

Lesson 4 Building Your First Web Application Program

Once Visual Studio is successfully installed, launch it in order to build your 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 - Visual Studio 2017

You can also do right-click and select Pin to Taskbar as a convenient way for you to launch the application from the Windows taskbar.

You will see that the IDE is loading.

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.

After logging in you will see a Start Page that has a few interesting features:

(1) - 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.

(2) - 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.

(3) - important notifications. If you click it, you will see whether or not there are any suggested updates that you should apply. 

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 Tools -> Options.

Select Text Editor -> All Languages -> Line Numbers

This is to enable the line numbers appearing in the left margin when programming for easy reference.

You can also adjust the font size. Go to Environment -> Fonts and Colors.

2. Make a New ASP.NET Application

Make a New project by either following the link on the Start page or from the file menu: File -> New -> Project

You will see the New Project window. Go to the Installed Templates-> Visual C# -> You can select any template (Windows Form App or Console App or ASP.NET Web Application). We need to select the ASP.NET Web Application, framework version (for example 4.7.2), change the name of your project to WebApp_1 and click on OK button.

You will see another window. There are several different types of ASP.NET applications, however we will focus on Web Forms. 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 deselected if available. Click on OK button.

Visual Studio will create 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. After your project loads have a look at the Solution Explorer on the right side of Visual Studio IDE. If you do not see it. Go to View->Solution Explorer

The Solution 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. Right-click the WebApp_1 project (it is under Solution) and select Add -> Web Form

You will be prompted to specify a name. Call it Default and then click on OK button. 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.

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. You should see a dashed box at the very top with the body/div tag above it.

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 later.

Go to Toolbox and find a Server Control called TextBox. If the Toolbox is not visible for you, you can make it visible by going to View -> Toolbox. 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, press 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. Once again position your cursor at the end of the last line and press 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. After the button is inserted, once again press Enter key twice and back in the Toolbox find and insert a Label Control.

The next thing to do is set some properties for these Controls (which are actually called ASP.NET Server Controls). Select the first TextBox and when it's 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.

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.

Select the second TextBox and set its ID with lastNameTextBox. Select the Button Control in the Designer then go to its Properties window and change its ID to okButton and also change its Text label (under Appearance) to Press Me. Select the Label control in the Designer and change its programmatic ID to resultLabel, while also removing the value in the Text field.

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.

Double click the Press 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:

Enter the following code:

string firstName = firstNameTextBox.Text;

string lastName = lastNameTextBox.Text;

string result = "Hello " + firstName + " " + lastName;

resultLabel.Text = result;

If you see red squiggly underlines – it’s an indicator that you omitted, or mistyped, something in your code.

Save all of your work. Click on the Save All icon in the Visual Studio menu or from the menu select File -> Save All. Let’s get 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.

You can now test out the application in the browser by entering your information in the form and see the result printed back to you after clicking on Press Me button.

Next -> CASPNET WF Lesson 5