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

Category: AJAX

Creating an AJAX-Enabled Comment Form in ASP.NET


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:

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:

SelectCommand="SELECT name,comments,date FROM tblComments ORDER BY date DESC"
InsertCommand="INSERT tblComments (name,comments,date) VALUES (@name, @comments, @date)">

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.

SelectCommand="SELECT name,comments,date FROM tblComments ORDER BY date DESC"
InsertCommand="INSERT tblComments (name,comments,date) VALUES (@name, @comments, @date)">

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:

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:

Width="593px" CellPadding="4" ForeColor="#333333" GridLines="None">

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:



TextMode="MultiLine" Rows="4" Columns="50">

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:

Post Comment



TextMode="MultiLine" Rows="4" Columns="50">

Width="593px" CellPadding="4" ForeColor="#333333" GridLines="None">

SelectCommand="SELECT name,comments,date FROM tblComments ORDER BY date DESC"
InsertCommand="INSERT tblComments (name,comments,date) VALUES (@name, @comments, @date)">

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.


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!