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
    }