How do I pass values from javascript (innerhtml) to asp.net codebehind without hidden input field?

Question

I have an aspx page (mainpage), that I use to populate some divs on another aspx page (popup) on button click using the window.loaded event. Code is below:

Script on mainpage.aspx

  <script type="text/javascript">

      window.callback = function (doc) {

          if (document.getElementById('GridView2') != null)
          {
              // Get Gridview HTML and wrap it with <table> tag
              var temp = document.getElementById('GridView2').innerHTML;
              var temp2 = "<table>" + temp + "</table>";

              doc.getElementById('foo').innerHTML = temp2; // this works fine
          }
          else
          {
              // GridView is missing, do nothing!
          }
      }

      function openWindow() {

          // Only open a new Compose Email window if there is a Gridview present
          if ((document.getElementById('GridView2') != null)) {
              var mywindow = window.open("Popup.aspx");
          }
          else {
              alert("Please create GridView first");
          }
      }

Code on Popup.aspx

    <script type="text/javascript">
    function loaded() {
        window.opener.callback(document);
        alert(document.getElementById('foo').innerHTML); //This alerts the code I need

        //var input = document.createElement("input");
        //input.setAttribute("type", "hidden");
        //input.setAttribute("name", "testinput");
        //input.setAttribute("runat", "server");
        //input.setAttribute("value", document.getElementById('foo').innerHTML);

        ////append to form element that you want .
        //document.getElementById("foo2").appendChild(input);
    }
</script>

<asp:Button OnClick="Send_Email_Button_Click" ID="SendEmail" Text="Send Email" CssClass="Button1" runat="server" />
            <div id="foo" runat="server">

            </div>

Popup.aspx.cs

protected void Send_Email_Button_Click(object sender, EventArgs e)
{
    string subject = String.Format("TEST EMAIL");
    string mailto = "me@mysite.com";
    string mailfrom = Environment.UserName + "@mysite.com";
    string mailBody = "<h1>Testing</h1>";

    MailMessage mail = new MailMessage(mailfrom, mailto, subject, null);
    mail.IsBodyHtml = true;
    mail.Body = mailBody;
    SmtpClient smtpClient = new SmtpClient("smtphost");
    smtpClient.Credentials = CredentialCache.DefaultNetworkCredentials;
    try
    {
        smtpClient.Send(mail);
    }
    catch (Exception ex)
    {

    }
}

Now, I'm stuck trying to pass the value of the div.innerhtml to codebehind, so I can create an email with this HTML markup. I tried using a hidden div, but I got an asp.net error about Request Validation: html code in an input field, which is a fair point. I can't seem to access div.InnerHtml. I get the value "\r\n\r\n". I have the value I need, but it's in Javascript, I just need a way to get this value to C# so I can send an email.

When I click on the SendEmail button, I get the alert again (because window.loaded is being called). How can I make it so that the Popup.aspx is only populate once, and not at every button click? And how to pass the innerhtml value to get SendEmail to work? Thanks so much for looking.

Answer 1

To send some data to code behind you have two methods. The Post and the Get.

The one is to send data with post back - meaning that you need to add them inside a hidden or other input control that send them with post.

The other is to add them to the url, as parameters.

Both of this methods can be used with ajax call. So select one and send your data to code behind.

About the message:

Request Validation: html code in an input field

This is security measure for general purpose, in your case if you know that you going to send html code on code behind, and you know how you control that, simple disabled it and do not worry - just be careful what you going to render later.

From MSDN Request Validation in ASP.NET:

This can be a problem if you want your application to accept HTML markup. For example, if your site lets users add comments, you might want to let users perform basic formatting using HTML tags that put text in bold or italics. In cases like these, you can disable request validation and check for malicious content manually, or you can customize request validation so that certain kinds of markup or script are accepted

Update

example code that works: Main page

<head runat="server">
    <title></title>

    <script type="text/javascript">
      window.callback = function (doc) {
            doc.getElementById('SendBack').value = escape("<b>send me back</b>"); 
      }

      function openWindow() {
            var mywindow = window.open("Page2PopUp.aspx");          
      }
    </script>

</head>
<body>
    <form id="form1" runat="server">
        <a href="#" onclick="openWindow();return false">open pop up</a>
    </form>
</body>
</html>

PopUp Page

<head runat="server">
    <title></title>
   <script type="text/javascript">
    function GetDataBack() {
        window.opener.callback(document);
    }
</script>
</head>
<body >
    <form id="form1" runat="server">
    <div>
        <input id="SendBack" name="SendBack" value="" type="hidden" />    
        <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" OnClientClick="GetDataBack()" />    
        <asp:Literal runat="server" ID="txtDebugCode"></asp:Literal>    
    </div>
    </form>
</body>
</html>

and read it :

protected void Button1_Click(object sender, EventArgs e)
{
    txtDebugCode.Text = Server.UrlDecode(Request.Form["SendBack"]);
}

Answer 2

So after a half day of breaking my head over this, I finally worked around dealing with client and server scripts by using just code-behind. I had never heard of Server.Transfer and Page.PreviousPage, so it serves me right, but it turns out it's just what I needed.

There is an excellent msdn article here that explains the concept in detail, but suffice it to say that you can access the previous page's controls if you use Server.Transfer to open the new page. Now I thought my troubles ended there, but apparently Server.Transfer is ancient and messes with the way UpdatePanel handles postbacks. Another brilliant article explaining problems and workarounds is here. I used the msdn article on PostBackTrigger to finally get my code to work.

And finally, mad props to Aristos, he sat and helped me through this, so I'm going to mark his answer as the right answer--since mine's an alternative and not the answer to my question. That's all, folks!