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

时间:2011-05-22 23:09:57

标签: c# asp.net

下午好,

我有一个html aspx页面,里面有很多div元素。这些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#代码,根据有多少个单元格动态迭代单元格变量。

如果不是......实现这样一个问题的最佳方法是什么?

对不起长屁股的解释,我想确保你确切地知道我在做什么!

我知道这是一个奇怪的问题,对不起,如果有任何混淆:)

谢谢, 亚历克斯

3 个答案:

答案 0 :(得分:1)

  

问题是......有什么办法......我可以通过服务器端C#代码动态迭代单元格变量,具体取决于有多少单元格。

第一个问题是,如果你的div没有runat="server"(如你的例子中所示)那么c#代码就无法识别元素的实例。

其次,为方便起见,(如果你还没有这样做),将所有'grid divs'放入一个包含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 select中收集所有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

            }
        }
    }
}

答案 1 :(得分:0)

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

答案 2 :(得分:0)

你总是可以做这样的事情来解析id为“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中的数字很重要,那么解析起来应该很容易。

我希望这会有所帮助。