Click here to Skip to main content
15,893,564 members
Please Sign up or sign in to vote.
4.50/5 (2 votes)
See more:
Hi Expert,
I would like to create a custom control with following feature and this is successfully created but i like to segregate Album with Thumbnail and Popup tag:
XML
<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
XML
<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?

For more clarification ,please see following Example:
XML
<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
Posted
Updated 3-Jul-11 21:22pm
v3

1 solution

Hi I have done above requirement using following code:
Now i am facing another problem is Thumbnail and Popup should allow only once at every Album tag.
XML
<fv:Thumbnail Height="150" width="150" FadeIn="slow" FadeOut="slow" ShowDelete="true" />
    <fv:Popup View="true" ViewType="All" OverlayShow="true" TransitionIn="elastic" TransitionOut="elastic"/>


Solution for nested tag
Album.cs
C#
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
C#
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
C#
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
    }
}

Final Output : Index.aspx
XML
<cc1:Album runat="server" UploadButtonID="addImage" Action="saveupload.aspx" OnSubmitFunction="OnSubmitFunction"
       OnCompleteFunction="OnCompleteFunction">
       <Popup View="True" ViewType="All" ShowOverlay="true" TransitionIn="Elastic" TransitionOut="Elastic" />
       <Thumbnail Height="150" Width="150" FadeIn="Medium" FadeOut="Medium" ShowDelete="true" />
   </cc1:Album>
 
Share this answer
 
Comments
Ali Al Omairi(Abu AlHassan) 4-Aug-11 6:18am    
Hi, My friend;I am seeing my code, I thought you were busy.

Look; Sir, I don't understand what is the 'Actual Results' and what is the 'Expected Results'.

Please Elaborate.
one more thing, you have to change the code:
this.Page.ClientScript.RegisterStartupScript(this.GetType(), "startupscript", startupscript.ToString(), true);
to
this.Page.ClientScript.RegisterStartupScript(this.GetType(), this.UniqueID, startupscript.ToString(), true);
so every instant of the control will be registered uniquely.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900