Scrolling News Web Control using ASP.Net and C#

On many of the web portals/sites it is observed that latest news start scrolling from right to left.

To do this need to write JavaScript in detail, there could be number of storing news format. I have written this web control to avoid extensive use of JavaScript by using Marquee at server side.

I have tested this application on following browsers:

1. Internet Explorer 6.0
2. Netscape Navigator 7.2
3. Mozilla Firefox 1.5

So no need to worry much about cross browser performance issue, it work simply great on all above browsers.

Requirement:

Need To make following tables in SQL Server Database, and put corresponding records in the tables.

News Table

create table News
(
newsId  int  primary key identity(1,1) Not null,
newTitle varchar(50) Not null,
dateCreated datetime
)

The code behind of page i.e. on page load I have following code

News.ascx.cs

protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            //Fill News Section
            FillNews();
        }
    }

    private void FillNews()
    {
        // Fetch News Records from Database and Store in Datatable…

        string news = null;

        for (int i = 0; i < DataTable.Rows.Count; i++)
        {
            news = news + DataTable.Rows[i]["News"].ToString();
            news = news + "  ||  ";
        }

        lblNews.Text = news;
    }

Which just prepare a connection with the database and get the newsTitle and dateCreated to scroll in the marquee in direction=’UP’. I have prepared a string which can be added dynamically in a table row to fit in appropriate table row, which generates scrolling news section with anchor (link) to open detail in the new window. Idea behind opening in new window to stick the user to same site. You can do following with the marquee and JavaScript functionality used in the same.

• Can stop on mouseover of the link [OnMouseOver='this.stop();']
• Can start on mouseout of the link [OnMouseOut='this.start();']
• Can controll the speed of the scrolling [direction='up' scrollamount='2']

Register this control as below in a file in which you want to use this

<%@  Control Language="C#" AutoEventWireup="true" CodeFile="News.ascx.cs" Inherits="UserControls_News" %>
<table width="100%" cellspacing="0px" cellpadding="0px" class="NewsBgColor">
    <tr>
        <td class="Table_TD_Center">
            <marquee behavior="SCROLL" width="100%" scrolldelay="100″" onmouseover='this.stop();'
                onmouseout='this.start();'>
                <asp:Label ID="lblNews" runat="server" Text="" CssClass="RedLabel">
                </asp:Label>
            </marquee>
        </td>
    </tr>
</table>

That’s all … Happy Programming