Creating a Comment Form with SQL and AJAX

Navigator : Home > Tutorials > Database Tutorials > ...

Creating a Comment Form with SQL and AJAX

This tutorial will show you how to write a comment form web application in C# and VB.NET, using AJAX and a SQL database.

A comment form on your site can provide a way for your visitors to quickly and easily add their thoughts & opinions to your site. This tutorial will show you how to create a Comment Form using ASP.NET and a SQL Database. We will use the FormView, DataGrid and SqlDataSource controls.
In addition to this, we will make the web application more dynamic by adding AJAX functionality.

The first thing we will do is create the SQL database. We will have just one table with four columns - id, name, comments and date.
Once the database is created, we can start to build our ASPX page:

<strong>Post Comment</strong><br />
<asp:FormView ID="FormView1" runat="server" DataSourceID="SqlDataSource1"

DefaultMode="Insert">

<InsertItemTemplate>

</InsertItemTemplate>
</asp:FormView>

<asp:DataGrid ID="DataGrid1" runat="server" DataSourceID="SqlDataSource1"

Width="593px" CellPadding="4" ForeColor="#333333"
GridLines="None">
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<EditItemStyle BackColor="#2461BF" />
<SelectedItemStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<AlternatingItemStyle BackColor="White" />
<ItemStyle BackColor="#EFF3FB" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />

</asp:DataGrid>

<asp:SqlDataSource ID="SqlDataSource1" runat="server"

ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand="SELECT name,comments,date FROM tblComments"

InsertCommand="INSERT tblComments (name,comments,date) VALUES (@name, @comments, @date)">
<InsertParameters>

<asp:Parameter Name="name" />
<asp:Parameter Name="comments" />
<asp:Parameter Name="date" />

</InsertParameters>

</asp:SqlDataSource>

</form>

We used over 10 web hosting companies before we found Server Intellect. Their dedicated servers and add-ons were setup swiftly, in less than 24 hours. We were able to confirm our order over the phone. They respond to our inquiries within an hour. Server Intellect's customer support and assistance are the best we've ever experienced.

Next, we can build our FormView Insert template:

<asp:FormView ID="FormView1" runat="server" DataSourceID="SqlDataSource1"

DefaultMode="Insert">

Name: <asp:TextBox ID="txtName" runat="server" Text='<%# Bind("name") %>'></asp:TextBox><br />
Comments:<br />
<asp:TextBox ID="txtComments" runat="server" Text='<%# Bind("comments") %>'

TextMode="MultiLine" Rows="4" Columns="50"></asp:TextBox><br />

<asp:HiddenField ID="hidTimeDate" runat="server" Value='<%# Bind("date") %>' />
<asp:Button ID="butSubmit" runat="server" CommandName="Insert" Text="Submit" />

</InsertItemTemplate>
</asp:FormView>

If you're looking for a really good web host, try Server Intellect - we found the setup procedure and control panel, very easy to adapt to and their IT team is awesome!

Now we can make this web page AJAX-enabled, which is extremely easy when using Visual Studio.NET 2008; we just need to add a ScriptManager and an UpdatePanel. Our ASPX page will now look something like this:

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>

<strong>Post Comment</strong><br />
<asp:FormView ID="FormView1" runat="server" DataSourceID="SqlDataSource1"

DefaultMode="Insert">

Name: <asp:TextBox ID="txtName" runat="server" Text='<%# Bind("name") %>'></asp:TextBox><br />
Comments:<br />
<asp:TextBox ID="txtComments" runat="server" Text='<%# Bind("comments") %>'

TextMode="MultiLine" Rows="4" Columns="50"></asp:TextBox><br />

<asp:HiddenField ID="hidTimeDate" runat="server" Value='<%# Bind("date") %>' />
<asp:Button ID="butSubmit" runat="server" CommandName="Insert" Text="Submit" />

</InsertItemTemplate>
</asp:FormView>

<asp:DataGrid ID="DataGrid1" runat="server" DataSourceID="SqlDataSource1"

</asp:DataGrid>

</ContentTemplate>
</asp:UpdatePanel>

<asp:SqlDataSource ID="SqlDataSource1" runat="server"

<asp:Parameter Name="name" />
<asp:Parameter Name="comments" />
<asp:Parameter Name="date" />

</InsertParameters>

</asp:SqlDataSource>

</form>

Server Intellect assists companies of all sizes with their hosting needs by offering fully configured server solutions coupled with proactive server management services. Server Intellect specializes in providing complete internet-ready server solutions backed by their expert 24/365 proactive support team.

Now the only thing left to do is write code that will assign the current time to the hidden field. We will do this on Page Load:

public partial class _Default : System.Web.UI.Page
{

protected void Page_Load(object sender, EventArgs e)
{

HiddenField hidDate = (HiddenField)FormView1.FindControl("hidTimeDate");
hidDate.Value = DateTime.Now.ToString();

}

VB.NET

Partial Public Class _Default

Inherits System.Web.UI.Page

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)

Dim hidDate As HiddenField = CType(FormView1.FindControl("hidTimeDate"), HiddenField)
hidDate.Value = DateTime.Now.ToString()

End Sub

End Class

Now when we run this web application, we will be able to add new comments to the database as well as view existing comments.

Looking for more .NET Tutorials? Click Here!

Download Project Source - Enter your Email to be emailed a link to download the Full Source Project used in this Tutorial!

100% SPAM FREE! We will never sell or rent your email address!