Simple Vertical Text Scroller ASP.NET Server control
Simple Vertical Text Scroller with Button ASP.NET 2.0 Server control
How to develop a Simple Text Scroller custom server control in ASP.NET
Step by step on how to create a custom server control in ASP.NET 2.0
Couple years ago, I was looking for a simple text scroller application to replace our text scoller that was based on Java and I found Cross Browser marquee II on dynamicdrive.com. I have modified it to tailor my requirement (http://download.ysatech.com/message-scroller/). The main modification I made to the scroller was the addition of two buttons that controlled the flow of the vertical scroll content. Recently, I did a quick search on Google and found out that handful (50+) of websites were still using this application. Below are the few of them.
http://cherryle.win.aplus.net/index.asp
http://www.hydroqual.com/
http://www.sabugacenter.com/
http://www.opcfoundation.org/
http://www.mmtv.co.za/index.htm
Moving forward, I have converted this application to ASP.NET custom server control. Now, the ASP.NET developers can drag and drop the control to the page without copy and paste between the web applications. Below is a brief tutorial on how I have accomplished this. Hope this tutorial will give someone an idea on how to create custom server control.
cmarquee2.htm
I have broken the cmarquee2.htm page into three different sections, namely Style Sheet, JavaScript and static HTML elements/ tags.
-
Open VS 2005/2008. Go to File, New, Project, Visual C# and select Class Library template and fill up the required field.
-
Rename the class1.cs to TextScroller.cs
Right click the project, Add, New Item, Visual C# Project Items, Select Style Sheet from the available templates. Name it TextScroller.css. Extract all the Style Sheet from cmarquee2.htm into TextScroller.css
Right click the project, Add, New Item, Visual C# Project Items, Select Jscript File from the available templates Name it TextScroller.js. Extract all the JavaScript from cmarquee2.htm into TextScroller.js
Right click the MyTextScroller project, Add, New Folder, rename the folder to images. Place all the images in this folder.
Right click on the MyTextScroller project, Add Reference. In the .NET tab locate the System.Web component name, select it and click Ok
The structure of the project should look like the picture from below if you follow all the above step correctly.
Right click one of the images, select Properties, and change the Build Action value from Content to Embedded Resource. Repeat the same step for all the other images.
Repeat the above step for the JavaScript and Style Sheet.
Double click the AssemblyInfo.cs. Add the following to the bottom of the file.
[assembly: System.Web.UI.WebResource("MyTextScroller.TextScroller.css", "text/css")]
[assembly: System.Web.UI.WebResource("MyTextScroller.TextScroller.js", "text/javascript")]
[assembly: System.Web.UI.WebResource("MyTextScroller.images.nav-arrow-down-hover.gif", "image/gif")]
[assembly: System.Web.UI.WebResource("MyTextScroller.images.nav-arrow-down.gif", "image/gif")]
[assembly: System.Web.UI.WebResource("MyTextScroller.images.nav-arrow-up-hover.gif", "image/gif")]
[assembly: System.Web.UI.WebResource("MyTextScroller.images.nav-arrow-up.gif", "image/gif")]
The syntax - [assembly: System.Web.UI.WebResource("Default Namespace.File Location.File Name", "Type")]
My Default Name Space is MyTextScroller
My JavaScript File name is TextScroller.js
And I’ll end up having this line in my AssemblyInfo.cs
[assembly: System.Web.UI.WebResource("MyTextScroller.TextScroller.js", "text/javascript")]<br /><br />
My Default Name Space is MyTextScroller
My image is in images folder
My image name is nav-arrow-down-hover.gif
And I’ll end up having this line in my AssemblyInfo.cs
[assembly: System.Web.UI.WebResource("MyTextScroller.images.nav-arrow-down.gif", "image/gif")]<br /><br />
The TextScroller.cs will hold all the static HTML elements from the cmarquee2.htm. Please look at the code, is pretty straight forward. Here is a brief explanation.
Add design-time attributes to provide custom metadata that will be used to display the control in the visual designer at design time
[AspNetHostingPermission(SecurityAction.Demand, Level = AspNetHostingPermissionLevel.Minimal),
AspNetHostingPermission(SecurityAction.InheritanceDemand, Level = AspNetHostingPermissionLevel.Minimal),
ParseChildren(true, "innerHTML"),
DefaultProperty("innerHTML"),
ToolboxData("<{0}:TextScroller runat=\"server\"> </{0}:TextScroller>")]
The ToolboxData attribute specifies the default tag generated for the TextScroller control when it is dragged from the Toolbox into a page at design time.
ParseChildren
AspNetHostingPermission
//Properties to adjust the width and height of the DIV
#region Public Properties
private Unit width = Unit.Pixel(260);
public override Unit Width
{
get { return width; }
set { EnsureChildControls(); width = value; }
}
private Unit height = Unit.Pixel(160);
public override Unit Height
{
get { return height; }
set { EnsureChildControls(); height = value; }
}
// property to set the content of the Text Scroller
private string _innerHTML = "Your Content here";
[ Browsable(true), //display this property in designer
Category("Appearance"),
DefaultValue("Your Content Here"),
Description("The Content to Display."),
Localizable(true),
PersistenceMode(PersistenceMode.InnerDefaultProperty) ]
public virtual string innerHTML
{
get
{
return _innerHTML;
}
set
{
EnsureChildControls(); _innerHTML = value;
}
}
#endregion
Image myImage = new Image();
ClientScriptManager cs = Page.ClientScript;
Type rsType = this.GetType();
myImage.ImageUrl = cs.GetWebResourceUrl(rsType, "MyTextScroller.images.nav-arrow-up.gif")
Type rsType = this.GetType();
this.Page.ClientScript.RegisterClientScriptInclude(
rsType, "TextScroller_Script_Name",
Page.ClientScript.GetWebResourceUrl(rsType, " MyTextScroller.TextScroller.js"));
Type rsType = this.GetType();
string csslink = @"<link rel='stylesheet' type='text/css' href='" + Page.ClientScript.GetWebResourceUrl(rsType, "MyTextScroller.TextScroller.css") + "' />";
LiteralControl include = new LiteralControl(csslink);
this.Page.Header.Controls.Add(include);
//using the embeded JavaScript and Style Sheet
protected override void OnInit(EventArgs e)
{
//Get the name of the Web Resource.
base.OnInit(e);
this.Page.ClientScript.RegisterClientScriptInclude(
this.GetType(), "TextScroller",
Page.ClientScript.GetWebResourceUrl(this.GetType(),
"Scroller.TextScroller.js"));
// create the style sheet control and put it in the document header
string csslink = @"<link rel='stylesheet' type='text/css' href='" + Page.ClientScript.GetWebResourceUrl(this.GetType(), "Scroller.TextScroller.css") + "' />";
LiteralControl include = new LiteralControl(csslink);
this.Page.Header.Controls.Add(include);
}
protected override void OnPreRender(EventArgs e)
{
base.OnPreRender(e);
}
//write the output to the page in the cmarquee2.htm page
protected override void Render(HtmlTextWriter output)
{
EnsureChildControls();
output.Write(GenerateDiv());
}
//create all the HTML Tag elemets
private string GenerateDiv()
{
//see attached code
}
}
}
-
Create an icon from any of the links below. This is free.
genfavicon
dynamicdrive
-
What is the name of your class? For instance my class name is TextScroller
public class TextScroller : WebControl, INamingContainer
Named the icon TextScroller.ico. Place it in the project root directory and change the Build Action to Embeded Resource
Adding the Control to the Toolbox
Go to View, Toolbox, Right click any place in the Toolbox, Add Tab, I name it MyTextScroller.
Right click MyTextScroller, Choose Items, .NET Framework Components Tab, Browse, find the MyTextScroller.dll, click Ok.
You should see the custom icon next to the control instead of the default icon.
Add Refenence
-
Right click on the solution, Add, New Web Site, ASP.NET Web Site/ ASP.NET AJAX-Enabled Web Site
-
Right click the TestMyTextScroller, Add References, Project Tab, MyTextScroller project, Ok
-
Go to View, Toolbox, Right click any place in the Toolbox, Add Tab, I name it MyTextScroller.
-
Right click MyTextScroller, Choose Items, .NET Framework Components Tab, Browse, find the MyTextScroller.dll, click Ok.
-
Drag the TextScroller to the Default.aspx. Try one of the following
<cc1:TextScroller ID="TextScroller1" runat="server" Height="100px">
My test content here. <br />
<a target="_blank" href="http://blog.ysatech.com">My Blog</a> <br />
More text here….
</cc1:TextScroller>
or
protected void Page_Load(object sender, EventArgs e)
{
TextScrollerContent();
}
internal void TextScrollerContent()
{
StringBuilder sbContent = new StringBuilder(string.Empty);
sbContent.Append("My test content here. <br />");
sbContent.Append("<a href=\"http://blog.ysatech.com\">My Blog</a> <br />");
sbContent.Append("More text here…");
TextScroller1.innerHTML = sbContent.ToString();
}
You should see something like below:
Do not use any custom server control from any unknown sources that have JavaScript embedded to it. Go through all the JavaScript and make sure that no potential malicious scripts embedded in it.
-
Support multiple instances, currently this version work only with one instance of the TextScroller on the same page
-
Allow user to change the image button during design time
Here are the lists of items we have covered in this article:
-
How to create Custom Server Control
-
How to add Web reference
-
How to embed resources
-
How to add design-time attributes
-
How to access embedded Resource
-
How to include custom toolbox icon
-
How to add custom server control to the Toolbox
-
How to test the new control
Download
http://aspalliance.com/726
http://www.asp.net
http://www.dynamicdrive.com/dynamicindex2/cmarquee2.htm
http://www.codeproject.com/
http://msdn.microsoft.com/en-us/library/system.web.ui.control.ensurechildcontrols.aspx
http://msdn.microsoft.com/en-us/library/system.web.aspnethostingpermission.aspx
http://ondotnet.com/pub/a/dotnet/excerpt/progaspdotnet_14/index2.html
http://msdn.microsoft.com/en-us/library/system.web.ui.parsechildrenattribute.aspx
http://support.microsoft.com/kb/910442
Subscribe