locked
Custom Server Controls - Base Classes & Usage RRS feed

  • Question

  • User1778575546 posted

    Hi

    I hope someone out there can shed some light on the topic of creating server controls, the control base classes and the usage of those classes.

    Here is an example of what I want to achieve. I want to create a custom panel control that one can instantiate in the ASPX markup like so: 

    <acme:Panel ID="MyPanel" runtat="server" Scrolling="true">
      <Header>My Panel Header</Header>
      <Toolbars>
        <acme:Toolbar ID="Toolbar1" runat="server"/>
        <acme:Toolbar ID="Toolbar2" runat="server"/>
      </Toolbars>
      <Contents>
        <%-- Some Content for the Contents section --%>
      </Contents>
      <Footer>
        <%-- Some Content for the Footer section --%>
      </Footer>
    </acme:Panel>
     It should render the following HTML:
    <div id="MyPanel" class="panel scroll-contents">
      <div class="panel-header">
        <div class="panel-header-l"></div>
        <div class="panel-header-c">
          <div class="panel-header-wrapper">My Panel Header</div>
        </div>
        <div class="panel-header-r"></div>
      </div>
      <div class="panel-toolbars">
        // HTML of Toolbar control
      </div>
      <div class="panel-body">
        <div class="panel-body-t">
          <div class="panel-body-tl"></div>
          <div class="panel-body-tc"></div>
          <div class="panel-body-tr"></div>
        </div>
        <div class="panel-body-m">
          <div class="panel-body-ml"></div>
          <div class="panel-body-mc">
            <div class="panel-body-wrapper">
              // Contents
            </div>
          </div>
          <div class="panel-body-mr"></div>
        </div>
        <div class="panel-body-b">
          <div class="panel-body-bl"></div>
          <div class="panel-body-bc"></div>
          <div class="panel-body-br"></div>
        </div>
      </div>
      <div class="panel-footer">
        <div class="panel-footer-l"></div> 
        <div class="panel-footer-c">
          <div class="panel-footer-wrapper">
            // Footer contents
          </div>
        </div>
        <div class="panel-footer-r"></div>
      </div>
    </div>

    The developer should be able to omit any of the sections except the Contents section. Omitted sections' HTML should not be rendered. Plus the user should be able to instantiate/add a Panel control in the code behind of the page and add additional controls to the various sections of the Panel control, like so: 

    ACME.Panel MyPanel = new ACME.Panel();
    MyPlaceHolder.Controls.Add(MyPanel);
    
    MyPanel.Header = "My Panel Header";
    
    MyPanel.Toolbars.Controls.Add(new ACME.Toolbar());
    
    MyPanel.Footer.Controls.Add(new Literal());
    
    MyPanel.Contents.Controls.Add(new GridView());
     

    I have read the following article : Communications Sector Conversations : Authoring Custom ASP.NET Server Controls (Which base class?)

    Since I do not really want the developer to change the styling of my control, the System.Web.UI.Control base class should be sufficient, but I will also need to apply the INamingContainer interface. Thus my control should look like so:

    using System.Web;
    using System.Web.UI;
    using System.Web.UI.Design;
    using System.Web.UI.HtmlControls;
    using System.Web.UI.WebControls;
    using System.ComponentModel;
    using System.ComponentModel.Design;
    using System.Security.Permissions;
    namespace ACME
    {
        [ToolboxData("&lt;{0}:Panel runat=server></{0}:Panel >")]
        [ParseChildren(true)]
        public class Panel : Control, INamingContainer
        {
            private string _header;
            private ITemplate _toolbars;
            private ITemplate _contents;
            private ITemplate _footerContents;
            public DialogBox()
            {
            }
            [Browsable(false),
            PersistenceMode(PersistenceMode.InnerProperty)]
            public virtual ITemplate Toolbars
            {
                get { return _toolbars; }
                set { _toolbars = value; }
            }
            [Browsable(false),
            PersistenceMode(PersistenceMode.InnerProperty)]
            public virtual ITemplate Contents
            {
                get { return _contents; }
                set { _contents= value; }
            }
            [Browsable(false),
            PersistenceMode(PersistenceMode.InnerProperty)]
            public virtual ITemplate Footer
            {
                get { return _footerContents; }
                set { _footerContents = value; }
            }
        }
    }

    I have read many tutorials but they either don't cover my intended implementation or explain WHY a certain approach was taken. They have also confused me so much that I have resorted to JavaScript to dynamically render the necessary HTML. If there are any Control Guru's out there, could you please explain how you would have tackled this task?

    Wednesday, May 6, 2009 6:17 AM

Answers

  • User2032526919 posted

    What is the confusing part? One part of the problem is that there are indeed maybe more than one way to do this, so maybe starting from what feels confusing is better. I have also discussed about various control related aspects in my blog, if you want to dig from there: http://aspadvice.com/blogs/joteke

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, May 9, 2009 6:41 AM

All replies

  • User2032526919 posted

    What is the confusing part? One part of the problem is that there are indeed maybe more than one way to do this, so maybe starting from what feels confusing is better. I have also discussed about various control related aspects in my blog, if you want to dig from there: http://aspadvice.com/blogs/joteke

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, May 9, 2009 6:41 AM
  • User1778575546 posted

     My confusion more relates to when it is best to use templated controls and when to use ControlCollections.

    Monday, May 11, 2009 1:33 AM