C＃asp.net自定義服務器控件布局

Question

我有一個自定義服務器控件，該控件由一個包含2張圖像，一個文本框和一個標簽的面板組成。 我用自己的解決方案編寫了服務器控件，進行了編譯，然后將其導入到我的Web應用程序中，這樣我就可以在工具箱中看到它並使用它。

我的問題是我無法按自己的意願格式化-我應該動態注入html標簽嗎？

我最終得到的是同一行上面板的每個子控件。

我正在努力把我想要的東西放在上面。 我希望控件的布局如下。

我的自定義控件dll的代碼如下。 命名空間CustomButton

{
    [ToolboxData("<{0}:CCButton runat=server></{0}:CCButton>")]
    public class CcButton : CompositeControl
    {
        Panel buttonPnl;
        Image logoImg;
        Image errorImg;
        TextBox mainTextTb;
        Label subTextLbl;

        protected override void CreateChildControls()
        {
            Controls.Clear();

            //init controls
            buttonPnl=new Panel();
            buttonPnl.Width = Unit.Percentage(25);
            buttonPnl.Height = Unit.Percentage(25);
            buttonPnl.ID = "buttonPnl";

            logoImg = new Image();
            logoImg.ID = "logoImg";

            errorImg = new Image();
            errorImg.ID = "errorImg";

            mainTextTb = new TextBox();
            mainTextTb.ID = "mainTextTb";
            mainTextTb.Text = "changed";
            mainTextTb.Font.Size = 20;


            subTextLbl = new Label();
            subTextLbl.ID = "subTextLbl";
            subTextLbl.Text = "sub text";
            subTextLbl.Font.Size = 12;

            //add controls to parent control
            this.Controls.Add(buttonPnl);
            buttonPnl.Controls.Add(logoImg);
            buttonPnl.Controls.Add(errorImg);
            buttonPnl.Controls.Add(mainTextTb);
            buttonPnl.Controls.Add(subTextLbl);
        }

        protected override void Render(HtmlTextWriter writer)
        {
            //render controls
            buttonPnl.RenderControl(writer);
        }
    }
}

如果我可以動態構造以下html，那將是完美的。 我已經將代碼設置到客戶控制中，以設置各種屬性，例如圖像url和tb文本以及標簽文本等。

<asp:Panel ID="pnlButton" runat="server" Width="200px" Height="150">
    <asp:Table ID="Table1" runat="server" CellPadding="5" CellSpacing="5" Width="100%" Height="100%">
        <asp:TableRow Width="100%">
            <asp:TableCell><asp:Image ID="imgLogo" runat="server" /></asp:TableCell><asp:TableCell><asp:Image ID="imgError" runat="server"  ImageAlign="Right"/></asp:TableCell>
        </asp:TableRow>
        <asp:TableRow Width="100%">
            <asp:TableCell ColumnSpan="2"><asp:TextBox ID="tbMainText" runat="server" ontextchanged="tbMainText_TextChanged" Text="Main Text" width="100%"></asp:TextBox></asp:TableCell>
        </asp:TableRow>
        <asp:TableRow Width="100%">
            <asp:TableCell ColumnSpan="2"><asp:Label ID="lblSubText" runat="server" Text="Label"  style="text-align: right" width="100%"></asp:Label></asp:TableCell>
        </asp:TableRow>
    </asp:Table>
</asp:Panel>

Answer 1

知道了，謝謝@Brian Mairns為我指出了一個很好的疑難解答方向。

我用html構建它，然后使用html注入方法動態地在覆蓋的Render（）類中構建按鈕

    protected override void Render(HtmlTextWriter writer)
    {
        //render controls
        //buttonPnl.RenderControl(writer);
        AddAttributesToRender(writer);
        writer.RenderBeginTag(HtmlTextWriterTag.Div); //table start tag
        writer.AddAttribute(HtmlTextWriterAttribute.Cellpadding, "5");
        writer.AddAttribute(HtmlTextWriterAttribute.Width, "200");
        writer.RenderBeginTag(HtmlTextWriterTag.Table); //table start tag
        writer.RenderBeginTag(HtmlTextWriterTag.Tr); //row start tag
        writer.RenderBeginTag(HtmlTextWriterTag.Td); // cell start tag
        logoImg.RenderControl(writer); //add logo image
        writer.RenderEndTag(); //cell end tag
        writer.RenderBeginTag(HtmlTextWriterTag.Td); //cell start tag
        errorImg.RenderControl(writer); //add error image
        writer.RenderEndTag(); //cell end tag
        writer.RenderEndTag(); //row end tag
        writer.RenderBeginTag(HtmlTextWriterTag.Tr); //row start tag
        writer.AddAttribute(HtmlTextWriterAttribute.Width, "100%"); //make sure row width is 100% of parent
        writer.AddAttribute(HtmlTextWriterAttribute.Colspan, "2"); //make sure row spans 2 cells
        writer.RenderBeginTag(HtmlTextWriterTag.Td); //cell start tag
        mainTextTb.RenderControl(writer); //add main text box
        writer.RenderEndTag(); //cell end tag
        writer.RenderEndTag(); //row end tag
        writer.AddAttribute(HtmlTextWriterAttribute.Align, "right"); //make sure row width is 100% of parent
        writer.RenderBeginTag(HtmlTextWriterTag.Tr); //row start tag
        writer.AddAttribute(HtmlTextWriterAttribute.Width, "100%"); //make sure row width is 100% of parent
        writer.AddAttribute(HtmlTextWriterAttribute.Colspan, "2"); //make sure row spans 2 cells
        writer.RenderBeginTag(HtmlTextWriterTag.Td); //cell start tag
        subTextLbl.RenderControl(writer); //add sub label
        writer.RenderEndTag();//cell end tag
        writer.RenderEndTag(); //row end tag
        writer.RenderEndTag(); //table end tag
        writer.RenderEndTag(); //div end tag
    }