AJAX-Enabled Comment Form in ASP.NET and C#

Category: AJAX

Creating an AJAX-Enabled Comment Form in ASP.NET

Introduction

In this article, we will be looking at how we can use Visual Studio to create a comment form, or guestbook to allow visitors of our web site to leave messages, in ASP.NET with the added functionality of AJAX. This means that the comments will almost immediately by added to a SQL database and displayed on the page without postback - the whole page will not be reloaded.

We are using Server Intellect and have found that by far, they are the most friendly, responsive, and knowledgeable support team we've ever dealt with!

What we will learn in this article:

How to implement AJAX functionality into our ASP.NET web applications;
How to create a comment form that will make use of AJAX to allow users to leave messages on your site.

Getting Started
The main part of our project will be the storage medium - in this case, a SQL Server Database. We will start by creating a new C# project in Visual Studio .NET 2008. If you are using 2005, you can still create this web application, but some additional steps may be required that are not covered in this article. For more information see the Microsoft AJAX Extensions for VS.NET 2005.

Once we have our project created, we will want to add our database. So right-click on the App_Data folder in Solution Explorer and choose Add New Item.. SQL Server Database. You can leave the name as Database.mdf or change it. Once it is created, go over to Server Explorer and expand the Database, then right-click the Tables folder and choose Add New Table. Here we will design our table for the comments. For this example we will create 4 columns - id, name, comments and date.

[Click to enlarge]

Notice that we have set the id column as Primary Key, and we also want it to be the Identity, so set Identity Specification and Is Identity to Yes in the properties for the id column.

[Click to enlarge]

Yes, it is possible to find a good web host. Sometimes it takes a while. After trying several, we went with Server Intellect and have been very happy. They are the most professional, customer service friendly and technically knowledgeable host we've found so far.

Now that we have set up our database, we can save the changes and close it down within VS.
Next, we will start to build our ASPX page. We will be using the ASP.NET Server Controls FormView, DataGrid and SqlDataSource. This will make it easier for us to allow comments added to the database by using the controls' built-in commands. Because of this, the only logic we will need to write is to add the date the comment is posted.

Let's start by adding the SqlDataSource. Drag the control onto the design or code view from the toolbox:

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

We can configure this in one of two ways - graphically, or manually. Let's switch to the design view and click on the Smart Tag of the DataSource:

[Click to enlarge]

Click Configure Data Source and then choose the ConnectionString from the DropDown:

[Click to enlarge]

We chose Server Intellect for its dedicated servers, for our web hosting. They have managed to handle virtually everything for us, from start to finish. And their customer service is stellar.

Click the Next button and check the Specify a custom SQL Statement or stored procedure, then hit Next again:

[Click to enlarge]

Here, we can specify custom SQL statements for SELECT, UPDATE, INSERT and DELETE. In this example, we will only be using SELECT and INSERT, so add the following to the respective boxes:

SELECT name,comments,date FROM tblComments

INSERT tblComments (name,comments,date) VALUES (@name, @comments, @date)

Hit Next once more and you can click the Test Query button if you'd like. Then click Finish. Our SqlDataSource is now all set to interact with our database, and the code looks like this:

<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:ConnectionString %>" 

SelectCommand="SELECT name,comments,date FROM tblComments ORDER BY date DESC"

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>

We migrated our web sites to Server Intellect over one weekend and the setup was so smooth that we were up and running right away. They assisted us with everything we needed to do for all of our applications. With Server Intellect's help, we were able to avoid any headaches!

Notice that the parameters are used for us to pass the data that will be stored in the database for the INSERT query.
The next thing we can do is create the DataGrid to display the current comments, and because we are enabling AJAX for this web application, we will go ahead and add the ScriptManager and UpdatePanel.
The ScriptManager will handle all the AJAX calls for us behind the scenes, and then the UpdatePanel will hijack postback requests and initiate an asyncronous postback, which reloads just what is within the UpdatePanel's ContentTemplate tags.

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

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

<ContentTemplate>

</ContentTemplate>

</asp:UpdatePanel> <asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:ConnectionString %>" 

SelectCommand="SELECT name,comments,date FROM tblComments ORDER BY date DESC"

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 will put only the FormView and DataGrid controls in the UpdatePanel, as we do not need to reload the DataSource when we add a new record - we will just update the FormView and DataGrid. The FormView needs to reside in the UpdatePanel because this will be the trigger for the asynchronous postback.
Drag a DataGrid control from the toolbox, or if it is not in your toolbox, just type into the code view:

<asp:DataGrid ID="DataGrid1" runat="server" DataSourceID="SqlDataSource1" Width="593px">

</asp:DataGrid>

We can easily modify the look of the DataGrid by clicking the Smart Tag in design view and choosing Auto Format, which will add the following extra tags and attributes:

<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>

We moved our web sites to Server Intellect and have found them to be incredibly professional. Their setup is very easy and we were up and running in no time.

To display the data from the database, all that is required is the DataSourceID of the DataGrid be set to that of the SqlDataSource we configured. The DataGrid control will automatically display the data once we do this.
We can now move on to adding the FormView control into the UpdatePanel:

<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>

Notice here that we bind a variable to the text attribute of the textbox and hidden field. This is so that when the form is submitted, our INSERT query on the SqlDataSource knows to use these. Also, the FormView control has a number of different templates, such as EditItemTemplate, EmptyDataTemplate, HeaderTemplate, etc. but we only need the InsertItemTemplate as we're only using the FormView control to insert new comments into the database.
Furthermore, we include a HiddenField control so that we can assign the current date to this and then pass that to the SqlDataSource when we submit the FormView. The FormView control handles the submitting automatically, just as long as we set the DataSource and the CommandName attributes. We will set the value of the HiddenField in page load of the code-behind, but first, this is what our ASPX page looks like now:

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

<strong>Post Comment</strong><br />

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

<ContentTemplate>

<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 ORDER BY date DESC"

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>

Need help with Windows Dedicated Hosting? Try Server Intellect. I'm a happy customer!

Now if we switch to the code-behind, we can assign the current date to our HiddenField:

protected void Page_Load(object sender, EventArgs e)

{
HiddenField hidDate = (HiddenField)FormView1.FindControl("hidTimeDate");

hidDate.Value = DateTime.Now.ToString();

}

Upon Page Load, we use the FindControl method because the HiddenField is within the FormView container, so we cannot locate it as normal. Then we simply assign today's date to the control's value. Now when the form is submitted, the value will be today's date, which will be added to the database.
When the web application is run, we are presented with a form and also a table displaying existing comments. We can add as many comments as we like, and they instantly appear in the table without the page reloading.

What we have Learned

We have learned how to create a Web Application that allows visitors to leave their comments and messages using an AJAX-enabled form.

Attachments

#1 vj Posted By: vj | 10.01.2008 at 5:21 AM

hello

#2 Courtney Remekie

Posted By: Courtney Remekie | 10.23.2008 at 5:12 PM

This site is funny

#3 awea

Posted By: awea | 10.29.2008 at 2:17 AM

awea awea awea said it's cool

#4 Saleem

Posted By: Saleem | 10.30.2008 at 1:09 PM

Wonderful site

#5 Nice

Posted By: Nice | 11.09.2008 at 1:26 PM

Nice

#6 Kourosh Saleh

Posted By: Kourosh Saleh | 11.09.2008 at 1:30 PM

nice article

#7 ismail

Posted By: ismail | 11.09.2008 at 3:46 PM

it is great!

#8 Kevin

Posted By: Kevin | 11.10.2008 at 12:42 AM

Hi there

#9 Thanigainathan.S

Posted By: Thanigainathan.S | 11.10.2008 at 2:00 AM

Hi,

This is really cool thing.

Thanks

#10 CareySon

Posted By: CareySon | 11.10.2008 at 4:43 AM

althought it was very elementary article,but it was good

#11 tester

Posted By: tester | 11.10.2008 at 7:12 AM

Testing if this is ajax

#12 hanif

Posted By: hanif | 11.10.2008 at 7:19 AM

Good article

#13 Emmao

Posted By: Emmao | 11.10.2008 at 8:07 AM

Great! Just Great!!

#14 Ivan

Posted By: Ivan | 11.10.2008 at 11:10 AM

Hi Everyone. Hope you enjoy Asp.Net

#15 Jo Posted By: Jo | 11.10.2008 at 11:29 AM

You should have at least used an AJAX method that didn't post the whole page back to the server. Wrapping an UpdatePanel around a control isn't a very good technique at all...

#16 Smarter

Posted By: Smarter | 11.10.2008 at 1:48 PM

For those who know better or just have big mouths: where is you approach with great programming practices?

#17 fawad

Posted By: fawad | 11.10.2008 at 11:07 PM

lovw it!!! thanks.....

#18 Abdul Rauf

Posted By: Abdul Rauf | 11.11.2008 at 5:58 AM

nice article

#19 ReTox

Posted By: ReTox | 11.11.2008 at 8:32 AM

This site is funny... no, this site is hilarious

#20 lance

Posted By: lance | 11.11.2008 at 1:02 PM

nice nice

#21 Chuck

Posted By: Chuck | 11.11.2008 at 5:01 PM

Would it function like this?

#22 vinoth

Posted By: vinoth | 11.12.2008 at 2:25 AM

i have to know how to set a identity number in a text box using c#.net

#23 tush

Posted By: tush | 11.12.2008 at 5:33 AM

Really very nice article.I will surly try this.

tush

#24 Isidro

Posted By: Isidro | 11.12.2008 at 7:59 AM

Thanks, nice

#25 Dk Posted By: Dk | 11.12.2008 at 3:32 PM

Testing email.

#26 me testing

Posted By: me testing | 11.12.2008 at 4:35 PM

Hi there!

#27 Neo

Posted By: Neo | 11.13.2008 at 7:44 PM

Hello

#28 Jm Posted By: Jm | 11.21.2008 at 11:45 AM

Snark

#29 SI13

Posted By: SI13 | 11.26.2008 at 4:29 PM

Thanks for info - easy to follow

#30 poo

Posted By: poo | 11.27.2008 at 9:40 AM

hehe, cool.

#31 mm Posted By: mm | 12.07.2008 at 11:30 AM

thanx alot

#32 ZKwaza

Posted By: ZKwaza | 12.09.2008 at 1:23 PM

great article

#33 dhiraj

Posted By: dhiraj | 12.12.2008 at 8:46 AM

gudd

#34 dimitris

Posted By: dimitris | 12.22.2008 at 6:18 PM

not bad at all

#35 Web Developer

Posted By: Web Developer | 12.24.2008 at 12:37 PM

What kind of services Server Intellect provide to you?

#36 Ben

Posted By: Ben | 1.03.2009 at 1:07 AM

how do i do the comment page something like this comment on this article in asp.net?

#37 Poolk

Posted By: Poolk | 1.04.2009 at 6:15 PM

very very cool

#38 yoyo

Posted By: yoyo | 1.05.2009 at 5:21 PM

testing ajax

#39 me Posted By: me | 1.09.2009 at 2:53 PM

yahe who baat hai

#40 jb Posted By: jb | 2.04.2009 at 8:38 PM

good work!!!

#41 varun

Posted By: varun | 2.09.2009 at 5:48 AM

super...

#42 Feyd

Posted By: Feyd | 3.13.2009 at 1:03 PM

this worked great!

thx! :)

#43 ankit

Posted By: ankit | 4.15.2009 at 3:39 AM

please tell me the source code how to built a comment

section in asp.net using c# ( VS2005). As a sites usually has.

please tell . It's urgent.

Thanks in advance........

#44 KAB

Posted By: KAB | 4.23.2009 at 4:01 PM

Gerat!

#45 logzy

Posted By: logzy | 5.10.2009 at 9:53 AM

not bad

#46 kienpv

Posted By: kienpv | 5.20.2009 at 7:41 AM

Great

#47 ash

Posted By: ash | 5.22.2009 at 4:03 PM

cool

#48 zunisun26

Posted By: zunisun26 | 5.23.2009 at 3:45 PM

wow, thats hard

#49 thank you

Posted By: thank you | 5.28.2009 at 7:42 AM

is this an article or some sort of marketing or seo ?

#50 Jibril

Posted By: Jibril | 6.06.2009 at 6:33 PM

This a pretty good example of what I been looking for.

#51 el Posted By: el | 6.19.2009 at 2:36 PM

Cool thanx, tho without a database would have been better

#52 history of online gambling

Posted By: history of online gambling | 6.23.2009 at 2:08 AM

I am familiar with the Ajax way of using xmlHttp.open and responseText to dynamically populate a Div with content from another page (such as FetchUsers.aspx?ID=1). But I’m trying to learn “AJAX 1.0″ and I cannot find examples of how to do this same thing using AJAX 1.0.Can anyone please point me to examples or tutorials that show this?

Thanks,

#53 ZK@Web Marketing Blog

Posted By: ZK@Web Marketing Blog | 6.29.2009 at 4:50 AM

The Web components of the NetAdvantage suite are highly similar to the Windows Forms components. This is especially apparent in the new ASP.NET-based styling tool, AppStylist. The ASP.T AppStylist resembles the version for Windows controls, but has Web-specific features such as an option to set the DocType to HTML 4.0 Transitional or XHTML 1.0 Transitional to reflect your Web application's style changes more faithfully.

#54 MaaNe

Posted By: MaaNe | 7.09.2009 at 7:07 AM

Very nice

#55 test

Posted By: test | 7.28.2009 at 8:37 PM

Comments:
Name:
Website:
Email:

Quick Search

Article Categories

AJAX-Enabled Comment Form in ASP.NET and C#

Leave a Comment

Comments on this Article

Post a Comment

Posted By: vj | 10.01.2008 at 5:21 AM

Posted By: Courtney Remekie | 10.23.2008 at 5:12 PM

Posted By: awea | 10.29.2008 at 2:17 AM

Posted By: Saleem | 10.30.2008 at 1:09 PM

Posted By: Nice | 11.09.2008 at 1:26 PM

Posted By: Kourosh Saleh | 11.09.2008 at 1:30 PM

Posted By: ismail | 11.09.2008 at 3:46 PM

Posted By: Kevin | 11.10.2008 at 12:42 AM

Posted By: Thanigainathan.S | 11.10.2008 at 2:00 AM

Posted By: CareySon | 11.10.2008 at 4:43 AM

Posted By: tester | 11.10.2008 at 7:12 AM

Posted By: hanif | 11.10.2008 at 7:19 AM

Posted By: Emmao | 11.10.2008 at 8:07 AM

Posted By: Ivan | 11.10.2008 at 11:10 AM

Posted By: Jo | 11.10.2008 at 11:29 AM

Posted By: Smarter | 11.10.2008 at 1:48 PM

Posted By: fawad | 11.10.2008 at 11:07 PM

Posted By: Abdul Rauf | 11.11.2008 at 5:58 AM

Posted By: ReTox | 11.11.2008 at 8:32 AM

Posted By: lance | 11.11.2008 at 1:02 PM

Posted By: Chuck | 11.11.2008 at 5:01 PM

Posted By: vinoth | 11.12.2008 at 2:25 AM

Posted By: tush | 11.12.2008 at 5:33 AM

Posted By: Isidro | 11.12.2008 at 7:59 AM

Posted By: Dk | 11.12.2008 at 3:32 PM

Posted By: me testing | 11.12.2008 at 4:35 PM

Posted By: Neo | 11.13.2008 at 7:44 PM

Posted By: Jm | 11.21.2008 at 11:45 AM

Posted By: SI13 | 11.26.2008 at 4:29 PM

Posted By: poo | 11.27.2008 at 9:40 AM

Posted By: mm | 12.07.2008 at 11:30 AM

Posted By: ZKwaza | 12.09.2008 at 1:23 PM

Posted By: dhiraj | 12.12.2008 at 8:46 AM

Posted By: dimitris | 12.22.2008 at 6:18 PM

Posted By: Web Developer | 12.24.2008 at 12:37 PM

Posted By: Ben | 1.03.2009 at 1:07 AM

Posted By: Poolk | 1.04.2009 at 6:15 PM

Posted By: yoyo | 1.05.2009 at 5:21 PM

Posted By: me | 1.09.2009 at 2:53 PM

Posted By: jb | 2.04.2009 at 8:38 PM

Posted By: varun | 2.09.2009 at 5:48 AM

Posted By: Feyd | 3.13.2009 at 1:03 PM

Posted By: ankit | 4.15.2009 at 3:39 AM

Posted By: KAB | 4.23.2009 at 4:01 PM

Posted By: logzy | 5.10.2009 at 9:53 AM

Posted By: kienpv | 5.20.2009 at 7:41 AM

Posted By: ash | 5.22.2009 at 4:03 PM

Posted By: zunisun26 | 5.23.2009 at 3:45 PM

Posted By: thank you | 5.28.2009 at 7:42 AM

Posted By: Jibril | 6.06.2009 at 6:33 PM

Posted By: el | 6.19.2009 at 2:36 PM

Posted By: history of online gambling | 6.23.2009 at 2:08 AM

Posted By: ZK@Web Marketing Blog | 6.29.2009 at 4:50 AM

Posted By: MaaNe | 7.09.2009 at 7:07 AM

Posted By: test | 7.28.2009 at 8:37 PM

Posted By: cool | 7.28.2009 at 8:37 PM

Posted By: coolnik999 | 7.31.2009 at 1:01 PM

Posted By: dianne a... | 8.08.2009 at 11:36 PM

Posted By: juan perez | 8.18.2009 at 8:45 PM

Posted By: juan perez | 8.18.2009 at 8:45 PM

Posted By: Making AJAX grid is not easy | 8.23.2009 at 9:23 AM

Posted By: Associate Degree Accreditation | 8.28.2009 at 11:57 PM

Posted By: Criminal Justice accreditation | 8.28.2009 at 11:58 PM

Posted By: Computer Science accreditation | 8.28.2009 at 11:58 PM

Posted By: Engineering education accreditation | 8.28.2009 at 11:59 PM

Posted By: Legal education accreditation | 8.28.2009 at 11:59 PM

Posted By: srinath | 10.06.2009 at 11:37 PM

Posted By: asdfasdf | 10.07.2009 at 3:46 PM

Posted By: Blake | 10.12.2009 at 5:47 PM

Posted By: ssssssssss | 10.22.2009 at 4:37 AM

Posted By: uuuuuuuuu | 10.22.2009 at 4:38 AM