Formatting Controls in ASP.NET

Question

I feel as though this this is a simple question, but can't find an answer anywhere. We've got an interface we're trying to move to an ASP.NET control. It currently looks like:

<link rel=""stylesheet"" type=""text/css"" href=""/Layout/CaptchaLayout.css"" />
<script type=""text/javascript"" src=""../../Scripts/vcaptcha_control.js""></script>

<div id="captcha_background">
            <div id="captcha_loading_area">
                <img id="captcha" src="#" alt="" />
            </div>

            <div id="vcaptcha_entry_container">
                <input id="captcha_answer" type="text"/>
                <input id="captcha_challenge" type="hidden"/>
                <input id="captcha_publickey" type="hidden"/>
                <input id="captcha_host" type="hidden"/>
            </div>

            <div id="captcha_logo_container"></div>
        </div>

However all the examples I see of ASP.NET controls that allow for basical functionality - i.e.

public class MyControl : Panel
{
public MyControl()
{
}

protected override void OnInit(EventArgs e)
{
ScriptManager.RegisterScript( ... Google script, CSS, etc. ... );


TextBox txt = new TextBox();
txt.ID = "text1";
this.Controls.Add(txt);

CustomValidator vld = new CustomValidator();
vld.ControlToValidate = "text1";
vld.ID = "validator1";
this.Controls.Add(vld);
}
}

Don't allow for the detailed layout that we need. Any suggestions on how I can combine layout and functionality and still have a single ASP control we can drop in to pages? The ultimate goal is for users of the control to just drop in:

<captcha:CaptchaControl ID="CaptchaControl1" 
runat="server"
Server="http://localhost:51947/"
/>

and see the working control.

Sorry for the basic nature of this one, any help is greatly appreciated.

Answer 1

There are a couple of ways to do it. You can make a custom control, or a user control. I think you will find it easier to do a user control. It lets you lay out parts of your control as you would a regular page. Here is some example documentation: http://msdn.microsoft.com/en-us/library/26db8ysc(VS.85).aspx

By contrast a custom control typically does all of the rendering in code (as your example you show). It is harder to make your first control in this way.

Answer 2

Although you may want to look into user controls, the following page has an example of doing this using a web control. http://msdn.microsoft.com/en-us/library/3257x3ea.aspx The Render() method does the output of the actual HTML for the control.