Fully Customized Reusable ASP+ Vertical/Horizontal Marquee Consuming XML/MS SQL

• Download custom control (source and binary) - 95.4 Kb

Introduction

In every project I need a way to show the latest articles, news, weathercast, etc. Some projects process links with query strings while others not.. My ideal solution would be a quick, simple, lightweight Marquee Web Custom Control...

If you are not familiar with custom web controls, here is a partial definition from the Microsoft documentation:

Web controls run on the server and include form controls such as buttons and text boxes, as well as special purpose controls such as a calendar. This allows you to programmatically control these elements on a web page. Web controls are more abstract than HTML controls. Their object model does not necessarily reflect HTML syntax. (See MSDN.)

Features

• great design-time attributes.
• allows you to choose database: XML or SQL Server.
• you can apply your web template.
• each topic has ID, description, date, anchor URL, anchor text.

Database

In the case of XML as database:

<?xml version="1.0" encoding="utf-8" ?> 
<marquee>
    <topic tpID='1' postDate='1/1/2002'>
        <url value='http://www.....com'> Link... </url>
        <hint><![CDATA[ Link Description goes here ]]></hint>
    </topic>
</marquee>

Using the code

Our control has three classes:

• Marquee: WebControl (which renders the control).
• Data (reads data from database (XML or SQL Server) and generates a collection of topics).
• Anchor (data holder).

First, we will preview the Data class code:

public class Data
{
    public ArrayList GetNews(string str,bool _isXML)
    {        
        //setup Array List
        ArrayList AnchorsArrayList=new ArrayList();

        if(!_isXML)// Read From MSSQL DB :::::::::::::
        {
            try
            {
                //Select SQl Query : text,url,id,date,title , Table Name links
                string sqlSelectStr="SELECT text, url, id, date, title FROM links";
                SqlConnection myConnection;

                //connect DB And check without overload on the DB Server.
                myConnection=new SqlConnection(str);
                if(myConnection.State==ConnectionState.Closed){myConnection.Open();}

                //pass our SQL Str within new Command
                SqlCommand myCommand=new SqlCommand(sqlSelectStr,myConnection);

                //Creating  A Reader to store Returned Database Data
                SqlDataReader myReader=myCommand.ExecuteReader();

                //looping thrugh Reader.
                while(myReader.Read())
                {
                    //intialize Anchor Object
                    Anchor anc=new Anchor();
                    //set Object id
                    anc.Id=Convert.ToInt32(myReader["id"]);
                    //set Object url
                    anc.Url=myReader["url"].ToString();
                    //set Object text
                    anc.Text=myReader["text"].ToString();
                    //set Object date
                    anc.Date=(DateTime)myReader["date"];
                    //set Object Hints
                    anc.Title=myReader["title"].ToString();

                    //add it to our Collection
                    AnchorsArrayList.Add(anc);
                }
                //Dispose any relation with DB
                myReader.Close();
                myConnection.Close();
            }
            catch(Exception ex)
            {
                throw ex;
            }
        }
        else // Read From XML DB ::::::::::::::::::::::::::::::::::
        {
            try
            {
                // create XMLDocument and Load Xml File
                XmlDocument xmlDoc=new XmlDocument();
                xmlDoc.Load(str);

                //create XPath Navigator in order to navigate XML Nodes...
                XPathNavigator nav=xmlDoc.CreateNavigator();

                // create Two NodeItrators in order to loop throw Topics
                XPathNodeIterator navIterator;//topic
                XPathNodeIterator navIterator2;//details

                //Set XPath to Topic Node...
                navIterator=nav.Select("marquee/topic");

                //topic number
                int topicNo=1;
                while(navIterator.MoveNext())
                {
                    //intialize Anchor Object
                    Anchor anc=new Anchor();

                    //read current topic ID and Date...I didnt 
                    //use id or Date in this article 
                    //but you can use it in sorting 
                    //search or Quary Strings between pages
                    anc.Id=
                      Convert.ToInt32(navIterator.Current.GetAttribute("tpID",
                      "").ToString());
                    anc.Date=
                      Convert.ToDateTime(navIterator.Current.GetAttribute("postDate",
                      "").ToString());
                        
                    //set Anchor/Link details XPath  
                    navIterator2=nav.Select("marquee/topic["+topicNo+"]/url");
                    navIterator2.MoveNext();

                    //read URL and Text o the current topic
                    anc.Url=
                      navIterator2.Current.GetAttribute("value",
                      "").ToString();
                    anc.Text=navIterator2.Current.Value.ToString();

                    //set description XPath  
                    navIterator2=nav.Select("marquee/topic["+topicNo+"]/hint");
                    navIterator2.MoveNext();
                    //read
                    anc.Title=navIterator2.Current.Value.ToString();

                    //finally... Save Our Link
                    AnchorsArrayList.Add(anc);

                    //moveNext
                    topicNo++;

                }
            }
            catch(Exception ex)
            {
                throw ex;
            }
        }
        //you are welcome......
        return AnchorsArrayList;
    }
}

Now we look at the Marquee class. There are two methods:

• Render(...)
• AnchorsListHtmlGenerator(.....)

        ///    <summary>
        ///     Generate Links Html Tags according to user setting.
        ///    </summary>
        ///    <param name="aList">Type:ArrayList :collection
        ///                        of Anchor Objects</param>
        ///    <returns>HTML as string</returns>
        protected string AnchorsListHtmlGenerator(ArrayList aList)
        {
            StringBuilder s = new StringBuilder();
            string dir;
            bool pFlag;

            //Set Langauge Direction Left-Right or Right-Left
            if (arabicSupport){dir = "rtl";}else{dir = "ltr";}

            //Set Marquee direction up-Down-Let-Right using enum
            switch (marqueeDirection)
            {
                case Direction.up:
                case Direction.down:
                    {
                        pFlag = true;
                        break;
                    }
                default:
                    {
                        pFlag = false;
                        break;
                    }
            }

            //looping through Arraylist    collection of Links.
            for (int i = 0; i < aList.Count; i++)
            {
                //Check    If User    need to    Show Hints Or not.
                if (showTitle)
                {
                    //Is Bold
                    if (TitleFontBold) { s.Append("<b>"); }

                    // <p> tag
                    if (pFlag) { s.Append("<p dir=\"" + dir + "\">"); }

                    //Font and Size
                    s.Append("<font    size=\"" + titleFontSize + 
                             "\" color=\"" + 
                             urlTitleForeColor.Name.ToString() + 
                             "\"" + ">");

                    //retrive Titles by    looping    through    Passed ArrayList
                    s.Append((((Anchor)aList[i]).Title).ToString());

                    //</font>
                    s.Append("</font>");

                    //</p>
                    if (pFlag) { s.Append("</p>"); }

                    //</b>
                    if (TitleFontBold) { s.Append("</b>"); }
                }

                //<p> tag and set Direction
                if (pFlag) { s.Append("<p dir=\"" + dir + "\">"); }

                //set Image    Source
                if (showImage)
                {
                    s.Append("<img    src=" + listItemImageSrc + ">");
                }

                //
                //<a> Tag
                s.Append("<A href=\"");
                //retrive and set Url from Passed ArrayList
                s.Append((((Anchor)aList[i]).Url).ToString());
                s.Append("\"");

                //URL UnderLine    Check and close    </a>
                if (urlUnderLine)
                {
                    s.Append(" style=\"text-decoration:    none\" ");
                }
                s.Append(">");

                //Set text Font&Color
                s.Append("<font    size=\"");
                s.Append(linkFontSize + "\"    color=\"" + 
                   urlForeColor.Name.ToString() + "\"" + ">");
                s.Append((((Anchor)aList[i]).Text).ToString());
                s.Append("</font></A>");
                //
                //

                //</p>
                if (pFlag) { s.Append("</p><p> </p>"); }

            }
            //Return Full HTML Code    As String
            return s.ToString();
        }

Render method:

        /// <summary>
        /// Render this control to web solution
        /// </summary>
        /// <param name="output"> The HTML writer to write out to </param>
        protected override void Render(HtmlTextWriter output)
        {
            try
            {
                // make instance from Data Class
                Data myData = new Data();
                //Write Marquee Tag with Custome Attributes
                output.Write("<marquee onmouseover=this.stop() " + 
                             "onmouseout=this.start() scrollamount=1 " + 
                             "scrolldelay=10 direction=" + 
                             marqueeDirection.ToString() + " width=" + 
                             width + " height=" + height + ">");
                //check Bold Option
                if (FontBold) { output.Write("<b>"); }
                //write the Links Tag which returned 
                //by GetNew(connectionStr) Method
                output.Write(AnchorsListHtmlGenerator(myData.GetNews(connectionStr, 
                                                                          isXML)));
                //Bold Close Tag
                if (FontBold) { output.Write("</b>"); }
                //Marquee Close Tage
                output.Write("</marquee>");

            }
            catch (Exception ex)
            {
                output.Write(ex.Message);
            }

        }

How? ..

After registering the DLL file within your web solution, you must:

• Decide the database type: XML Or MS SQL Server. If your choice is XML, then set the property IsXML=true.

  

• Then specify your XML file full path ConnectionString="C:\resources\xml\XMLFile1.xml" or your MS SQL DB connection string in the case of IsXml=false...