Creating web pages using WebMatrix - Tutorial 4: Dynamic Content (Basics: Variables)
In this article, you’re going to be introduced to the types of variables available in WebMatrix that can be used to store predefined data as well as data input by the user (to follow in later articles).
Download complete CSHTML Project
Step # 1: First of all, create a new empty site and name it: "BasicsVariables". Once you’ve done this – you’ll automatically be presented with the contents of the newly created page. To continue, replace the existing markup with the following (we’ll be referring to it as you go):
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647 |
@{ // An implicit-type variable, it can be used to store any type of data shown below var ImplicitTypeVariable = "Sample Content"; // An integer variable of certain range (the number outside of it would result in an overflow, see below) int IntegerVariable = 1234567891; int IntegerVariableOverflow; unchecked { // Causing an overflow by explicitly typecasting to an integer a number outside of the range IntegerVariableOverflow = (int) 12345678912; } // A float variable of 7 digit precision (the 7th number after the decimal point is rounded up) float FloatVariable = 0.123456789123456789F; // A double variable of 15 digit precision (the 15th number after the decimal point is rounded up) double DoubleVariable = 0.123456789123456789; // A string variable, used for storing string literals string StringVariable = "Hello World! :-)"; // A bool variable, can store one of the two values: True or False bool BoolVariable = true; // A datetime variable, used for storing date and time values (here - the current date & time) DateTime DateTimeVariable = DateTime.Now;}<!DOCTYPE html><html> <head> <title>Basics: Variables</title> </head> <body> <p>Contents of ImplicitTypeVariable: @ImplicitTypeVariable <p>Contents of IntegerVariable: @IntegerVariable <p>Contents of IntegerVariableOverflow: @IntegerVariableOverflow <p>Contents of FloatVariable: @FloatVariable <p>Contents of DoubleVariable: @DoubleVariable <p>Contents of StringVariable: @StringVariable <p>Contents of BoolVariable: @BoolVariable <p>Contents of DateTimeVariable: @DateTimeVariable </body></html> |
Step # 2: When you’re finished, it’s now time to see your web page in action! Click on the “Run” option from the standard toolbar to launch the page in a browser – what you’ll see should correspond to the image shown below.
Step # 3: Let’s now take a closer look on the underlying code (HTML/CSS markup and the ASP.NET Razor Syntax). In this example we’ve declared 8 variables, namely – “ImplicitTypeVariable”, “IntegerVariable”, “IntegerVariableOverflow”, “FloatVariable”, “DoubleVariable”, “StringVariable”, “BoolVariable”, “DateTimeVariable”. Apart from the “IntegerVariableOverflow” which is used solely for experimental purposes and “ImplicitTypeVariable” which is native to WebMatrix – the other 6 variables represent the commonly known data types in most programming languages. Because WebMatrix is based on the C# Programming Language, you can use any of the built-in types listed here when declaring your variables.
Implicit Type Variables
When declaring the “ImplicitTypeVariable” (line # 2) we don’t need to specify its type, no matter what value we assign to it (whether numerical/textual) it will work fine. However, once declared with a specific type of data (i.e. a string of text) it will have to remain that way throughout the code (page). In this case, we decided for it to store a string literal: “Sample Content”.
Integer Variables
When declaring the “IntegerVariable” (line # 3) the numerical value used for initialisation must fall within the required range of: -2,147,483,648 to 2,147,483,647. Any higher/lower value than the range will result in an overflow (demonstrated in line # 7).
Float Variables
When declaring the “FloatVariable” (line # 9) the numerical value used for initialisation must fall within the required range of: ±1.5 ×10−45 to ±3.4 × 1038, otherwise it will be inaccurately rounded up/down (due to the 7 digit precision). Because by default a real numeric literal on the right-hand side of the assignment operator is treated as double – to initialise a float variable you need to use the suffix f or F.
Double Variables
When declaring the “DoubleVariable” (line # 12) the numerical value used for initialisation must fall within the required range of: ±5.0 × 10−324 to ±1.7 × 10308, otherwise it will be inaccurately rounded up/down (due to the 15 digit precision). Because by default a real numeric literal on the right-hand side of the assignment operator is treated as double – if you want an integer number to be treated as double you need to use the suffix d or D.
String Variables
When declaring the “StringVariable” (line # 14) we can store a sequence of zero or more Unicode characters.
Bool Variables
When declaring the “BoolVariable” (line # 15) we can store one of the two values: true/false.
DateTime Variables
When declaring the “DateTimeVariable” (line # 16) we can store date and time values (usually using helpers).
Step # 4: Congratulations! You have now completed all the activities related to this article.
What have we done?
In this tutorial, you have been introduced to the types of variables available in WebMatrix that can be used to store predefined data as well as data input by the user. In the following one – you’ll learn how to make a practical use of the variables that store predefined data to make certain decisions. Then you’ll advance to processing data input by the user. It’s all yet to come, please stay tuned! :-)