ASP.NET的Databound JavaScript新闻

这是有趣的,如ASP.NET论坛的公共汽车如何,您突然会在快速继承中突然得到两个或更多人所要求的。最近,几个人要求帮助创建一个JavaScript Ticker,就像顶部的那样 BBC News site,它显示从数据库中汲取的选定数量的头标。我已经从BBC站点调整了代码,以创建类似的小部件,在前段时间在旧的经典ASP站点上显示最新线程。这是关于我的时间,我将其删除并更新为ASP.NET应用程序。

要保持相对简单的事情,我创建了股票代码作为用户控制,它是我原始服务器端的ASP.NET继承人包括文件。 ASCX文件将包含JavaScript,ASCX.CS文件将包含数据访问代码。首先是JavaScript:

 

< 脚本 =“javascript” 类型 =“文字/ javascript”>

 

var. 字符= 50;

var. StoryTimeout = 3000;

var. Symbolone =. '_' ;

var. symboltwo = ' - ' ;

var. symbolnone = '' ;

var. Leadstring =. '最新的:&nbsp;&nbsp;&nbsp;';

var. 头条新闻= 新的 Array();

var. 链接= 新的 Array();

var. ItemCount = 4;

 

< asp. : 文字 ID = “myticker” runat = “服务器” / >

 

功能 startiticker() {

 StoryCounter = -1;

 LengthCounter = 0;

 tickerlink = document.getElementById(“tickerlink” );

 runTicker();

}

 

功能 runticker() {

  var. Timeout;

  如果 (lengectcounter == 0){

  StoryCounter++;

  StoryCounter = StoryCounter%ItemCount;

  CurrentHeadline =头条新闻[Storycounter];

  targetlink =链接[Storycounter];

  tickerlink.href = targetlink;

  Prefix = "<SPAN Class = TICKER>" + Leadstring + "</span>";

 }

 

 tickerlink.innerhtml = prefix + currendheadline.substring(0,loadingCounter)+ getSymbol();

 

  如果 (LegradCounter!= CurrentHeadline.Length){

  LengthCounter++;

  Timeout = Charactidueout;

 }

  别的 {

  LengthCounter = 0;

  超时=故事时间;

 }

 setTimeout(“runticker()” , 超时);

}

 

功能 getsymbol() {

  如果 (lengeCounter == currentheadline.length){

   返回 SymbolNone;

 }

  如果 ((lowercounter%2)== 1){

   返回 SymbolOne;

 }

  别的 {

   返回 SymbolTwo;

 }

}

 

startticker();

</ 脚本 >

 

JavaScript从正在定义的一组变量开始。字符串和StoryTimeOut分别在标题中添加字符之间的延迟,并出现下一个故事。创建了三个符号,它给出了以字符附加到标题的字符运行的打字机或旧式电传型的外观。最后,和数组为标题设置为标题,一个用于链接,然后是股票管理器管理的标题总数。

接下来,添加ASP:文字控制。这将作为一个占位符,用于从数据库中检索的头条新闻和链接数组。接下来是这三个功能,这些功能是工作的:

startiticker()
startiticker()通过将一些计数器设置为起始值,然后定位它<a>标记将显示链接。这<a>尚未添加标记,但应显示在ASCX文件的顶部:

 

< div >

  <a ID = “tickerlink” href = “#” 风格= “文本装饰:无;”></a>

</ div >

 

最后,它调用了下一个功能:

runticker()
LeaderCounter持有当前标题内的当前位置。如果标题已经完成,则将计数器设置为0,将计数器设置为0。在-1处初始化的Storycounter设置为0,或者在数组中的下一个标题。还引用了匹配标题的链接。然后拍摄初始文本,并在A内设置<span>持有CSS类属性,以便它可以进行样式。然后是<a>链接文本设置为将当前标题与其链接一起保存,并使用getymbol()函数检索的符号。一些检查是计算是否已经写入了当前标题,或者在被写入的过程中,然后调用Runticker()函数,其中已确定超时的值。

getsymbol()
这个功能很简单。它所做的就是在符号之间交替 - 连字符或下划线 - 取决于是否在包含标题的字符串中达到的位置是奇数甚至是。如果已达到字符串HAS的末尾,则符号是空字符串。

最后一个函数,名为startiticker()。

现在到用户控制的代码文件:

 

StringBuilder. SB = 新的 StringBuilder. ();

细绳 Connect =. ConfigurationManager..conectionstrings [“myconnstring”] .ConnectionString;

使用 (SQLConnection. conn =. 新的 SQLConnection. (连接))

{

   细绳 查询= “通过Startics DESC选择”排名前4个物质“,”从文章订单“标题” ;

  SqlCommand cmd = 新的 SQLCommand. (查询,康涅狄格州);

  conn.Open();

  using (sqldatareader. RDR = CMD.EXECUTEREADER()))

  {

     i = 0;

     尽管 (rdr.Read())

    {

      sb.Append(“头条新闻[” + i.tostring()+ “] ='” + RDR [1] .tostring()+ “';” );

      sb.Append( “链接[” + i.tostring()+ “]] ='/ article.aspx?articleic=” + RDR [0] .tostring()+ “';” );

      i++;

    }

  }

}

myticker.text = sb.tostring();

 

这也很简单。记住参考系统.data.sqlclient,system.text和system.Configuration,代码只需连接到数据库,并将数据库中最近的4个标题与其ID一起获取,以便可以写入链接。在循环通过DATAREADER时,建立了一个StringBuilder对象,其中包含了标题和链接的文本。设置为为标题和一个用于填充在JavaScript中实例化的链接的数组来生成一个数组。最后,StringBuilder的内容将传递给ASCX文件中的文字控制。那就是它。

上面的Javascript乍一看看起来非常复杂,但希望你现在可以看到它实际上非常简单。