This lesson covers multidimensional arrays, which are exactly like single-dimensional arrays except that they require more than one index to get at a single element. The simplest multidimensional array would be a two-dimensional array, which means it would have two indexes. Whereas single-dimensional arrays have a single index which references a value stored at that index, multidimensional array indexes all point to another array – except for the very last index which is the one that contains the value/object. This will become clearer once we go over some examples.
To visualize a two-dimensional array, picture something like a spreadsheet. In order to retrieve the value you want from a cell in a spreadsheet you need to know both the row and column numbers that correspond to the cell. The row and column numbers are analogous to the indexes you need to reference a value in a two-dimensional array.
Step 1: Create a Two-Dimensional Array
Here, MyArray is declared on the first line as being an array that holds three compartments, which in turn each holds another three compartments with the actual value inside of them.
Each group (arbitrarily separated with white space for clarity) can be seen as the first level compartment, while the next level is the group that stores the actual value. To access the values, you can reference them with the indexes they reside in:
Step 2: Visualizing a Two-Dimensional Array as a Data Table
You can also visualize this entire data/organization relationship as being like a common table structure:
This is similar to a multiplication table, where you get the value (in the grid) by matching up the row number with the column number. Unfortunately, this visual is limited when dealing larger multidimensional arrays, such as a three-dimensional array.
Step 3: Create a Three-Dimensional Array
Here is an example of an array with three dimensions:
Step 4: Visualizing Multi-Dimensional Arrays as Containers
This type of structure looks more complicated, but it only has one more level of sub-containment, and is best visualized as successive containers that contain other containers. Notice, again, how only the last level of containment holds an actual value while the other levels
are only sub-containers:
While this containment structure may seem unintuitive, there are a plethora of analogous structures in the world we live in. Take, for example, a house. Each house represents the outer-most container, which contains individual rooms as sub-containers. And in each room there may be drawers, boxes, or cabinets that act as sub-sub-containers. Instead of using indexes – as we do in C# – we label these containers with names and effortlessly locate items of value with simple phrases like “In Joe’s house, there is Amanda’s room, and in that room is a cabinet that holds an Xbox controller.”
Step 5: A Real-World Containment Analogy
If you are having difficulty visualizing the containment structure for the array, temporarily replace each index with a familiar containment structure, such as the following:
Obviously, this will cause a compilation error (hence the red underlines), however, it should hopefully make the basic containment concept more intelligible. In this example there are:
- Two separate rooms
- Three separate organizers in each room
- Three separate compartments in each organizer
And, of course, in each compartment is the actual value of relevance (in this analogy, the number of items in the compartment). In the illustration below, we’re representing 4 items in the “Socks” compartment within the “Dresser” organizer, inside of the “MasterBedroom”:
Also, notice how the number of dimensions is specified with the comma delimiter (kept empty for the type declaration, and populated with values at initial assignment):
Step 6: Create a New Project
Now, let’s put into action what we’ve learned about multi-dimensional arrays by creating an ASP.NET project called “CS-ASP_022” and create the following Controls and programmatic IDs:
What this application will do is let us hold various prices for travelling:
- From Chicago to New York
- From Chicago to London
- From New York to Chicago
- From New York to London
- From London to Chicago
- From London to New York
Step 7: Storing Travel Prices in a Two-Dimensional Array
We can represent these various prices with a simple two-dimensional array, populating it on page load:
To access the price of traveling from New York to London, we simply reference it with the relevant indexes that we populated with values:
Step 8: Broadening a Variable’s Scope
Currently, priceGrid becomes populated in the Page_Load event, but what if we wanted to access these values via the okButton_Click event? You could, of course, put all of the code in the okButton_Click event, or you could even save it in the ViewState. However, supposing those
solutions are not satisfactory, here is a much easier way of letting both events make reference to priceGrid. Simply move the declaration of priceGrid to the class level, as follows:
This leads us towards the topic of code scope. This will be covered in the following lessons lessons. However, for now just know that the squiggly brackets indicate a level of scope. By declaring a variable in an outer scope, it can be accessed by any inner scope. In this case, the outer scope is public class Default, while the inner scopes are the Page_Load and okButton_Click events, respectively.
Now, you can also access priceGrid from within okButton_Click, and set the values upon clicking the radio buttons:
Step 9: Adding Logic to Ignore the Same Source/Destination City
Note that the last conditional statement simply exits the entire code block (with the return keyword) before anything would display on the screen on the next line of code. This has the effect of doing nothing if selecting the same city for source/destination. When you run the
application you will now be able to select various sources and destinations, and press “OK” to retrieve the applicable value:
Step 10: Clear Out the ResultLabel
You may have noticed that the resultLabel isn’t cleared under the condition of having the same city for source and destination. That’s because the method is exited (returned) out of before the resultLabel can be written to. And if a value in resultLabel was already present
from a previous button submission this could cause confusion. Let’s ensure that nothing is displayed in the resultLabel when the source/destination are the same:
While arrays are quite powerful, you will probably not need to use multi-dimensional arrays very much in your programming career. They are very useful for holding particular data organization, whether that’s something to do with multi-dimensional space, or complex database structures. However, there is another – arguably more useful – concept closely related to arrays and that is Collections. You will learn about Collections in later lessons, but basically they are built from arrays and are easier to handle due to being more flexible/less strict.