Save Javascript Value Using C# Async Postback

Question

I have an Asp TextBox called txt_edit_content whose value is being copyed and manipulated using a JavaScript Wysiwyg. The formatted text is stored in a JavaScript variable that I can access like so:

var data = CKEDITOR.instances.<%=txt_edit_content.ClientID%>.getData();

What I'm attempting to do is send that value back to the server. So, I have registered the following JavaScript function with the Sys.WebForms.PageRequestManager

function BeginRequestHandler(sender, args) {
    try{
        var data = CKEDITOR.instances.<%=txt_edit_content.ClientID%>.getData();
        console.log("Textbox Before: " + $('#<%=txt_edit_content.ClientID%>').val());
        console.log("    Javascript: " + data);
        $('#<%=txt_edit_content.ClientID%>').val(data);
        console.log(" Textbox After: " + $('#<%=txt_edit_content.ClientID%>').val());
    } catch (err) {
        console.log("Error:" + err.message);
    }
}

And registering it like so:

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_beginRequest(BeginRequestHandler);

The JavaScript console output before the POST is made looks like so:

Textbox Before: 1234 
    Javascript: <p>1234567</p> 
 Textbox After: <p>1234567</p>

The issue I'm running into is that the value, even though it is being changed on page, isn't being sent to the server. However the 'Textbox Before' value is being sent. How can I get the value out of my JavaScript and into my code?

Edit: I can get this code to work using a PostBackTrigger but not AsyncPostBackTrigger on the 'Save' button. However, I need (would like) to use the AsyncPostBackTrigger on the 'Save' button.

Answer 1

Use an update panel and wrap a Hidden field in it. Then in your handler, set the value of the hidden field.

function BeginRequestHandler(sender, args) {
    try{
        var data = CKEDITOR.instances.<%=txt_edit_content.ClientID%>.getData();
        console.log("Textbox Before: " + $('#<%=txt_edit_content.ClientID%>').val());
        console.log("    Javascript: " + data);
        $('#<%=txt_edit_content.ClientID%>').val(data);
        console.log(" Textbox After: " + $('#<%=txt_edit_content.ClientID%>').val());
        $('#<%=hidValue.ClientID%>').val(data);

    } catch (err) {
        console.log("Error:" + err.message);
    }
}

Now in your code behind you can get the value of hidValue.

Answer 2

I was able to get it to work without using another field or having to add a handler to the PageRequestManager

By creating the following JavaScript function

function SaveWysiwig() {
    try{
        var data = CKEDITOR.instances.<%=txt_edit_content.ClientID%>.getData();
        $('#<%=txt_edit_content.ClientID%>').val(data);
    } catch (err) {
        console.log("Error:" + err.message);
    }
}

Then calling it through my save button like so:

<asp:LinkButton ID="savePage" runat="server" Text="Save" OnClientClick="SaveWysiwig();" OnClick="SavePage" />

I was able to get the JavaScript value stored in my textbox then pulled with my code-behind.