In this article, I will explain how to save Asp.Net page values asynchronously (aka Gmail style of saving mail drafts).
Introduction: 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.
Solution:
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...
[System.Web.Script.Services.ScriptService]
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.
[System.Web.Script.Services.ScriptService]
public class WebService2 : System.Web.Services.WebService
{
[WebMethod]
public string HelloWorld()
{
return "Hello World";
}
[WebMethod]
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);
}
else
{
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">
<Services>
<asp:ServiceReference Path="~/AsynchronousSave.asmx" />
</Services>
</asp:ScriptManager>
And here is HTML of page
<div>
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;
//ProjName.WebServiceName.WebMethod
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);
</script>Reference:
http://msdn.microsoft.com/en-us/library/bb398998.aspx