About the author

Vijay Kodali
E-mail me Send mail

Recent comments



The opinions expressed herein are my own personal opinions and do not represent my employer's view in anyway.

© Copyright 2024

Auto save Asp.net form values Asynchronously

In this article, I will explain how to save Asp.Net page values asynchronously (aka Gmail style of saving mail drafts).  


In the past, Web applications were known for having less usable, less responsive user interfaces. AJAX changed all of that. The application can work asynchronously and the user doesn't have to sit and wait for pages to refresh. :

What is Ajax?

Ajax (Asynchronous JavaScript and XML) is an approach to web development that uses client-side scripting to exchange data with a web server. 


There are several ways of achieve it. In this article I am using AJAX functionality to call ASP.NET Web services from the browser by using client script. Yes, no updatepanel.  

Start by adding a web service to the project as shown below, name it as AsynchronousSave.asmx. Make this web service accessible from Script, by setting class qualified with the ScriptServiceAttribute attribute...  

public class AsynchronousSave : System.Web.Services.WebService 

Here is the AsynchronousSave webservice class: 
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
public class WebService2 : System.Web.Services.WebService

    public string HelloWorld()

        return "Hello World";


    public string SaveInput(String input)
        string StrInput = Server.HtmlEncode(input); if (!String.IsNullOrEmpty(StrInput))

            string[] strFields = StrInput.Split('+');

            //code to save all input values
            // you can easily savethese values to temp DB table, temp file or xml file
            //Dispaly last saved values

            return String.Format("Last saved text: FirstName {0} ,<br/> Last name {1} <br/> Last "

            + "saved draft {2} at {3}.", strFields[0], strFields[1], strFields[2], DateTime.Now);



            return ""; //if input values are empty..retrun empty string
Nothing fancy here, just methods marked with [WebMethod] attribute. The Saveinput method takes an input string with “+” as delimiter between form values.  

To enable web service to be called from client side, add script manager to page  

<asp:ScriptManager runat="server" ID="scriptManager">
        <asp:ServiceReference Path="~/AsynchronousSave.asmx" />

And here is HTML of page

    First Name:<asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox></br> 
    LastName:<asp:TextBox ID="txtLastName" runat="server"></asp:TextBox></br> 
    Draft :<asp:TextBox ID="txtDraft" runat="server"></asp:TextBox></br></div>
<div id="Preview">

The following example shows the java script that makes service calls

<script language ="javascript" >
    //This function calls the web service    
    function SaveUserInput() {
        var fName = document.getElementById("txtFirstName");
        var lName = document.getElementById("txtLastName");
        var draft = document.getElementById("txtDraft");
        //Saving all input in a single value         
        var input = fName.value + "+" + lName.value + "+" + draft.value;
        SampleApplication1.AsynchronousSave.SaveInput(input, SucceededCallback);
    // This is the callback function that processes the Web Service return value.     
    function SucceededCallback(result) {
        var divPreview = document.getElementById("Preview");
        divPreview.innerHTML = result;
    // execute SaveUserInput for every 10 sec, timeout value is in miliseconds
    window.setInterval('SaveUserInput()', 10000); 




Posted by vijay on Monday, November 23, 2009 2:17 PM
Permalink | Comments (0) | Post RSSRSS comment feed

Add comment

(Will show your Gravatar icon)

  Country flag

  • Comment
  • Preview