در این مقاله ، نشان می دهیم که چگونه با استفاده از ASP.Net WebMethod و jQuery Ajax می توان مقادیر داده را به طور اتوماتیک در پایگاه داده SQL ذخیره کرد.

jQuery:

کد زیر نشان می دهد که SaveDraft یک صفحه aspx و AutoSave یک متد است. در این کد، با استفاده از WebMethod و Ajax داده های سمت کلاینت را به سمت سرور ارسال می کنیم.

$(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) {  
  
      }  
  
  });  
} 

در قطعه کد زیر، متد SaveDraft هر 5 دقیقه یکبار فراخوانی می شود. مقادیر هر 5 دقیقه یکبار بدون نیاز به Postback در پایگاه داده ذخیره می شوند. با توجه به نیازمان می توانیم این زمان را تغییر دهیم.

    $(document).ready(function () {  
         // Configure to save every 5 seconds  
         window.setInterval(saveDraft, 5000);//calling saveDraft function for every 5 seconds  
      
    });   

ساختار پایگاه داده:

یک جدول برای ذخیره اطلاعات اشخاص می سازیم. کد SQL زیر، شامل جزییات اطلاعات اشخاص موجود در پایگاه داده است که می توانیم آن را در زمان اجرا و بدون Postback و هیچ کلیکی تغییر دهیم.

    USE [TestDB]  
    GO  
    /****** Object:  Table [dbo].[Autosave]    Script Date: 08/07/2015 18: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'علی', N'', N'امیری')   

#C:

WebMethod، مقدار ارسال شده از سمت کلاینت را در سمت سرور می گیرد. در مثال زیر، ما id را به صورت مستقیم به کوئری update ارسال کردیم. شما نیز می توانید، کد را بنا به نیاز خود تغییر دهید.

[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";  
            }  
        }  
  
    }

و اما بخش مهم:

1. فضای نام

فضای نام های زیر شامل کتابخانه های WebMethod و Database Connection می باشند که باید به پروژه خود اضافه کنیم.

    using System.Web.Services; 
    using System.Data.SqlClient;   

2. Refrence

jquery refrence زیر را نیز اضافه می کنیم.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>  
script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script> 

خروجی: