*Note: “web page” is synonymous with “web form” on this website and in all the examples.
Click here to download the sample source code for this Data types lab exercise If you forgot how to open the files using Visual Web Developer, click here to learn How to open C# ASP.NET Website files. Please use these files only as a reference. You should go through the exercises yourself and create your own project according to the instructions in the exercise.
In the middle pane of Visual Web Developer you should see some HTML code if the Default.aspx tab is selected. You are in the Source view. At the bottom of that page, click on the Design view to be able to see the web page more like it will look when it runs in the browser. In this Design view you can drag ASP.NET Server Controls onto the page and then customize how they look, as well as create code that will execute based on events that occur, such as button clicks.
On the left hand side of Visual Web Developer you should see the Toolbox, that contains a bunch of ASP.NET Server Controls. Drag a Button control onto your Default.aspx page. Drag a TextBox control to the right of the Button.
Double click on the Button control and that will automatically create a special method called “Button1_Click”. This method will get called by .NET whenever this button is clicked on your web page, so you can put C# code in here, to tell the button what to do.
Paste the following code inside the Button1_Click method:
TextBox1.Text = "My first program";
Now to run your program, click the green play button at the top of the IDE. The first time you run the website, you will be asked if you want to enable debugging. Choose the Modify the Web.config file to enable debugging option and click OK.
Next, your web page should come up and show the Button and TextBox controls in your web browser. Click on the button and watch as it populates text in the TextBox. Congratulations, you have successfully run your first coding exercise in C#. *Remember that to stop running your application and go back to the Visual Web Developer IDE so that you can keep working on your project, you must close the web browser window that was opened by Visual Web Developer when you clicked the green play button. Once you close that web browser window, the Visual Web Developer changes back into edit mode so that you can continue working on your project. If you don’t close that web browser window, you will notice that Visual Web Developer may not let you perform certain actions because it is not in edit mode.
Now let’s experiment with some different data types. Close your web browser and go back to the Design view of the Default.aspx page in the IDE. At the top of the middle pane in the IDE, you will see that there are different tabs: Default.aspx.cs and Default.aspx. Click on the Default.aspx tab to bring up the web page view. Another way to bring that up when you are looking at the source code is to right click on the source code and choose View Designer. That takes you back to the tab where you were able to change how the web page looks and what controls it contains.
Place your cursor right after the TextBox control and hit Enter. This will place the next control that you add onto the next line. Now drag another Button and TextBox control onto the new line. You should now have 2 buttons and 2 textboxes on your web form.
Single click on the new Button control that you added to select it. In the Properties window which is usually in the lower right hand corner, change the value in the “Text” property to “Show an integer” without the quotes. If you click back on the web page, you should see that the button looks different now and no longer says “Button” on it.
Double click on the new Button to create the event method. It should be called Button2_Click. Put the following code in there and then click the green play button to run the program again:
//This is a variable declaration in C# int i = 33; //This is an assignment operation in C# TextBox2.Text = i.ToString();
Click on the new button and watch it populate the new textbox with the number 33. The variable declaration shown above defines a new variable named “i”, with the type being a 32 bit integer number. The “=” sign is the assignment operator and in this case we are assigning the value of 33 to the variable named “i”. The // tells C# that you are putting a comment into the program. A comment is simply notes or comments that are ignored by the compiler. In other words, comments are not code, they are simply embedded documentation. In some cases, you may find that putting comments above a line of code looks cleaner than putting it on the same line. That is a matter of style. Finally, I want you to notice that each line of code in C# ends with a semicolon “;”. The semicolon lets the compiler know that it is at the end of a statement. Some lines of code do not have semicolons at the end, and you will see examples of that on this website. Those are situations where you are defining loops, method declarations, creating blocks of code inside conditionals and other scenarios.
Click here to watch an example video that shows you how to declare an integer
In the above example you could split up the variable declaration and assignment into 2 lines of code like this:
//This is a variable declaration in C# int i; //This is an assignment operation in C# i = 33; //This is an assignment operation in C# TextBox2.Text = i.ToString();
Since this creates extra lines of code, I prefer to do the declaration and assignment in one line of code. This is called initialization, which means that you declare the variable and give it an initial value.