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.
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>
However, because this is ASP.NET we can use its own HTML tags to do more with what we just made. Start typing:
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.
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" />
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.
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.
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.
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!
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.
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.
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:
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!