asp.net C#, Select html elements to process at run time_问答_开发者

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开发者_如何学JAVA_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. 4x4, 5x5 .. 9x9 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 9x9 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

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 4x4 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

            }
        }
    }
}

Simplest solution I can think of is to put the values of the divs into a 2D array in javascript, and then pass that array back to the server in JSON format. The server code would then parse the JSON back into a C# array, and you can do what you want from there.

You could always do something like this to parse all the controls who's id's start with "cell_".

foreach ( Control control in controlThatContainsTheDivs.Controls )
{
   if ( control.ID != null && control.ID.StartsWith( "cell_" ) )
   {
      //do what you need with it's value
   }
}

Note that in order for something like this to work, the div's have to either be parse out of the inner html of the literal control that holds them, or you have to add the runat="server" tags so the control collection can see them.

The html for the example above is something like this

<div id="controlThatContainsTheDivs" runat="server">
   <div id="cell_0_0" runat="server">1</div>
   <div id="cell_0_1" runat="server">2</div>
   <div id="cell_0_2" runat="server">3</div>
   <div id="cell_0_3" runat="server">4</div>
   <div id="cell_1_0" runat="server">5</div>
   <div id="cell_1_1" runat="server">6</div>
</div>

If it's important to know the numbers in the Id, it should be easy enough to parse out.

I hope this helps.