Implementing Auto Save Feature Using ASP.NET Ajax and WCF Service


ASP.NET Ajax opens a lot of possibilities to provide users a rich user experience. At the
code level developers can create components, client behaviors or controls that
harness the power of ASP.NET and Ajax to provide features that are otherwise
difficult to offer. Ajax components are basically client side classes that
usually do not have any user interface. They inherit from Sys.Component base
class. Once inherited you can add your own properties, methods and events to
them in order to provide the necessary functionality. In this article you are
going to see how an Ajax component can be developed, that talks with the server side
data via a Windows Communication Foundation (WCF) service.

Example Scenario

Many web based email systems now a days offer a rich user interface. They
provide features such as automatically checking for new emails periodically and
automatically saving the messages you are still composing. The later feature can
be implemented in lengthy data entry forms. Imagine a scenario where a user is
presented with a lengthy data entry form. He starts filling the form and mid way
goes away for some other work. By the time he returns something causes the
browser to close or machine to restart (say a crash or power failure). Obviously
his data is lost since he didn’t submit the form. Wouldn’t it be nice if the web
form automatically saves the entered data on the server periodically so that the
web form state can be retrieved even after a crash? This is precisely what you
are going to develop in the remainder of the article.

At first glance you may think of using the UpdatePanel control along with Timer. Though you can achieve
similar results using UpdatePabel and Timer control there are a few limitations. Consider, for example, that
your form is too lengthy and you have placed everything inside an UpdatePanel. Now when UpdatePanel
refreshes the whole data entry form will be refreshed and the user will have to wait till it reappears. Also, saving selected fields
for auto save operation will be tedious and may call for a rearrangement of the data entry fields. So it is best to rollout your own
auto saving mechanism.

Software Needed

In order to work through the example that follows you need to have ASP.NET Framework
installed on your machine. Though the example is developed using Microsoft Visual
Studio 2010
even Visual Web Developer Express Edition can be used. Additionally,
you need SQL Server 2005 / 2008 database as our data will be stored there.

Creating a Web Site

To begin with, create a new ASP.NET Web Site using Microsoft Visual Studio. Figure
1 shows the "New Web Site" dialog. Give Web Site folder name as AutoSave.

 "New Web Site" dialog. Give Web Site folder name as AutoSave.
Figure 1

Adding SQL Server Database

Once the web site is ready you need to add a new SQL Server database. If you
have a stand-alone installation of SQL Server along with SQL Sever Management
Studio you can also create a database externally. To add a new database to your
web site locate the App_Data folder in Solution Explorer, right click on it and
choose "Add New Item…". The Add New Item dialog as shown in Figure 2 will be

choose "Add New Item...". The Add New Item dialog as shown
Figure 2

Select "SQL Server database" from the list, give the database the name of your choice and click the Add button. Once the
database is added double click on it in the Solution Explorer so as to open the Server Explorer. Expand the database node, right click
on the Tables node and choose Add New Table. This will open the table definition dialog as shown in Figure 3.

open the table definition dialog
Figure 3

Figure 3 shows a sample table named Article with five columns viz. Id, ArticleTitle, ArticleContent, SubmittedBy and SubmittedOn. Notice the data types of individual columns. Once the Articles table is created proceed to add a WCF
that works with the data from this table.

More by Author

Must Read