Introduction
This article explains how to automatically save a value into a SQL database using an ASP.Net WebMethod and jQuery Ajax.
Jquery
The following code shows that SaveDraft.aspx is the aspx page and AutoSave is the method. We pass the client-side value to the server-side using Ajax and WebMethod.
$(document).ready(function () { // Configure to save every 5 seconds window.setInterval(saveDraft, 5000);//calling saveDraft function for every 5 seconds }); // ajax method function saveDraft() { $.ajax({ type: "POST", contentType: "application/json; charset=utf-8", url: "SaveDraft.aspx/AutoSave", data: "{'firstname':'" + document.getElementById('Firstname').value + "','middlename':'" + document.getElementById('Middlename').value + "','lastname':'" + document.getElementById('Lastname').value + "'}", success: function (response) { } }); }
In the following code the saveDraft function fires every 5 seconds. The value will be saved in the database every 5 seconds without post-backs. Based on our requirements we can change the time interval.
$(document).ready(function () { // Configure to save every 5 seconds window.setInterval(saveDraft, 5000);//calling saveDraft function for every 5 seconds })
Database structure
Create a table in a database for storing the personal information. The following SQL code contains an existing person’s details. So we can change those values at runtime without a post-back and button-click.
USE [TestDB] GO /****** Object: Table [dbo].[Autosave] Script Date: 07/05/2016 11:19:54 ******/ SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO CREATE TABLE [dbo].[Autosave]( [Id] [int] NULL, [firstname] [nvarchar](50) NULL, [middlename] [nvarchar](50) NULL, [lastname] [nvarchar](50) NULL ) ON [PRIMARY] GO INSERT [dbo].[Autosave] ([Id], [firstname], [middlename], [lastname]) VALUES (1, N'Sachin', N'', N'Mortale')
C# Code
The WebMethod will catch the client-side value in the server side. In the given example I am passing the id directly into the update query. You can modify the code for your requirements.
[WebMethod] public static string AutoSave(string firstname, string middlename, string lastname) { int id = 1; string ConnectionString = System.Configuration.ConfigurationManager.ConnectionStrings["TestDb"].ConnectionString; SqlConnection con = new SqlConnection(ConnectionString); { string str = "Update Autosave set firstname='" + firstname + "',middlename= '" + middlename + "',lastname= '" + lastname + "' where Id=" + id + ""; SqlCommand cmd = new SqlCommand(str, con); { con.Open(); cmd.ExecuteNonQuery(); return "True"; } } }
Important Section
1. Namespace
The given namespace contains the WebMethod, database connection libraries.
using System.Web.Services; using System.Data.SqlClient;
2.Reference
Add the following jQuery reference.
http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js
Figure 1
Figure 2
Summary