The comment system is very important nowadays. Everyone to hear from their user about their work. Comment system allows users to give their feedback.

In this blog, we are going to create a comment system using VB.net and XML Database. So let’s start to design comment system.


Figure1:

HTML Code

  1. <div id="CommentForm">
  2. <table>
  3. <tr>
  4. <td valign="top" >
  5. <br />
  6. <br />
  7. </td>
  8. <td>
  9. Your Name :
  10. <br />
  11. <asp:TextBox ID="author" runat="server" Width="350" CssClass="CommentInputBox" />
  12. <br />
  13. Email :
  15. <div class="DivDate">
  16. (Not be displayed)
  17. </div>
  18. <asp:TextBox ID="email" runat="server" Width="350" CssClass="CommentInputBox" />
  19. <br />
  20. <asp:RegularExpressionValidator ID="eRev" runat="server" ControlToValidate="email"
  21. Display="Dynamic" ErrorMessage="Not a valid email address." SetFocusOnError="True"
  22. ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" CssClass="CommentInputBox"
  23. ValidationGroup="comment"></asp:RegularExpressionValidator>
  24. Message :
  25. <br />
  26. <asp:TextBox ID="comment" runat="server" Width="350" CssClass="CommentInputBox" TextMode="MultiLine"
  27. Rows="2" Height="96px" />
  28. <br />
  29. <div id="CaptchaLabel">
  30. <asp:Image ID="lblResult" runat="server" ImageUrl="GetImage.aspx" Image
  31. AlternateText="" />
  32. </div>
  33. <div id="CaptchaVerify">
  34. Verification Number
  35. <br />
  36. <asp:TextBox ID="txtCaptcha" runat="server" Width="120" CssClass="CommentInputBox" />
  37. <br />
  38. <br />
  39. <br />
  40. <asp:Button ID="Button1" runat="server" Text="Submit Comment" OnClick="UploadComment"
  41. CssClass="CommentButton" ValidationGroup="comment" />
  42. </div>
  43. </td>
  44. </tr>
  45. </table>
  46. </div>
We use Verification system to avoid robot comment and spam filter.
  1. Private Function GenerateRandomCode() As String
  2. 'Generate a random number for the CAPTCHA image
  3. Dim s As String = ""
  4. For i As Integer = 0 To 5
  5. ss = s + Me.rand.Next(10).ToString()
  6. Next
  7. Return s
  8. End Function
Bind the XML file to display previous comment on the aspx page.
  1. Public Sub LoadData()
  2. 'Load the data from the XML file into the DataList
  3. Dim ds As DataSet = New DataSet
  4. Dim dt As DataTable
  5. dt = New DataTable("Comment")
  6. dt.Columns.Add("CommentText", System.Type.GetType("System.String"))
  7. dt.Columns.Add("Author", System.Type.GetType("System.String"))
  8. dt.Columns.Add("Email", System.Type.GetType("System.String"))
  9. dt.Columns.Add("DateStamp", System.Type.GetType("System.DateTime"))
  10. dt.ReadXml(Server.MapPath("xml\2.xml"))
  11. Dim Sort_Column_Key As String = "DateStamp"
  12. Dim Sort_Direction As String = " DESC"
  13. Dim Sort_Format As String = "{0} {1}"
  14. dt.DefaultView.Sort = String.Format(Sort_Format, Sort_Column_Key, Sort_Direction)
  15. ds.Tables.Add(dt.DefaultView.ToTable())
  16. DataList1.DataSource = ds
  17. DataList1.DataBind()
  18. '
  19. set captcha image
  20. SetCaptcha()
  21. End Sub
Add JavaScript Event to the fields for slick validation
  1. author.Attributes.Add("onClick", "if(this.value=='-- enter your name --'){this.value='';this.className='CommentInputBox';}")
  3. email.Attributes.Add("onClick", "if(this.value=='-- enter your email --'){this.value='';this.className='CommentInputBox';}")
  5. comment.Attributes.Add("onClick", "if(this.value=='-- enter a comment --'){this.value='';this.className='CommentInputBox';}")
  7. txtCaptcha.Attributes.Add("onClick", "if(this.value=='-- wrong code --'){this.value='';this.className='CommentInputBox';}")
On user, click checks the validation to add the comment in the XML file. I’m going to use UpdatePanel to display loading process on the use side. So let’s add some code for that.

Checking the validation of textbox and Captcha code to avoid the spam comment.
  1. 'validate text boxes
  2. If Len(author.Text) = 0 Or author.Text = "-- enter your name --" Then
  3. author.CssClass = "CommentInputBoxRed"
  4. author.Text = "-- enter your name --"
  5. doUpload = False
  6. End If
  8. If Len(comment.Text) = 0 Or comment.Text = "-- enter a comment --" Then
  9. comment.CssClass = "CommentInputBoxRed"
  10. comment.Text = "-- enter a comment --"
  11. doUpload = False
  12. End If
  15. If Len(email.Text) = 0 Or email.Text = "-- enter a email --" Then
  16. email.CssClass = "CommentInputBoxRed"
  17. email.Text = "-- enter a email --"
  18. doUpload = False
  19. End If
Checking the captcha code
  1. Dim tempString As String = Me.Session("CaptchaImageText")
  2. If String.Compare(tempString, Me.txtCaptcha.Text.Trim()) = 0 Then
  4. 'Code Functionality Here.
  5. Else
  6. txtCaptcha.CssClass = "CommentInputBoxRed"
  7. txtCaptcha.Text = "-- wrong code --"
  8. SetCaptcha()
  9. doUpload = False
  10. End If
If there are no validation error and captcha image code are correct then allow use submit their comment on the page. We are going to insert the comment in XML file.
  1. 'write the text to the XML file
  2. If doUpload Then
  3. Dim myxml As System.Xml.XmlDocument = New System.Xml.XmlDocument()
  4. myxml.Load(Server.MapPath("xml/2.xml"))
  6. Dim myxmlrecord As System.Xml.XmlElement = myxml.CreateElement("Comment")
  7. Dim myxmlfield As System.Xml.XmlElement
  8. Dim TodayDate As Date = Now
  10. myxmlfield = myxml.CreateElement("CommentText")
  11. myxmlfield.InnerText = XmlEncode(comment.Text)
  12. myxmlrecord.AppendChild(myxmlfield)
  14. myxmlfield = myxml.CreateElement("Author")
  15. myxmlfield.InnerText = XmlEncode(author.Text)
  16. myxmlrecord.AppendChild(myxmlfield)
  18. myxmlfield = myxml.CreateElement("Email")
  19. myxmlfield.InnerText = XmlEncode(email.Text)
  20. myxmlrecord.AppendChild(myxmlfield)
  22. myxmlfield = myxml.CreateElement("DateStamp")
  23. myxmlfield.InnerText = DateTime.Now.ToString("yyyy-MM-ddTHH:mm:ss.fffffff")
  24. myxmlrecord.AppendChild(myxmlfield)
  26. myxml.ChildNodes(1).AppendChild(myxmlrecord)
  27. myxml.Save(Server.MapPath("xml/2.xml"))
On success lets clear the textbox values and again load the data from XML database
  1. author.Text = ""
  2. email.Text = ""
  3. comment.Text = ""
  4. txtCaptcha.Text = ""
  6. LoadData();
Let’s set the captcha image again for a new comment. We have created a function in the above code so don’t have to write the same code again. Only we have to call the function here.
  1. SetCaptcha();
Result of Comment System


Figure 2:

I hope you enjoyed from the comment system development in asp.net using vb.net with XML database.

Thanks