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

4つのコントロールすべてがあり、問題は絶対位置です

テーブル内にあるかどうかに関係なく、4つすべての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);

読みやすく、間違いを見つけやすくなります。ただし、4 つのボタンが表示されないことについて話しているため、間違いを見つけるのに適切な場所ではないため、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 に答える