In this example, a two-dimensional array (the output of a magic square, for example) is converted to an HTML table from a JSP page. This example assumes you have gotten the data from the middle tier and have converted it back to an array.

<table border=0 cellpadding=4 cellspacing=4 style='margin: 16px;'>
<%
	double[][] square = getMatrix();
 for (double[] row : square) 
 {
  	pageContext.getOut().print("<tr>");
    
    for(double value : row) 
    {
    		pageContext.getOut().print("<td>" + (int)value + "</td>");
    }
    pageContext.getOut().print("</tr>");
	}
%>

The following examples use basic ASPX pages and can be incorporated into a large enterprise site.

The easiest way to output a matrix is to iterate the array and then convert it into an HTML table. Unfortunately, this approach is not maintainable for large volumes of data, but is worth exploring in this example, assuming you have communicated with the middle tier and received a two-dimensional array of data. Assuming you have a label on the ASPX page called MatrixLbl, here is the code to output the matrix:

int size = 5;
double[][] magicSquare = getMagicSquare(size);

String temp = "";
temp +="<table border=0 cellpadding=4 
          cellspacing=4 style='margin: 16px;'>";

for (int i = 0; i < size; i++)
{
		temp += "<tr>";
		for (int j = 0; j < size; j++)
		{
				temp += "<td>" + magicSquare[i][j] + "</td>";
		}
		temp += "</tr>";
}
MatrixLbl.Text = temp;

ASP.NET provides a number of streamlined methods to place a grid of data on a Web page, such as mapping the data into a DataTable and referencing the DataTable from an ObjectDataSource's Select method. By choosing this option, you promote reuse and also maintain separation between the application's visualization and logic.

You must first place a GridView onto a page, and then "bind" it to a data source. By using an Object data source, you allow an object to dynamically get the data from some location (like a middle tier), and put it into a DataTable. Once this is done, the GridView will automatically display it.

Here is an example of using the Select method in your business object:

public DataTable getMagicSquare(int size)
{
		//Gets the matrix from the web service.  
		double[][] magicSquare = getMatrix(size);
        
		//Create an empty data table to put the matrix data in.
		DataTable table = new DataTable();

		//Since we know its a square add as many 
		//  columns as there will be rows.
		for(int i = 0; i<size; i++)
		{
				table.Columns.Add();
		}

		DataRow row;
		//Iterate each element in the array creating a row out of each
		for(int i = 0; i < size;i++)
		{
				//create a row from the table to put the data in
				row = table.NewRow();
				//Iterate each element in the inner array and put
				// them into the row
				for (int j = 0; j < size; j++)
				{
						row[j] = magicSquare[i][j];
				}

				//Add the row to the table 
				table.Rows.Add(row);
		}
		return table;           
}

This section demonstrates how to perform the implementation described in "Working With ASP.NET" when using the Visual Studio wizards and a typical Web page application. Perform the following steps to set up the data source, bind it to a load method, and bind the method's input parameter to the text box.

Below is an input text box and a generic grid component from a Web page. The grid component is connected to the ObjectDataSource.

1. Start Visual Studio and configure the data source with the wizard.

2. Choose the business class that contains your methods for the object.

   

3. Select the method that returns a data table containing the data to display.

   

4. Since the method requires an input, bind it to the control that contains the value and set the default.

   

   The finished application looks like this.

   

5. Click the Build Square button to reselect the grid data.