asp+Ajax實現無刷新驗證碼功能

1。整個程序分爲兩個頁面組成。

  第一個頁面用來生成驗證碼的圖像

  第二個頁面是一個輸入頁面用來測試生成的驗證碼


下面是Validator.aspx內容,這個頁面是爲了生成一個隨機數的圖像,裏面有非常詳細的註釋

/*下面是Validator.aspx.cs的代碼*/ using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Drawing.Drawing2D;
using System.Drawing.Imaging;
using System.Drawing.Text;
using System.Drawing;
using System.Text;
using AjaxPro;
public partial class Validator : System.Web.UI.Page
{
private readonly string strPicPath = "images//Validator.jpg";

protected void Page_Load(object sender, EventArgs e)
{
string strOut = GetRandom(10000, 99999);
Session.Add("randomNum", strOut); //將隨機數保存到Session
OutImages(strOut);
}

/// <summary>
/// 得到一個指定範圍的隨機數
/// </summary>
/// <param name="MinNumeric">隨機數的最小選取範圍</param>
/// <param name="MaxNumeric">隨機數的最大選取範圍</param>
/// <returns>隨機數</returns>
private string GetRandom(int MinNumeric, int MaxNumeric)
{
long liResult = 0; //存放生成的隨機數
Random ro = new Random(); //產生一個隨機數實例
liResult = ro.Next(MinNumeric, MaxNumeric); //產生一個指定範圍之間的隨機數
return liResult.ToString(); //返回得到結果
}

/// <summary>
/// 將生成的隨機數寫入到生成的JPG文件中
/// </summary>
/// <param name="strOutput">生成的隨機數</param>
private void OutImages(string strOutput)
{
Bitmap bitMaping = new Bitmap(Server.MapPath(strPicPath)); //創建一個位圖文件得到它的句柄

Graphics graphicImage = Graphics.FromImage(bitMaping); //得到一個圖形對象

graphicImage.SmoothingMode = SmoothingMode.HighSpeed;//設置此圖形的畫筆模式爲高速

graphicImage.DrawString(strOutput, new Font("宋體", 16, FontStyle.Bold), SystemBrushes.WindowText, new Point(0, 0));

Response.ContentType = "image/jpeg"; //設置輸出格式

bitMaping.Save(Response.OutputStream, ImageFormat.Jpeg);//保存數據流

graphicImage.Dispose();

bitMaping.Dispose(); //釋放資源

}
}

下面是前端頁面這裏沒什麼講的,就只一個頁面而已
/*validator.aspx代碼段*/ <%@ Page Language="C#" CodeFile="Validator.aspx.cs" Inherits="Validator" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>驗證碼生成頁</title>
</head>
<body>
<form id="frmValidator" runat="server">
<div>

</div>
</form>
</body>
</html>


下面是Ajax的實現端,即前臺的驗證碼實現代碼段

<%@ Page Language="C#" CodeFile="Test.aspx.cs" Inherits="Test" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>無標題頁</title>
<script language="javascript" type="text/javascript">
// <!CDATA[

function Button1_onclick() {
var strInput = document.getElementByIdx("Text1").value;
var strMsg = "";
if( 1 == Test.CheckValidator(strInput).value)//調用ajax方法驗證數據
{
strMsg = "驗證碼正確";
}
else
{
strMsg = "驗證碼錯誤";
}
document.getElementByIdx("Label1").innerHTML = strMsg;

}

// ]]>
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
 <input id="Text1" type="text" />
<asp:Image ID="Image1" runat="server" ImageUrl="Validator.aspx" /><br />
<input id="Button1" type="button" value="驗證" οnclick="return Button1_onclick()" />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label></div>

</form>
</body>
</html>



這裏是後臺操作類
把前面存在Session中的代碼與通過Ajax方法傳進來的參數進行比較返回比較結果
再由Label標籤打印出結果


using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using AjaxPro;
public partial class Test : System.Web.UI.Page
{

protected void Page_Load(object sender, EventArgs e)
{
AjaxPro.Utility.RegisterTypeForAjax(typeof(Test));

}


[AjaxPro.AjaxMethod]
public int CheckValidator(string strInput)
{
int iState = 0;
if (strInput.Equals(Session["randomNum"].ToString()))
{
iState = 1;
}

return iState;

}

}

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章