0

我正在从文件后面的代码创建一个表格并放置一个占位符。

//在Main.aspx上

MyControl control1 = (MyControl)Page.LoadControl("MyControl.ascx");
control1.ID = "ctl1";
MyControl control2 = (MyControl)Page.LoadControl("MyControl.ascx");
control2.ID = "ctl2";
MyControl control3 = (MyControl)Page.LoadControl("MyControl.ascx");
control3.ID = "ctl3";
MyControl control4 = (MyControl)Page.LoadControl("MyControl.ascx");
control4.ID = "ctl4";

Table table = new Table();

TableCell cell1 = new TableCell();
TableCell cell2 = new TableCell();
TableCell cell3 = new TableCell();
TableCell cell4 = new TableCell();
TableRow row1 = new TableRow();
table.Style.Add(HtmlTextWriterStyle.Position, "absolute");

cell1.Controls.Add(control1);
row1.Cells.Add(cell1);
cell1.Style.Add(HtmlTextWriterStyle.Position, "absolute");
cell2.Controls.Add(control2);
row1.Cells.Add(cell2);
cell2.Style.Add(HtmlTextWriterStyle.Position, "absolute");
cell3.Controls.Add(control3);
row1.Cells.Add(cell3);
cell3.Style.Add(HtmlTextWriterStyle.Position, "absolute");
cell4.Controls.Add(control4);
row1.Cells.Add(cell4);
cell4.Style.Add(HtmlTextWriterStyle.Position, "absolute");

table.Rows.Add(row1);
placeHolder1.Controls.Add(table);

//在 MyControl.ascx 上（我在这里放置控件；它是用 javascript 创建的）

<table cellpadding="0" cellspacing="0" border="0" width="217px" 
    style="position:relative" >
<tr>
    <td >
    <div id="c1" class="gauge" style="margin:0;padding:0;height:169px;width:217px;">   
    </div>
    </td>
</tr>

// 在用户控件的 CSS 中

div.gauge
{
    background-repeat: no-repeat;
    background-position: top center;
    height: 169px;
    margin: 0px;
    overflow: visible;
    position: absolute;
    width: 217px;
    z-index: 0;
}

但我看到只有第一个控件被加载，其他的没有。有什么遗漏吗？

4

2 回答 2

0

四个控件都在那里，问题是绝对定位

所有四个都具有相同的 x 和 y 定位，无论是否在表格内；

暂时删除绝对值以查看它们在页面中呈现

于 2012-09-14T15:07:26.893 回答
0

那是可怕的重复代码，在我继续阅读之前，让我们清理一下。

// Initializing parents at the top.
Table table = new Table();
table.Style.Add(HtmlTextWriterStyle.Position, "absolute");

TableRow row = new TableRow();

// For loop, you could turn this in a foreach to load controls based on an array.
for (int i = 1; i <= 4; ++i)
{
    MyControl control = (MyControl) Page.LoadControl("MyControl.ascx");
    control.ID = "ctl" + i.toString();

    TableCell cell = new TableCell();
    cell.Controls.Add(control);
    cell.Style.Add(HtmlTextWriterStyle.Position, "absolute");
    row.Cells.Add(cell)
}

table.Rows.Add(row);
placeHolder.Controls.Add(table);

阅读起来更清晰，更容易发现错误。然而，当您谈论没有看到四个按钮时，它不是发现错误的正确位置，因此您必须更仔细地检查 HTML。使用适当的 Web 开发工具，您可以将元素悬停在 DOM 树中，您会看到它们位于彼此之上。

并且使用上面改进的代码，很容易抵消它们，只需使用i它...... :)

div.gauge
{
    background-repeat: no-repeat;
    background-position: top center;
    height: 169px;
    margin: 0px;
    overflow: visible;
    position: absolute;
    width: 217px;
    z-index: 0;
}

你真的需要所有这些属性吗？

您指定position: absolute但实际上并未定位元素？overflow: visible有意义吗？怎么回事z-index: 0，为什么要指定？

于 2012-09-14T15:11:06.090 回答