Create custom control with nested tag like GridView >> Columns >> Paging - asp.net-3.5

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