Question

Expert,

I would like to create a custom control with following feature and this is successfully created:

<fv:Album Runat="Server" Id="WeddingAlbum" Width="600" Height="600" SkinColor="SkyBlue" AllowedFileExtensions="jpg|png|jpeg|gif" MessageDelay="6000" 
SavePageUrl="saveupload.aspx" RemovePageUrl="removeupload.aspx"
ThumbnailHeight="150" Thumbnailwidth="150" ThumbnailFadeIn="slow" ThumbnailFadeOut="slow" ThumbnailShowDelete="true"
PopupView="true" PopupViewType="All" PopupOverlayShow="true" PopupTransitionIn="elastic" PopupTransitionOut="elastic"
</fv:Album>

but i would like to segregate Album with Thumbnail and Popup tag. it look like

<fv:Album Runat="Server" Id="WeddingAlbum" Width="600" Height="600" SkinColor="SkyBlue" AllowedFileExtensions="jpg|png|jpeg|gif" MessageDelay="6000" SavePageUrl="saveupload.aspx" RemovePageUrl="removeupload.aspx">
    <fv:Thumbnail Height="150" width="150" FadeIn="slow" FadeOut="slow" ShowDelete="true" />
    <fv:Popup View="true" ViewType="All" OverlayShow="true" TransitionIn="elastic" TransitionOut="elastic"/>
</fv:Album>

can any body tell me how can i achieve the above functionality?

Example:

 <asp:GridView ID="productGridView" Runat="server" DataSourceID="productsDataSource"
            <FooterStyle ForeColor="#8C4510" BackColor="#F7DFB5"></FooterStyle>
            <PagerStyle ForeColor="#8C4510" HorizontalAlign="Center"></PagerStyle>
            <HeaderStyle ForeColor="White" BackColor="#A55129"></HeaderStyle> 
</asp:GridView>

Thanks in advance!
Imdadhusen

Answer 1

Album.cs

namespace Imdadhusen.Controls.Web
{
    [DefaultProperty("Text")]
    [ToolboxData("<{0}:Album runat=\"server\" />")]
    [ToolboxBitmap(typeof(Album), "Album.bmp")]
    public class Album : WebControl, IScriptControl
    {
        #region "Popup Properties"
        private Popup _popup = new Popup();
        //PersistenceMode.InnerProperty: Specifies that the property persists in
        //the ASP.NET server control as a nested tag. 
        //DesignerSerializationVisibility.Content: Specifies that a visual
        //designer serializes the contents of this property instead of the 
        //property itself. 
        [DefaultValue("")]
        [Category("Custom")]
        [PersistenceMode(PersistenceMode.InnerProperty)]
        [DesignerSerializationVisibility(DesignerSerializationVisibility.Content)]
        public Popup Popup
        {
            get { return _popup; }
            set { _popup = value; }
        }
        #endregion

        #region "Popup Properties"
        private Thumbnail _thumbnail = new Thumbnail();
        [DefaultValue("")]
        [Category("Custom")]
        [PersistenceMode(PersistenceMode.InnerProperty)]
        [DesignerSerializationVisibility(DesignerSerializationVisibility.Content)]
        public Thumbnail Thumbnail
        {
            get { return _thumbnail; }
            set { _thumbnail = value; }
        }
        #endregion

        #region "Control Properties"
        public string UploadButtonID
        {
            get { return this.ViewState["UploadButtonID"] == null ? string.Empty : (string)this.ViewState["UploadButtonID"]; }
            set { this.ViewState["UploadButtonID"] = value; }
        }
        /// <summary>
        /// Location of the server-side upload script
        /// </summary>
        public string Action
        {
            get { return this.ViewState["Action"] == null ? string.Empty : (string)this.ViewState["Action"]; }
            set { this.ViewState["Action"] = value; }
        }
        /// <summary>
        /// Additional data to send
        /// </summary>
        public string ExtraData
        {
            get { return this.ViewState["ExtraData"] == null ? string.Empty : (string)this.ViewState["ExtraData"]; }
            set { this.ViewState["ExtraData"] = value; }
        }
        /// <summary>
        /// Callback to fire before file is uploaded
        /// You can return false to cancel upload
        /// </summary>
        public string OnSubmitFunction
        {
            get { return this.ViewState["OnSubmitFunction"] == null ? string.Empty : (string)this.ViewState["OnSubmitFunction"]; }
            set { this.ViewState["OnSubmitFunction"] = value; }
        }
        /// <summary>
        /// Submit file as soon as it's selected
        /// </summary>
        public bool AutoSubmit
        {
            get { return this.ViewState["AutoSubmit"] == null ? true : (bool)this.ViewState["AutoSubmit"]; }
            set { this.ViewState["AutoSubmit"] = value; }
        }
        /// <summary>
        /// The type of data that you're expecting back from the server.
        /// Html and xml are detected automatically.
        /// Only useful when you are using json data as a response.
        /// Set to "json" in that case.
        /// </summary>
        public string ResponseType
        {
            get { return this.ViewState["ResponseType"] == null ? string.Empty : (string)this.ViewState["ResponseType"]; }
            set { this.ViewState["ResponseType"] = value; }
        }
        // When user selects a file, useful with autoSubmit disabled            
        public string OnChangeFunction
        {
            get { return this.ViewState["OnChangeFunction"] == null ? string.Empty : (string)this.ViewState["OnChangeFunction"]; }
            set { this.ViewState["OnChangeFunction"] = value; }
        }
        /// <summary>
        /// Fired when file upload is completed
        /// WARNING! DO NOT USE "FALSE" STRING AS A RESPONSE!
        /// </summary>
        public string OnCompleteFunction
        {
            get { return this.ViewState["OnCompleteFunction"] == null ? string.Empty : (string)this.ViewState["OnCompleteFunction"]; }
            set { this.ViewState["OnCompleteFunction"] = value; }
        }
        #endregion

        #region "Page Events"
        protected override void OnPreRender(EventArgs e)
        {
            if (!this.DesignMode)
            {
                //test for the existence of a ScriptManager  
                ScriptManager sMgr = ScriptManager.GetCurrent(Page);

                if (sMgr == null)
                    throw new HttpException(
                       "A ScriptManager control must exist on the page.");

                sMgr.RegisterScriptControl(this);
            }
            base.OnPreRender(e);
        }
        protected override void Render(HtmlTextWriter output)
        {
            Control btnUpload = this.NamingContainer.FindControl(this.UploadButtonID);
            if (btnUpload == null) throw new HttpException("A UploadButtonID must point to an existing control on the page.");

            StringBuilder startupscript = new StringBuilder();
            startupscript.AppendLine("$().ready(function () {");
            startupscript.AppendLine("    $(function () {");
            startupscript.AppendFormat("        var btnUpload = $('#{0}');\n", btnUpload.ClientID);
            startupscript.AppendLine("        new AjaxUpload(btnUpload, {");
            startupscript.AppendFormat("            name: '{0}'", this.UniqueID);
            if (!string.IsNullOrEmpty(this.OnChangeFunction))
                startupscript.AppendFormat(",\n            onChange: {0}", this.OnChangeFunction);

            if (this.AutoSubmit)
            {
                startupscript.AppendFormat(",\n            action: '{0}'", this.Action);

                if (!string.IsNullOrEmpty(this.ResponseType))
                    startupscript.AppendFormat(",\n            responseType: {0}", this.ResponseType);

                if (!string.IsNullOrEmpty(this.OnSubmitFunction))
                    startupscript.AppendFormat(",\n            onSubmit: {0}", this.OnSubmitFunction);

                if (!string.IsNullOrEmpty(this.OnCompleteFunction))
                    startupscript.AppendFormat(",\n            onComplete: {0}", this.OnCompleteFunction);
            }
            else
            {
                startupscript.Append(",\n            autoSubmit: false");
            }
            startupscript.AppendLine("\n        });");
            startupscript.AppendLine("    });");
            startupscript.AppendLine("});");

            this.Page.ClientScript.RegisterStartupScript(this.GetType(), "startupscript", startupscript.ToString(), true);


            base.Render(output);

        }
        #endregion

        #region "IScriptControl Members"
        IEnumerable<ScriptDescriptor> IScriptControl.GetScriptDescriptors()
        {
            return new ScriptDescriptor[] { };
        }
        IEnumerable<ScriptReference> IScriptControl.GetScriptReferences()
        {
            ScriptReference reference = new ScriptReference();
            reference.Assembly = "PhotoAlbum";
            reference.Name = "Imdadhusen.Controls.Web.Script.ajaxupload.3.5.js";
            return new ScriptReference[] { reference };
        }
        #endregion
    }
}

Popup.cs

namespace Imdadhusen.Controls.Web
{
    /// <summary>
    ///ExpandableObjectConverter: Provides a type converter to convert expandable 
    ///objects. It adds support for properties on an object to the methods and 
    ///properties that TypeConverter provides.
    /// </summary>
    [TypeConverter(typeof(ExpandableObjectConverter))]
    public class Popup
    {
        //View="true" ViewType="All" OverlayShow="true" TransitionIn="elastic" TransitionOut="elastic"
        public Popup()
        {
        }

        //start View
        private bool _view;
        [DefaultValue(true)]
        [NotifyParentProperty(true)]
        [RefreshProperties(RefreshProperties.Repaint)]
        public bool View
        {
            get { return _view; }
            set { _view = value; }
        }
        //end View

        //start ViewType
        private _ViewType _viewtype;
        public enum _ViewType
        {
            All,
            Single
        }
        [DefaultValue(_ViewType.All)]
        [NotifyParentProperty(true)]
        [RefreshProperties(RefreshProperties.Repaint)]
        public _ViewType ViewType
        {
            get { return _viewtype; }
            set { _viewtype = value; }

        }
        //end ViewType

        //start ShowOverlay
        private bool _overlayshow;
        [DefaultValue(true)]
        [NotifyParentProperty(true)]
        [RefreshProperties(RefreshProperties.Repaint)]
        public bool ShowOverlay
        {
            get { return _overlayshow; }
            set { _overlayshow = value; }
        }
        //end ShowOverlay

        //start TransitionIn
        private _TransitionIn _transitionin;
        public enum _TransitionIn
        {
            Elastic,
            Fade,
            None
        }
        [DefaultValue("")]
        [NotifyParentProperty(true)]
        [RefreshProperties(RefreshProperties.Repaint)]
        public _TransitionIn TransitionIn
        {
            get { return _transitionin; }
            set { _transitionin = value; }
        }
        //end TransitionIn

        //start TransitionOut
        private _TransitionOut _transitionout;
        public enum _TransitionOut
        {
            Elastic,
            Fade,
            None
        }
        [DefaultValue(_TransitionOut.Elastic)]
        [NotifyParentProperty(true)]
        [RefreshProperties(RefreshProperties.Repaint)]
        public _TransitionOut TransitionOut
        {
            get { return _transitionout; }
            set { _transitionout = value; }
        }
        //end TransitionOut
    }
}

Thumbnail.cs

namespace Imdadhusen.Controls.Web
{
    /// <summary>
    ///ExpandableObjectConverter: Provides a type converter to convert expandable 
    ///objects. It adds support for properties on an object to the methods and 
    ///properties that TypeConverter provides.
    /// </summary>
    [TypeConverter(typeof(ExpandableObjectConverter))]
    public class Thumbnail
    {
        //<fv:Thumbnail Height="150" width="150" FadeIn="slow" FadeOut="slow" ShowDelete="true" />
        public Thumbnail()
        {
        }

        //start Height
        private int _height;
        [DefaultValue(150)]
        [NotifyParentProperty(true)]
        [RefreshProperties(RefreshProperties.Repaint)]
        public int Height
        {
            get { return _height; }
            set { _height = value; }
        }
        //end Height

        //start Width
        private int _width;
        [DefaultValue(150)]
        [NotifyParentProperty(true)]
        [RefreshProperties(RefreshProperties.Repaint)]
        public int Width
        {
            get { return _width; }
            set { _width = value; }
        }
        //end Width

        //start FadeIn
        private _FadeIn _fadein;
        public enum _FadeIn
        {
            Slow,
            Medium,
            Fast
        }
        [DefaultValue(_FadeIn.Medium)]
        [NotifyParentProperty(true)]
        [RefreshProperties(RefreshProperties.Repaint)]
        public _FadeIn FadeIn
        {
            get { return _fadein; }
            set { _fadein = value; }

        }
        //end FadeIn

        //start FadeOut
        private _FadeOut _fadeout;
        public enum _FadeOut
        {
            Slow,
            Medium,
            Fast
        }
        [DefaultValue(_FadeOut.Medium)]
        [NotifyParentProperty(true)]
        [RefreshProperties(RefreshProperties.Repaint)]
        public _FadeOut FadeOut
        {
            get { return _fadeout; }
            set { _fadeout = value; }

        }
        //end FadeOut

        //start ShowDelete
        private bool _showdelete;
        [DefaultValue(true)]
        [NotifyParentProperty(true)]
        [RefreshProperties(RefreshProperties.Repaint)]
        public bool ShowDelete
        {
            get { return _showdelete; }
            set { _showdelete = value; }
        }
        //end View
    }
}

Index.cshtml