asp.net C#，在运行时选择要处理的 html 元素答案

【问题标题】：asp.net C#, Select html elements to process at run timeasp.net C#，在运行时选择要处理的 html 元素
【发布时间】：2011-05-22 23:09:57
【问题描述】：

下午好，

我有一个包含许多 div 元素的 html aspx 页面。这些 div 元素为一个网格。网格的大小在客户端选择，div元素通过请求在服务器端生成。生成的 div 元素是这样的：

<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...

当网格中填充了来自用户的整数值时，这些值可以被服务器访问，因此服务器需要获取这些元素的值。这很简单。

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

问题是...服务器生成的 div 数量是在运行时决定的。（在客户端输入上，例如 4x4、5x5 .. 9x9 网格）

所以 div 的范围可以从 div id="cell_0_0" 到 div id="cell_4_4" 或从 cell_0_0 到 cell_9_9。

现在我可以在服务器上拥有多个函数，例如：（伪代码）

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

问题是......这些功能将是巨大的！对于一个 9x9 的网格，有 81 个单元格，所以这就是 81 个程序分配！

在 javascript 中，我使用 for 循环遍历单元格

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

最后...问题是...有什么办法...我可以让服务器端 C# 代码根据单元格的数量动态迭代单元格变量。

如果不是...解决此类问题的最佳方法是什么？

抱歉，解释太长了，想确保您确切知道我在说什么！

我知道这是一个奇怪的问题，如果有任何混淆，请见谅:)

谢谢，亚历克斯

【问题讨论】：

标签： c# asp.net

【解决方案1】：

问题是......有什么办法......我可以让服务器端 C# 代码根据单元格的数量动态迭代单元格变量。

第一个问题是，如果您的 div 没有runat="server"（如您的示例中所示），则 c# 代码无法识别元素的实例。

其次，为了方便起见，（如果您还没有这样做），请将所有“网格 div”放入一个包含的 div 中。这将有助于对服务器上所需的控件进行分组和识别。它最终会看起来像这样：

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

（对于 4x4 网格，您的问题仅提出了 AxA 网格的可能性，而不是 AxB 网格，我将使用该假设）：

最后，一旦您回到服务器上（大概是在回发期间，但您可以在完成网格创建后调用它），您可以在单个 lamda 选择中收集所有 div (在这种情况下，我们使用“OfType”和“First”来选择所需的实例），然后从那里像这样使用它们：

 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

            }
        }
    }
}

【讨论】：

【解决方案2】：

我能想到的最简单的解决方案是将 div 的值放入 javascript 中的二维数组中，然后将该数组以 JSON 格式传回服务器。然后，服务器代码会将 JSON 解析回 C# 数组，您可以从那里做您想做的事情。

【讨论】：

【解决方案3】：

你总是可以做这样的事情来解析所有以“cell_”开头的控件。

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

请注意，为了使这样的事情起作用，div 必须从包含它们的文字控件的内部 html 中解析出来，或者您必须添加 runat="server" 标记以便控件集合可以看到他们。

上面例子的html是这样的

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

如果知道 Id 中的数字很重要，那么解析出来应该很容易。

我希望这会有所帮助。

【讨论】：