csQuery select element from manipulated dom?

Question

I am rendering the dom from a file which works just fine. Then I manipulate the dom with jQuery with a on click event.

My question is: How can I get the manipulated element from code behind now?

$(document).ready(function() {
  var x = $(".class");

  x.on("click", function() {
    $(this).addClass("editable");
  });
});

public static string filePath = HttpContext.Current.Request.PhysicalApplicationPath;
public static string file = filePath + "/templates/index.html";
public CQ dom = CQ.CreateFromFile(file);

protected void Page_Load(object sender, EventArgs e)
{
    var html = dom.Render();
    if (!IsPostBack)
    {
        Response.Write(html);
    }
}

protected void btnSave_OnClick(object sender, EventArgs e)
{
  var editable = dom.Select(".simplecms.editable").Text();
// Obviously this string will contain the value from the original dom, how can I retrieve the manipulated dom here?
}

Answer 1

Once the code is live in the browser, it will no longer (necessarily) reflect the structure in the file. The browser occasionally adds extra tags to its DOM model for normalization purposes even before you manipulate anything from jQuery. Because of this, you shouldn't expect to be able to retrieve it from the file system.

The standard answer at this point to any question that boils down, as this one does, to "How do I get data (of any kind) from my webpage to my server at runtime?" is to implement a REST interface on your server and use AJAX to send whatever data you need to the server. jQuery has a great AJAX interface, and you could easily do something like $(body).html() or $('.some#selector').html() to get a string representation to send to your server. The tricky part, depending on your server setup, might be setting up the REST interface, but that's a bit beyond the scope of this question. Once you've received the string from your REST endpoint, you should be able to use CQ.Create(htmlString) to generate your DOM for CsQuery.