How to Save Asp.net HTML Editor Content Using AJAX with Time Interval???

When you are working with the ajax editor control sometimes you need to store the content in database or xml. Most of the time we need the content as same when we are navigating through the website. To achieve this i flowed these steps:

1. Create the masterpage and add the editor to that page.
2.  Using AJAX to save the content to the session variable with the time interval
3. Call the session variable and assign the content to editor from master pages using onInit() method.

first create the Ajax control toolkit editor in the masterpage using the below code
  

<cc1:editor height="530px" id="Editor1" oncontentchanged="editor_content_load" runat="server">
</cc1:editor>

Add service class(.asmx) for whatever thing you want to do in the server side. In my case i created falconsService.asmx and created the method for save the editor content to the session variable.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Script.Services;
using System.Web.Services;


namespace falcons
{
    /// 
    /// Summary description for FalconsService
    /// 
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    [ScriptService]
    // 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 FalconsService : System.Web.Services.WebService
    {

        [WebMethod(EnableSession = true)]
        public string SaveToSession(string editorContent,string title)
        {
            string result;
            string EditorContent = editorContent;
            string Title = title;
            if ((EditorContent !="") && (Title!=""))
            {
                HttpContext.Current.Session.Add("editor_content", (String)EditorContent);
                HttpContext.Current.Session.Add("content_title", title);
                result = "content saved";
            }
            else if ((EditorContent !="") && (Title== ""))
            {
                HttpContext.Current.Session.Add("editor_content", (String)EditorContent);
                result = "edior content saved!! no title found!! add title too...";
            }
            else if((EditorContent == "") && (Title!=""))
            {
                HttpContext.Current.Session.Add("content_title", title);
                result = "no content found in editor";
            }
            else
            {
                 result="nothing found";
            }

            return result;
        }
    }
}

Then you need to create AJAX function to get the content from editor and pass that to the server side method

setInterval(function SaveSession() {
    var content = document.getElementById('Editor1_ctl02_ctl00').contentWindow.document.body.innerHTML;
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "FalconsService.asmx/SaveToSession",
        dataType: "json",
        data: "{'editorContent':'" + content + "','title':'" + $('#ContentTitle').val() + "'}",
       
    });
},5000);

After that you need to add the reference for the .asmx file using script manager.For using ajax control toolkit editor we need to add ajax control toolkit script manager. So i used that one for add the service reference.

<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
                <Services>
                    <asp:ServiceReference Path="~/FalconsService.asmx"/>
                </Services>
</ajaxToolkit:ToolkitScriptManager> 

Finally we need to add web service protocalls to web.config file too.

<system.web>
    <webServices>
        <protocols>
            <add name="HttpGet"/>
            <add name="HttpPost"/>
        </protocols>
    </webServices>
</system.web>

Thats all !!! Now the editor content will saved to session variable each 5 seconds. If you want the content loaded when navigating just call the session variable and assign the content to editor in the masterpage preInit() method.