title: Passing parameter in User control created dynamically by Ajax duplicate values
body: <p>I have a problem regarding User control and parameters that I send by the web form using Ajax.
  I’m using a user control that contains only a Label.</p>
  
  <pre><code>&lt;%@ Control Language="C#" AutoEventWireup="true" CodeFile="Message.ascx.cs" Inherits="Message" %&gt;
  &lt;asp:Label ID="lblMessage" runat="server" Text="lblMessage"&gt;&lt;/asp:Label&gt;
  </code></pre>
  
  <p>And a web form that contains this user control.
  I’m creating dynamically the user control in the web form (code behind):</p>
  
  <pre><code>public partial class _Default : System.Web.UI.Page
  {
      [WebMethod]
      public static string LoadUserControl(string message)
      {
          using (Page page = new Page())
          {
              UserControl userControl = (UserControl)page.LoadControl("Message.ascx");
              (userControl.FindControl("lblMessage") as Label).Text = message;
              page.Controls.Add(userControl);
              using (StringWriter writer = new StringWriter())
              {
                  page.Controls.Add(userControl);
                  HttpContext.Current.Server.Execute(page, writer, false);
                  return writer.ToString();
              }
          }
      }
  }
  </code></pre>
  
  <p>and passing the parameter from the web form to the user control like this:</p>
  
  <pre><code>    &lt;script type = "text/javascript"&gt;
  
          $(document).ready(function(){
  
              $("#demo").click(function () {
                  $.ajax({
                      type: "POST",
                      url: "CS.aspx/LoadUserControl",
                      data: "{message: '" + $("#message").val() + "'}",
                      contentType: "application/json; charset=utf-8",
                      dataType: "json",
                      success: function (r) {
                          $("#Content").append(r.d);
                      }
                  });
              });
          });
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form id="form1" runat="server"&gt;
      &lt;input type = "text" id = "message" /&gt;
      &lt;input type = "button" id = "demo" value = "Load" /&gt;
      &lt;div id  = "Content"&gt;
  
      &lt;/div&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The problem is when I click several times the button, the value in the “Content” is duplicated several times instead only once and refilled with the new value that I assigned to the textbox.
  Somebody know why? 
  I want, that every time that I click in the button, the user control receive the value and populate only once the info and not several times.</p>