I have a 2d (n x n) string array in C#, how do I get it ouputted to a webpage dynamically (Tried DataTables/Binding, etc...).

Question

Hello, I have an n by n String array that needs to be outputted to a web page, I have found some solutions that require many many (read: many) lines of code (usually converting it to a DataTable then binding to a GridView). And almost all of these solutions will not even work for the dynamic nature of my arrays (I do not know ahead of time how many columns and rows are going to be generated, nor the names of the columns: it's user controlled).

I find this to all of these solutions to be somewhat ridiculous and in some cases larger than my whole module that I have already designed, simply to output a small piece my data...

This is an example of what I have tried to do:

    object1 = (string[,]) r.GetSymbol("stringArray");  //I retrieve n x n array and cast as a string contained in an object (have to do this because I am using COM interfaces).
    Output_GridView.DataSource = object1;  //(If I try to convert this to a string, it returns the dataType "string" not the 2d array
    Output_GridView.DataBind();

This doesn't work (it would require a 1d array according to the error I get, I don't know why DataSource/GridView would be limited like this), I have read up on some very ugly solutions to it, but really, all I need is to just write a nested for-loop to output n columns and n rows to the ASP.NET page. Can someone help me out here (why does such a trivial task have to be so difficult?)

Thank you for any feedback =)

-Dave

Answer 1

Although ugly, ASP Code Nuggets in the .aspx would work:

<table>
  <% for(int i = 0; i < ArrayDimensionLength; i++) { %>
    <tr>
      <td>RowHeader</td>
      <% for(int j = 0; j < ArrayDimensionLength; j++) { %>
        <td><%= Array[i,j] %> </td>  
      <% } %>
    </tr>
  <% } %>
</table>

...and in the code-behind:

    protected string[,] MyArray
    {
        get
        {
            //Insert your array here
            return new string[,]{{"1", "1"}, {"2", "2"}};
        }
    }

    protected int ArrayDimensionLength
    {
        get
        {
            return (int)Math.Sqrt(MyArray.Length);
        }
    }

Answer 2

not pretty but should give you a start

    //setup the data
    var random = new Random();
    int x = random.Next(14) + 1;
    int y = random.Next(29) + 1;

    var data = new int[x, y];
    for (int i = 0; i < x; i++)
        for (int j = 0; j < y; j++)
            data[i, j] = random.Next(100);


    //create the data table
    var table = new Table();
    for (int i = 0; i < x; i++)
    {
        var newRow = new TableRow();
        for (int j = 0; j < y; j++)
        {
            var newCell = new TableCell();
            newCell.Text = data[i,j].ToString();
            newRow.Cells.Add(newCell);
        }
        table.Rows.Add(newRow);
    }
    ux_Panel.Controls.Add(table);

Shlomo's looks like the better solution unless you want to massage the data a bit more

Answer 3

Hi Dave,

Have you considered just creating a custom web control. I have created a quick one which accepts an array [,] and just simply outputs the contents of the array in a div with p's around each array value. Its simple, lightweight and you will have complete control of the output.

Here are the step you need to implement:

Add a new project to your web application and make sure you referent System.web. Maybe call the project WebControls.

Add the following C# code to a new class file you can add to the project.

CUSTOM CONTROL CODE:

using System.ComponentModel;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebControls
{
    [ToolboxData("<{0}:ArrayDisplayControl runat=server></{0}:ArrayDisplayControl>")]
    public class ArrayDisplayControl : WebControl
    {
    protected override HtmlTextWriterTag TagKey
    {
        get
        {
            return HtmlTextWriterTag.Div;
        }
    }

        public string[,] DataSource
        {
            get
            {
                return (string[,])ViewState["DataSource"];
            }
            set
            {
                ViewState["DataSource"] = value;
            }
        }

        protected override void RenderContents(HtmlTextWriter output)
        {
            output.WriteBeginTag("div");

            for (int i = 0; i < DataSource.GetLength(0); i++)
            {
                for (int j = 0; j < DataSource.GetLength(1); j++)
                {
                    output.WriteFullBeginTag("p");
                    output.Write(DataSource[i, j]);
                    output.WriteEndTag("p");
                }
            }

            output.WriteEndTag("div");
        }
    }
}

Now all you have to do is ref your newly added project to your web application. properties --> add reference - select projects and then the name of the new project.

Ok all thats left is to add a decleration to the top of you asp.net page so you can reference the custom control like the following:

<%@ Register Assembly="WebControls" Namespace="WebControls" TagPrefix="custom" %>

Now reference the control in you html like the following:

<custom:ArrayDisplayControl ID="ctlArrayDisplay" runat="server" />

Ok so last step is to bind the control to some data in the code behind - something like the following:

protected void Page_Load(object sender, EventArgs e)
{
            string[,] data = new string[2, 2] { { "Mike", "Amy" }, { "Mary", "Albert" } };

            ctlArrayDisplay.DataSource = data;
            ctlArrayDisplay.DataBind();
}

And here is the output after running:

<div id="ctlArrayDisplay"> 
    <div><p>Mike</p><p>Amy</p><p>Mary</p><p>Albert</p></div> 
</div> 

Hope this help you out of your jam.

Enjoy!