Creating a Comment Form with SQL and AJAX in .NET 3.5 |
Introduction |
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. |
|
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: |
|
|
<form id="form1" runat="server">
<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"
<InsertItemTemplate>
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" />
</asp:FormView> |
|
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: |
|
|
<form id="form1" runat="server">
<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">
<InsertItemTemplate>
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"
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>
</ContentTemplate>
</asp:UpdatePanel>
<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> |
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 |
Now when we run this web application, we will be able to add new comments to the database and also view existing comments.
. |
|
