Post
Ask Question

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 down to top.

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.

This is a very simple table structure in Master Detail format. In tbl_News all the titles and date created will be stored and corresponding newsDetail are stored in tbl_NewsDetail.

News Table

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

News Detail Table

create table tbl_NewsDetail
(
 dtlId  int  primary key identity(1,1) Not Null,
 newsId  int foreign key references tbl_news,
 newsDetail varchar(8000)
)

Explanation in detail about the coding

In folder called as "userControll" I have web control as "Scrolling_News.ascx".

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

private void Page_Load(object sender, System.EventArgs e)
{
    // Put user code to initialize the page here
    SqlConnection myCon = new SqlConnection(ConfigurationSettings.AppSettings["connectionString"]);
    string strSql = "SELECT * FROM tbl_News order by dateCreated asc";
    string strScrolling = "";
    HtmlTableCell cellScrolling = new HtmlTableCell();
    SqlCommand myComd = new SqlCommand(strSql,myCon);
    SqlDataReader sqlRdr;
    try
    {
        myCon.Open();
        sqlRdr = myComd.ExecuteReader();
        strScrolling = "<Marquee OnMouseOver='this.stop();' OnMouseOut='this.start();' direction='up' scrollamount='2' bgcolor='#000000' width='40%'>";
        while(sqlRdr.Read())
        {
            strScrolling = strScrolling + "<a href='#' OnClick="+"javascript:window.open
                           ('newsDetail.aspx?NewsId="+sqlRdr.GetValue(0)
                            +"','NewsDetail','width=400,height=400;toolbar=no;');"+"><font
                           face='verdana' size='2' color='#ffffff'>"+ sqlRdr.GetValue(1)
                           +"</a>&nbsp;&nbsp;"+sqlRdr.GetValue(2).ToString()+"</font><br><br>";
         }
            strScrolling = strScrolling +"</Marquee>";
            sqlRdr.Close();
            cellScrolling.InnerHtml = strScrolling;
                   rowScrolling.Cells.Add(cellScrolling);  
          }
    catch(Exception msg)
    {
        Response.Write(msg.Message);
    }
    finally
    {
        //close sql connection
        myCon.Close();
    }
}

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.

  • Change the direction of the scrolling [direction='up']
  • 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']

Microsoft also provide Add rotator component which can be used with XML, but it differs with respect that by having above functionality.

In newsDetail.aspx page, I have again simple code to get the detail based on querystring of newsId.

Using this control in a page

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

<%@ Register TagPrefix="Scrolling" TagName="News" src="userControll/Scrolling_News.ascx" %>

and use this in a table as below

<table width="100%" bgColor="#ccccff">
<tr>
    <td width="60%"><STRONG><FONT face="Tahoma">News Section</FONT></STRONG></td>
</tr>
<tr>
    <td><SCROLLING:NEWS id="scroller" runat="server"></SCROLLING:NEWS></td>
</tr>
</table>

That' all enjoy...

What you can do as enhancement?

As an enhancement to this tutorial/article one can add field imageURL in newsDetail table. Also an admin control panel can be provided, to add news and news details to the database by simply having additional screen, which will become complete web application

I think this code snippet is very simple and handy to use as a control in day to day life.

Next article >> I am thinking of writing dynamic drop down, Menu as web control (0 to 1 levels)


Similar Articles