使用 ASP.NET 和 JScript. NET的页命中计数器

分享于 

11分钟阅读

Web开发

  繁體 雙語

介绍

显示网站访问网页的数量有有时候使用显示为页面内容的一部分的计数器。 向用ASP或者 ASP.NET 编写的页面添加计数器相对较直,向纯HTML页面( 没有任何脚本的脚本) 添加计数器稍有不同。

本文介绍了使用 ASP.NET 创建( 请参见下图)的计数器。 ASP.NET 代码使用 GraphicsBitmap 类生成图像,使得在无客户端脚本的普通HTML页面上使用它变得容易。 代码还维护自己的小"数据库",这样你就不必转到你的Web服务器来创建一个新的计数器。 我为我的eBay清单和各种其他页面使用并设计这个计数器;结果是为了速度,所以它不使用数据库或者 XML ( 但是可以很容易地升级到这样做)。

Sample Counter

JScript. NET 概述

JScript. NET 是. NET 框架上可以用的编程语言之一,是的版本,是基于JavaScript的语言。 JScript. NET 非常类似于 C# 和 C++,因这里如果你知道你将立即在家里感觉到 JScript. NET.,那么你可以

JScript. NET 是面向对象的语言,支持类。继承。多态和所有其他流行的面向对象。 你还可以使用 JScript. NET 创建基于 Windows的应用程序( 具有GUI的应用程序)。Windows 服务。控制台应用程序。Web服务 和 ASP.NET 页面以及应用程序。

使用计数器

以下清单展示了如何轻松使用带有普通HTML的计数器:

<imgsrc="EWCounter.aspx?item=CodeProjectArticle">

标记属性的HTML imgsrc 指的是一个 ASP.NET 页面,用于处理从文件中检索计数器值的细节。 你可以添加指向图像的链接,使计数器单击能够,如下面的清单所示:

<ahref="http://www.designs2solutions.com"target="_blank"><imgsrc="EWCounter.aspx?item=CodeProjectArticle"border="0"></a>

管理计数器的数据

计数器使用 FileFileStreamStreamReaderStreamWriter 类访问的简单文本文件跟踪计数器的值。 每个文件包含在计数器和它的数据文件之间创建one-to-one关系的单个计数器的值,从而使计数器读取和更新速度更快。 以下列表显示计数器如何为不存在的计数器创建新文件:

var itm :String = Request.QueryString("item");//.. . elsewhere on the page.. .createCounter(itm);// etc...function createCounter(nameOfItem:String)
{
 var sw : StreamWriter;
 var filePath:String = Server.MapPath("data") + nameOfItem + ".txt";
 if(!File.Exists(filePath)) {
 sw=File.CreateText(filePath);
 sw.WriteLine("99");
 sw.Close();
 }
}

计数器的初始值为 99,使它的看起来像页面第一个访问者是to个访问者( 必须乐观)。 要新建计数器,请为 QueryString 上的item 指定一个新的惟一值,如前面的HTML代码所示。

检索和有选择地更新计数器值的代码很简单。 代码不执行任何随机访问,并仅使用 StreamReader 读取值并使用 StreamWriter 写入更新值,如下面的清单所示:

function getCounterValue(nameOfItem : String, readOnly : Boolean) : String
{
 var fileIn:StreamReader = 
 File.OpenText(Server.MapPath("data" + nameOfItem + ".txt"),
 FileMode.Open);
 var current : String = new String("");
 current = fileIn.ReadLine().ToString();
 fileIn.Close();
 if(readOnly)
 return current;
 var curInt : int = Convert.ToInt32(current);
 curInt++;
 var fs : FileStream = 
 new FileStream(Server.MapPath("data" + nameOfItem + ".txt"), 
 FileMode.Open,FileAccess.Write);
 var sw : StreamWriter;
 sw = new StreamWriter(fs);
 sw.WriteLine(Convert.ToString(curInt));
 sw.Close();
 fs.Close();
 return Convert.ToString(curInt);
}

代码使用 StreamReader.ReadLine 方法读取计数器的当前值,并可以使用 StreamReader.WriteLine 方法( 简单和快速) 更新它。

呈现计数器

计数器是一个简单的文本字符串,因这里代码使用 BitmapGraphics 类创建直接传送给客户端的图像。

代码所做的第一件事是创建一个 Bitmap 对象,该对象流到客户端并使用 Graphics 对象操作,如下面的清单所示:

function drawCounter(nameOfItem : String, readOnly : Boolean)
{
 // some code omitted for brevity... var height : int = 20;
 var width : int = 100;
 var bmp : Bitmap= new Bitmap(width, height);
 var g:Graphics = Graphics.FromImage(bmp);
 // Create a DarkBlue background g.FillRectangle(new SolidBrush(Color.DarkBlue), 0, 0, width, height);
 // LightGreen for the small box on the left... g.FillRectangle(new SolidBrush(Color.LightGreen), 0, 0, 26, 20);

前面的列表建立了两个对象,并创建了计数器的值,计数器的左侧是 logo。

计数器的logo 由三个字符组成: "d2s。你可以使用 Graphics.DrawString 方法将文本添加到位图。 然而,在这样做之前,需要建立文本和文本字体以及最后需要做的事情的颜色,如下面的清单所示:

var maroonBrush:SolidBrush= new SolidBrush(Color.Maroon);var blackBrush:SolidBrush= new SolidBrush(Color.Black);var counterByFont:Font = new Font("Verdana", 7, FontStyle.Bold);
g.DrawString("D", counterByFont,blackBrush, 0,5);
g.DrawString("2", counterByFont,maroonBrush, 8,2);
g.DrawString("S", counterByFont,blackBrush, 16,5);

由于 logo的内容不改变,所以的文本易于添加到位图中。 计数器的值会更改,因这里你需要更多地注意如何在封闭 rectangle 中定位它。 前面的清单一样,代码使用 FontSolidBursh 对象,如下所示:

var counterFont:Font = new Font("Verdana", 8, FontStyle.Bold);var whiteBrush:SolidBrush= new SolidBrush(Color.White);

在位图上定位某些东西时,可以将它定义为用要绘制的对象的顶部。左像素定义它。 由于计数器的长度可以变化( 当计数器的值增加时),因这里代码会测量计数器出现在封闭框中的长度。

var counterText : SizeF;
counterText = g.MeasureString(counterValue,counterFont);
g.DrawString(counterValue, counterFont, whiteBrush, 
 (bmp.Width)-((counterText.Width)+5),3);

这个简短的清单中有很多内容: 它首先根据使用 Graphics.MeasureString 方法和 SizeF 对象呈现的字体来测量计数器的值。 代码使用 Graphics.DrawString 呈现字符串,并将文本定位为从封闭框的边缘显示 3像素。

使用计数器可以显示,代码最后一件事是以JPG图像的形式交付给客户机:

bmp.Save(Response.OutputStream, ImageFormat.Jpeg);

限制计数器更新

目前所看到的代码在更新计数器时并不是很有选择性: 当用户刷新页面时,计数器会被更新。 大多数情况下,你都希望这样做,但是在某些情况下,你需要确保用户每隔几秒钟刷新一次页面,以更新计数器值。

解决这个问题的一个办法是使用一个 cookie,在设定的时间段之后过期。 如果cookie尚未过期,则计数器的值将不会被更新,但它仍然显示。 在 ASP.NET 中使用 Cookies 是相对直接的,只要知道过期cookie等效于 null/不存在的cookie。 下面的清单显示了管理cookie的代码,并设置 readOnly的值,确定计数器是否已经更新或者只显示:

var cookie:HttpCookie;
cookie = Request.Cookies("LastVisit");var readOnly:Boolean = (cookie!=null);
drawCounter(itm,readOnly);if(!readOnly) {
 cookie = new HttpCookie("LastVisit",DateTime.Now.AddSeconds(120));
 cookie.Expires = DateTime.Now.AddSeconds(60);
 Response.AppendCookie(cookie);
}

名为"lastvisit"的cookie的代码查询- 如果cookie不存在或者已经过期,则为 null。 显示和更新计数器后,代码再次评估 readOnly 生成新 cookie,以防这是第一次访问或者( 取决于 readOnly的值) 过期。 在本例中,代码将cookie设置为在两分钟内过期。 注意,这个解决方案可以能无法在所有情况下工作,但是(。用户可以配置他们的浏览器来拒绝第三方网站的Cookies )的浏览器可能会阻止'掺杂'的值。

摘要

本文描述了如何创建一个简单的页面点击计数器,它很容易与普通HTML一起使用。 代码使用 ASP.NET 和 JScript. NET 编程语言,包括 logo,自动创建新计数器,并防止用户人为地夸大计数器的值。

安装和使用示例代码

使用以下步骤安装示例:

  • 下载代码。
  • 将代码解压缩到系统上的文件夹。
  • 使用IIS管理工具或者文件夹的属性创建新的虚拟目录。
  • 在新虚拟目录下创建名为数据的文件夹。
  • 授予IIS用户帐户的读取,修改和写入权限。
  • 将浏览器指向新虚拟目录。

你应该看到一个包含短消息和计数器图像的页面。

<-----------------------------文章结束 -----------------------------> !

相关文章