Click here to Skip to main content
Click here to Skip to main content

How to Develop a Simple Vertical Text Scroller Custom Server Control in ASP.NET

, 23 Jul 2009
Rate this:
Please Sign up or sign in to vote.
Step by step on how to create a custom server control in ASP.NET 2.0
Sample Vertical Text Scroller

Introduction

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 the application Cross Browser marquee II on dynamicdrive.com. I have modified it to meet my requirement. 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 a handful (50+) of websites were still using this application. Below are a few of them.

Check them out.

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 step by step tutorial on how I have accomplished this. Hope this tutorial will give someone an idea on how to create a custom server control.

Download the Original Application/ Script

Note

I have broken the cmarquee2.htm page into three different sections, namely Style Sheet, JavaScript and static HTML elements/ tags.

Create Class Library

  1. Open VS 2005/2008. Go to File, New, Project, Visual C# and select Class Library template and fill up the required field.

    New Project

  2. Rename the class1.cs to TextScroller.cs.

Adding Style Sheet

Right click the project, Add, New Item, Visual C# Project Items, Select Style Sheet from the available templates. I named it TextScroller.css. Extract all the Style Sheet from cmarquee2.htm into TextScroller.css.

Adding JavaScript

Right click the project, Add, New Item, Visual C# Project Items, Select Jscript from the available templates. I named it TextScroller.js. Extract all the JavaScript from cmarquee2.htm into TextScroller.js.

Add New Item

Adding New Folder

Right click the MyTextScroller project, Add, New Folder, rename the folder to images. Place all the images in this folder.

Adding System.Web References

Right click on the MyTextScroller project, Add Reference. In the .NET tab, locate the System.Web component name, select it and click Ok.

Adding Web.System Reference

Check Point

The structure of the project should look like the picture from below if you follow all the above steps correctly.

Project Structure

Embedding the Resources

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.

Embed 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")]

Note

Default Namespace

The syntax:

[assembly: System.Web.UI.WebResource
	("Default Namespace.File Location.File Name", "Type")] 

Example 1

My default namespace 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")]>

Example 2

My default namespace is MyTextScroller.
All my images are in the 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")]

TextScroller.cs

The TextScroller.cs will hold all the static HTML elements in the cmarquee2.htm. Please look at the code, it 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.

namespace MyTextScroller
{
    [   AspNetHostingPermission(SecurityAction.Demand, 
		Level = AspNetHostingPermissionLevel.Minimal),
        AspNetHostingPermission(SecurityAction.InheritanceDemand, 
		Level = AspNetHostingPermissionLevel.Minimal),
        ParseChildren(true, "innerHTML"),
        DefaultProperty("innerHTML"),
        ToolboxData("<{0}:TextScroller runat="\""server\"> ") ]
    public class TextScroller : WebControl, INamingContainer
	{

Additional Reading/ Information

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.

//Properties to adjust the width and height of the div and set the innerHTML 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

Working with Web Resources in ASP.NET 2.0

Example - Images

Image myImage = new Image();
ClientScriptManager cs = Page.ClientScript;
Type rsType = this.GetType();
myImage.ImageUrl = cs.GetWebResourceUrl
		(rsType, "MyTextScroller.images.nav-arrow-up.gif")

Example - JavaScript

Type rsType = this.GetType();
this.Page.ClientScript.RegisterClientScriptInclude(
rsType, "TextScroller_Script_Name",
Page.ClientScript.GetWebResourceUrl(rsType, " MyTextScroller.TextScroller.js"));

Example - Style Sheets

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 embedded 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);
}

//Write the output to the page that is in the cmarquee2.htm page

		protected override void OnPreRender(EventArgs e)
        {
            base.OnPreRender(e);
        }

        protected override void Render(HtmlTextWriter output)
        {
            EnsureChildControls(); 
            output.Write(GenerateDiv());
        }

//create all the HTML Tag elements
        private string GenerateDiv()
        {
			StringBuilder b = new StringBuilder();
            ClientScriptManager cs = Page.ClientScript;
            Type rsType = this.GetType();
			
			b.Append("<div style=\"width:");
            b.Append(width.Value);
			
            //see attached code ...
			....
         	return b.ToString();
        }
		
		protected override void CreateChildControls()
        {
            Controls.Clear();
        }

        protected override void OnLoad(EventArgs e)
        {
            base.OnLoad(e); 
        }    
    }
}

Individualizing the Control: Add a custom toolbox icon for the control

  1. Create an icon from any of the links below. This is free.
  2. What is the name of your class? For instance, my class name is TextScroller:
    public class TextScroller : WebControl, INamingContainer
    

    Then I named the icon TextScroller.ico. Place it in the project root directory and change the Build Action to Embedded Resource:

Embed Icon

Adding the Control to the Toolbox

  1. Go to View, Toolbox, Right click any place in the Toolbox, Add Tab, I name it MyTextScroller.
  2. Right click MyTextScroller, Choose Items, .NET Framework Components Tab, Browse, find the MyTextScroller.dll, click Ok.
  3. You should see something like this on the Toolbox.
Toolbox Icon

How to Test it? / Using the Code

Add Reference

  1. Right click on the solution, Add, New Web Site, ASP.NET Web Site/ ASP.NET AJAX-Enabled Web Site

    Add New Website

  2. Right click the TestMyTextScroller, Add References, Project Tab, MyTextScroller project, Ok.

    Add Reference

Drag the TextScroller from the Toolbox to the Default.aspx. Try one of the following:

<cc1:TextScroller ID="TextScroller1" runat="server" Height="100px">
		My test content here. 

		<a href="http://blog.ysatech.com/">My Blog</a> 

		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 <br />");
        sbContent.Append("More text here…");    
      
        TextScroller1.innerHTML = sbContent.ToString();
    }

You should see something like below:

Results

Points of Interest

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 are embedded in it.

Next Improvement

  1. Support multiple instances, currently this version works only with one instance of the TextScroller on the same page
  2. Allow user to change the image button during design time

Conclusion

Here is the list of items we have covered in this article:

  1. How to create a Custom Server Control
  2. How to embed resources
  3. How to access embedded Resource
  4. How to include custom toolbox icon
  5. How to test the new control

References

History

  • 23rd July, 2009: Initial post

License

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

About the Author

Bryian Tan
Software Developer
United States United States
I have over three years of experience working with Microsoft technologies. I have earned my Microsoft Certified Technology Specialist (MCTS) certification. I'm a highly motivated self-starter with an aptitude for learning new skills quickly.

Comments and Discussions

 
Generalvote 4 Pinmembershaheen_mix16-Dec-11 23:25 
GeneralNot working in browsers other than IE Pinmembero4ovais29-Jul-09 21:52 
GeneralRe: Not working in browsers other than IE PinmemberBryian Tan5-Aug-09 9:00 
GeneralIt's nice PingroupMd. Marufuzzaman24-Jul-09 6:34 
GeneralRe: It's nice PinmemberBryian Tan5-Aug-09 9:33 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140721.1 | Last Updated 23 Jul 2009
Article Copyright 2009 by Bryian Tan
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid