Implement a verification code mixed with numbers and characters in ASP. NET

Many articles only describe how to output a random number or character image. Of course, this is the core of the verification code, but for many ASP. NET beginners, how to use the image generated by it has become a problem (many questions in the Forum), which is also one of the reasons I wrote this article.

For more information about the principles of the verification code, see other articles. The complete example code is provided at the end of this article, which contains detailed notes. You can skip the explanatory text and use it directly.

First, let's briefly talk about the usage of Session and ViewState, because it will be used later.

Store data in the Session: Session ("key") = "test"
Value from Session: dim testvalue as string = Session ("key ")
Similar:
Store data in ViewState: ViewState ("key") = "test"
Value From ViewState: dim testvalue as string = ViewState ("key ")

For more information about ViewState, see <ASP. NET ViewState> In MSDN.
Sometimes the Code itself is more expressive than any explanation, so there are too many explanations for the code here. The Verification Code implemented in this article requires two files:
Gif. aspx this file is used to generate a verification code
ValidateCode. aspx this file is used to test the verification code (that is, how to use it)

The complete gif. aspx code is provided below:

<% @ Import namespace = "System" %>
<% @ Import namespace = "System. io" %>
<% @ Import namespace = "System. Drawing" %>
<% @ Import namespace = "System. Drawing. Imaging" %>
<Script language = "vb" runat = "server">
Sub Page_Load (Sender as object, e as eventargs)
'Rndnum is a UDF.
Dim VNum as string = RndNum (4)
Session ("VNum") = VNum
ValidateCode (VNum)
End Sub
'Image verification code generation function
Sub ValidateCode (VNum)
Dim Img as System. Drawing. Bitmap
Dim g as Graphics
Dim MS as MemoryStream
Dim gheight as integer = Int (Len (VNum) * 11.5)
'Gheight indicates the image width. The image width is automatically changed based on the Character length.
Img = new BitMap (Gheight, 20)
G = Graphics. FromImage (img)
G. drawString (VNum, (New Font ("Arial", 10), (New SolidBrush (color. blue), 3, 3) 'draw the string, Font, paint color, top left x in the rectangle. y on the top left)
MS = New MemoryStream ()
Img. Save (MS, ImageFormat. Png)
Response. ClearContent () 'needs to output image information to modify the HTTP Header
Response. ContentType = "image/Png"
Response. BinaryWrite (ms. ToArray ())
G. Dispose ()
Img. Dispose ()
Response. End ()
End Sub
'--------------------------------------------
'Function name: RndNum
'Function parameter: VcodeNum -- set the number of digits of the returned random string
'Function: generate a random string mixed with numbers and characters
Function RndNum (VcodeNum)
Dim Vchar as string = ", A, B, C, D, E, F, G, H, I, J, K, L, m, N, O, P, Q, R, S, T, U, W, X, Y, Z"
Dim VcArray () as string = split (Vchar, ",") 'generates an array of strings
Dim VNum as string = ""
Dim I as byte
For I = 1 to VcodeNum
Randomize
VNum = VNum & VcArray (Int (35 * Rnd) 'array is generally read from 0, so here it is 35 * Rnd
Next
Return VNum
End Function
</Script>

The following code shows how to use the image verification code generated by the file:
<Asp: Image id = "Image1" runat = "server" ImageUrl = "gif. aspx"/>
This is the Image control used to display the verification code. You can place it wherever you like. The following provides detailed code for use. You can save it as ValidateCode. aspx and associate it with gif. put aspx in the same directory and open ValidateCode in the browser. aspx, you can test its effect:
<Script language = "vb" Runat = "Server">
Sub Page_Load (Sender as object, e as eventargs)
Dim VNum as string = Session ("VNum ")
Session. Abandon ()
ViewState ("VNum") = VNum
End Sub
'The following Event code is used to test the verification code and can be changed as needed.
Sub btnSubmit_click (sender as object, e as eventargs)
'Determine whether the entered verification code is the same as the given Verification Code
If txtValidateCode. text = Cstr (ViewState ("VNum") then
LblShow. text = "<font color = 'red'> tip: Pass verification </font>"
Else
LblShow. text = "The entered verification code is inconsistent with the given verification code"
End If
End Sub
</Script>
<Html>
<Body>
<Form runat = "server">
<Div align = "center">
& Lt; table width = "750" & gt;
<! -- DWLayoutTable -->
<Tr>
<Td width = "256" height = "46"> </td>
<Td width = "9"> </td>
<Td width = "88"> </td>
<Td width = "87"> </td>
<Td width = "100"> </td>
<Td width = "68"> </td>
<Td width = "97"> </td>
</Tr>
<Tr>
<Td height = "21"> </td>
<Td> </td>
<Td colspan = "3" valign = "top"> <asp: label ID = "lblShow" runat = "server"> </asp: label> </td>
<Td> </td>
<Td> </td>
</Tr>
<Tr>
<Td height = "14"> </td>
<Td> </td>
<Td> </td>
<Td> </td>
<Td> </td>
<Td> </td>
<Td> </td>
</Tr>
<Tr>
<Td height = "21"> </td>
<Td colspan = "2" valign = "middle"> Verification Code: </td>
<Td valign = "top"> <asp: Image id = "Image1" runat = "server" ImageUrl = "gif. aspx"/> </td>
<Td> </td>
<Td> </td>
<Td> </td>
</Tr>
<Tr>
<Td height = "20"> </td>
<Td colspan = "2" valign = "top"> enter the verification code: </td>
<Td valign = "top"> <asp: textbox ID = "txtValidateCode" runat = "server" TextMode = "SingleLine"/> </td>
<Td colspan = "2" valign = "middle"> <font color = "# FF0000" size = "2"> * Note: Case Sensitive </font> </td>
<Td> </td>
</Tr>
<Tr>
<Td height = "25"> </td>
<Td> </td>
<Td> </td>
<Td> </td>
<Td> </td>
<Td> </td>
<Td> </td>
</Tr>
<Tr>
<Td height = "19"> </td>
<Td> </td>
<Td> </td>
<Td valign = "top"> <asp: button ID = "btnSubmit" runat = "server" Text = "Compare" onclick = "btnSubmit_click"/> </td>
<Td> </td>
<Td> </td>
<Td> </td>
</Tr>
</Table>
</Div>
</Form>
</Body>
</Html>