Creating a Comment Form with SQL and AJAX in C#

Quick Search

Navigator: Home - Retrieve - Creating a Comment Form with SQL and AJAX in .NET 3.5

Creating a Comment Form with SQL and AJAX in .NET 3.5

This tutorial will teach you how to create a web application that will allow new comments to be posted to a web site, using a SQL database and AJAX.

Server Intellect offers Windows Hosting Dedicated Servers at affordable prices. I'm very pleased!

Looking for more .NET Database Tutorials? Click Here!

Comment forms on website can provide a way for your visitors to quickly and easily offer their thoughts and opinions on your site - or any other subject. In this tutorial, we will be looking at how to create a Comment Form using a SQL Database. We will also be using 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 our 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>

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>

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 we can make this web page AJAX-enabled, which is extremely easy when using Visual Studio.NET 2008. Our ASPX 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>

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:

C#

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 and also view existing comments.

Looking for more .NET Database Tutorials? Click Here!

Try Server Intellect for Windows Server Hosting. Quality and Quantity!

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!