Home/ Questions/Q 5959405
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T18:40:49+00:00

Good Afternoon, I have a html aspx page that has many many div elements.

  • 0

Good Afternoon,

I have a html aspx page that has many many div elements. these div elements for a grid. The size of grid is selected client side and the div element are generated server side through a request. The div elements generated are something like this:

<div id="cell_0_0"></div>
<div id="cell_0_1"></div>
<div id="cell_0_2"></div>
<div id="cell_0_3"></div>

<div id="cell_1_0"></div>
<div id="cell_1_1"></div>
etc...
etc...

when the grid is filled with integer values from the user, the values can be accessed by the server, so the server needs to get the values of these elements. This is simple.

int value1 = cell_0_0.innerHTML;
int value2 = cell_0_1.innerHTML;

The problem is… The amount of divs generated by the server are decided at runtime.
(on client input, e.g. 4×4, 5×5 .. 9×9 grid)

So the divs can range from div id=”cell_0_0″ to div id=”cell_4_4″ or from cell_0_0 to cell_9_9.

Now I could have muliple functions on the server like: (pseudocode)

if grid is 5x5
    int value5x5-1 = cell_0_0.innerHTML;
    ... ...
    int value5x5-25 = cell_5_5.innerHTML;

if grid is 9x9
    int value9x9-1 = cell_0_0.innerHTML;
    ... ...
    int value9x9-81 = cell_9_9.innerHTML

The problem is… these functions would be HUGE! for a 9×9 grid, there are 81 cells, so thats 81 procedural assisngments!

In javascript, I iterate through the cells using a for loop

for (var i = 0; i < gridSize; i++) {
    for (var j = 0; i < gridSize; j++) {
        document.getElementById( "cell_" + i + "_" + j );
    }
}
// as you can see the cell ids are constructed as the loop progresses, because the parameter is a string

Finally… The question is… is there any way… I can get the server side C# code to dynamically iterate through the cell variables depending on how many cells there are.

If Not… What would be the best method to achieve such a problem?

Sorry for the long ass explanation, wanted to make sure you knew exactly what I was on about!

I know its a weird Question, Sorry if there is any confusion:)

Thanks,
Alex

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The question is… is there any way… I can get the server side C# code to dynamically iterate through the cell variables depending on how many cells there are.

    The first issue is that if you divs don’t have runat="server" (as in your example) then the c# code cannot identify the instance of the element.

    Second, For the purpose of convenience, (if you have not already done so), put all of your ‘grid divs’ into a single containing div. This will help group and identify the controls you want on the server. It will end up looking something like this: 

        <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        #my_grid
        {
            width:400px;
            float:left;
        }
        #my_grid div
        {
            width:93px;
            border:1px solid blue;
            float:left;
            text-align:right;
            padding-right:5px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div id="my_grid" runat="server">
        <div id="cell_0_0" runat="server">2</div>
        <div id="cell_0_1" runat="server">3</div>
        <div id="cell_0_2" runat="server">5</div>
        <div id="cell_0_3" runat="server">8</div>

        <div id="cell_1_0" runat="server">13</div>
        <div id="cell_1_1" runat="server">21</div>
        <div id="cell_1_2" runat="server">34</div>
        <div id="cell_1_3" runat="server">65</div>


        <div id="cell_2_0" runat="server">99</div>
        <div id="cell_2_1" runat="server">164</div>
        <div id="cell_2_2" runat="server">263</div>
        <div id="cell_2_3" runat="server">427</div>

        <div id="cell_3_0" runat="server">690</div>
        <div id="cell_3_1" runat="server">1117</div>
        <div id="cell_3_2" runat="server">1807</div>
        <div id="cell_3_3" runat="server">2914</div>
</div>
    <asp:Button ID="Button1" runat="server" Text="Click Me" 
        onclick="Button1_Click" /><br /> <asp:Button ID="Button2" runat="server" 
        Text="Click Me 2" onclick="Button2_Click" />
    </form>
</body>
</html>

    (for a 4×4 grid, your question presents only the possibility of an AxA grid, rather than an AxB grid, I will work with that assumption):

    Finally, Once you are back on the server (presumably during a postback, but you could invoke this after you finish creating the grid) you can collect all of the divs in a single lamda select (in this case we are using “OfType” and “First” to select desired instances) and then work with them from there like this:

     public partial class selecting_divs_with_linq : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void Button1_Click(object sender, EventArgs e)
    {
        //When I get your div value I am going to put it in this list...I don't know what you are going to with it...
        List<double> results = new List<double>(); 

        //First we want to get a list of all of the DIV inside of the container div for my_grid:
        List<System.Web.UI.HtmlControls.HtmlGenericControl> listOfDivs = this.my_grid.Controls.OfType<System.Web.UI.HtmlControls.HtmlGenericControl>().ToList<System.Web.UI.HtmlControls.HtmlGenericControl>();
        //because the array is AxA we need the square root of the count of divs and this gives us the upper range of the array values:
        double A = Math.Sqrt(listOfDivs.Count);

        //these nested for loops extract every value from your grid and puts them into the "results" list
        //of course if you want to do something else with them that works too... see button2_click for an alternative...
        for (double X = 0; X < A; X++)
        {
            for (double Y = 0; Y < A; Y++)
            {
                string divId = string.Format("cell_{0}_{1}", Y.ToString(), X.ToString());
                var div = listOfDivs.First(d => d.ID == divId);
                //now you have 'the div'
                string dblX = div.InnerText;
                results.Add(double.Parse(dblX));

            }
        }
    }

    protected void Button2_Click(object sender, EventArgs e)
    {
        //First we want to get a list of all of the DIV inside of the container div for my_grid:
        List<System.Web.UI.HtmlControls.HtmlGenericControl> listOfDivs = this.my_grid.Controls.OfType<System.Web.UI.HtmlControls.HtmlGenericControl>().ToList<System.Web.UI.HtmlControls.HtmlGenericControl>();
        //because the array is AxA we need the square root of the count of divs and this gives us the upper range of the array values:
        double A = Math.Sqrt(listOfDivs.Count);

        //these nested for loops extract every value from your grid and puts them into the "results" list
        //of course if you want to do something else with them that works too... see button2_click for an alternative...
        for (double X = 0; X < A; X++)
        {
            for (double Y = 0; Y < A; Y++)
            {
                string divId = string.Format("cell_{0}_{1}", Y.ToString(), X.ToString());
                var div = listOfDivs.First(d => d.ID == divId);
                //now you have 'the div'
                string dblX = div.InnerText;
                //alternate: update the value of each entry like this:
                div.InnerHtml = (double.Parse(dblX) / 2).ToString();
                //now each value gets cut in half

            }
        }
    }
}
    • 0