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