My First Application

Plan Ahead

Let's start with a goal in mind before we start typing. This is an important step with regards to development so you don't lose track at what you're trying to do. It saves time and confusion which in the world of web development. To build a house, you need a blueprint. You wouldn't start painting the walls before reading the blueprint! Right now, that goal is to make an application that adds 1 to user input when they click on a button.

First, initiate a web form project. Immediately at the bottom of the editor you should see three options: Design, Split, and Source. Design let's you create a page by drag and drop like a designer would use. You see what you get as you're developing. Source is the code that will output what you see on a web browser. And Split lets you see both of those screens simultaneously. Click Source.


Source

The source screen

Right now you are looking at the HTML source code for this application. This is what is read by the browser for display. ASP.NET is one of many frameworks available to make web applications meant to simplify or streamline the development process between multiple developers. You'll notice that this isn't a typical HTML page starting at the top. The line of code at the top:

                <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Homepage.aspx.cs" Inherits="myFirstApplication.Models.Homepage" %>
                
is not HTML; it's meant for the server to interpret. Of interest, it is saying that C# is the language to use and the source code is in Homepage.aspx.cs.


Provide the Input Field

In a moment you will be writing HTML code but modified for ASP.NET. Let's remove the HTML tags between the <body> tags.

Remember our goal: make an application that adds 1 to user input after click a button. Start by providing that input:

                <input type="text" id="userInput" />
                

Here is an input field with an id of "userInput". If you switch to design view, you'll see that there is an input field. You should also indicate the input to your users so provide a helpful label:

                <label>Provide a number: </label>
                
Label and input

However, because this is ASP.NET we can use its own HTML tags to do more with what we just made. Start typing:

                    <asp:Label
                

You'll notice that Visual Studio is suggesting quite a few options. This is the Intellisense feature that makes Visual Studio easy to use for developers. It "knows" what you want to do and offers to complete the code for you.

If you just type

                    <asp:Label></asp:label>
                
you'll notice a green squiggly line trying to suggest an action. Hover over it. It's suggesting we add an attribute to it called runat. ASP: tags are special in that the server, not the browser, can manipulate the tags and output that to the browser. Add the runat attribute like so:
                    <asp:Label ID="label_number" runat="server"></asp:label>
                    <asp:TextBox ID="txt_number" runat="server"></asp:textbox>
                
Compare the code you have now to design view. On display the different tags look the same but functionally, the asp.net tags will do something but the regular HTML tags will not.

ASP tags vs regular tags

Provide the Button

Remove the plain HTML tags we typed up before. Now, let's make a button with ASP tags.

                        <asp:Button ID="button_add" runat="server" Text="Add 1" />
                    
You now have a button that says "Add 1" but has no functionality when clicked. We add functionality by adding the Onclick attribute to the tag and providing a name for the function.
                        <asp:Button ID="button_add" runat="server" Text="Add 1" OnClick="button_add_click" />
                    

Adding a button

What we're saying here is "on click of this button, execute a function called 'button_add_click'". We will define that functionality in a file called Homepage.aspx.cs. If not opened already, it's in the Solution Explorer in Models > Homepage.aspx > Homepage.aspx.cs.


Defining Functions

in Homepage.aspx.cs is where you'll define your functions that perform actions on your web page. You are looking at C# code. C# is one of many available server side languages in web development. Whereas HTML, CSS, and javascript are responsible for what you see in the browser window, server side languages interact with the server or in simpler terms, the computer you are interacting with on the other end of your internet connection. Server side languages are responsible for creating, reading, updating, and deleting data on a server, likely in a database, or CRUD for short. Here's an example of how server side languages function. You enter details on a form on a web page and click "submit". Those form details are taken from HTML tags by C# and entered into a database. C# then takes information from that database to send you an email confirming your successful form submission.

Remember that we added the attribute OnClick on our button.

                        <asp:Button ID="button_add" runat="server" Text="Add 1" OnClick="button_add_click"/>
                    
When that button is clicked C# is going to look for a function of that name in the .cs file. Try running the application without that function in the .cs file.

Compilation error

See the error? In simpler terms, when the project was being compiled and tried to process our button, it was looking for a function called "button_add_click" in the C# file. Let's define that function now.

By default there's already a function called Pageload. This is a function that executes once the page has loaded. Let's follow its structure to make button_add_click.

                        protected void button_add_click(object sender, EventArgs e)
                    
For the purposes of this lesson it's not necessary to know what protected, void, object sender, EventArgs e are. Of interest, void means the function is not returning anything and protected is an access modifier. You'll learn more about these as you start making your own classes.

Writing the button function

It helps to add comments in your code to remind yourself and others at what you're trying to do. They are quick and easy debuggers!

Add comments to your code

Now, we need to get that user input from the page. Recall that we gave our tags IDs. These are used in .Net to access the properties of objects. Notice that I mentioned "properties of objects" instead of "attribute of tags". That's because .Net has turned HTML tags and attributes into objects and properties. You'll hear this quite often that C# is object oriented programming or OOP for short. Let's store whatever the user has provided in txt_number into an integer variable.

Objects and properties from tags and attributes

Looks like we've run into another error! Unlike dynamically typed languages like javascript, C# is strongly typed. This means types, like integer, string, float, double, and boolean, must be declared and types go with the same type. The error message says that txt_number.Text is type string. C# can convert that to type integer using the convert class like so:

                        Convert.toInt32(txt_number.Text);
                    

Convert string to int

Next, add 1 to our variable user_number. We can do this in two ways:

                    user_number = user_number + 1;
                    
or
                    user_number++;
                    
++ is a common call to increment by 1 in many programming languages. It's even in the C# name! C++ ++ = C#.

Now that we have our number + 1, we need to display it to the page. Not only can we access the attributes of HTML tags with C#, we can assign them as well. Let's output the new number to the input we initially put our number in:

                    txt_number.Text = Convert.toString(user_number);
                    
Don't forget that C# is strongly typed so we have to use the convert class again because the Text property is of type string. Now run the application.

Display the new number to the screen
Another error

I still make mistakes. Luckily, the .NET framework tells you, in a lot of detail, why there's an error. This error is telling me that I don't have form tags. <form></form> tags carry input inside it in the browser to a server. In this case, .NET is looking for content inside form tags for C# to process. Our current problem can be remedied by wrapping our TextBox and button in form tags. After you've done that, try running it again. It should look like this:

Finihsed

FIN

Congratulations! Now that we've made your first application, try displaying the output in other tags in the HTML, like the button. Or, instead try subtracting 1 from the TextBox. There are so many posibilities!