html form to C# code-behind code

Question

I am trying to implement Sign Up api of Constant Contact. They gave me this HTML code. Runs properly if i save it as a HTML page.

What i want to do is convert this form to C# code that will execute onClick of a button. The HTML portion is looking fine but today is my first day with ASP.net and i have no idea what code to put in the code-behind .cs file. Searched a lot and am super confused.

This method is clicked when the submit button is clicked:

protected void buttonId_Click(object sender, EventArgs e)
{

}

Here is my ui side code:

<asp:TextBox ID="TextBox3" runat="server" class="name" value="First Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'First Name';}"></asp:TextBox>
<asp:TextBox ID="TextBox4" runat="server" class="name" value="Last Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Last Name';}"></asp:TextBox>
<asp:TextBox ID="TextBox2" runat="server" class="name" value="Join our mailing list" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Join our mailing list';}"></asp:TextBox><br>

<asp:Button id="buttonId" OnClick="buttonId_Click" class="btn btn-info sub1" runat="server" Text="SUBSCRIBE">

</asp:Button>

Here is the HTML code that i got from constant contact:

<form data-id="embedded_signup:form" class="ctct-custom-form Form" name="embedded_signup" method="POST" action="https://visitor2.constantcontact.com/api/signup">
   <p>Sign up to get interesting news and updates delivered to your inbox.</p>
   <!-- The following code must be included to ensure your sign-up form works properly. -->
   <input data-id="ca:input" type="hidden" name="ca" value="my-secrect-key">
   <input data-id="list:input" type="hidden" name="list" value="3">
   <input data-id="source:input" type="hidden" name="source" value="EFD">
   <input data-id="required:input" type="hidden" name="required" value="list,email">
   <input data-id="url:input" type="hidden" name="url" value="">
   <p data-id="Email Address:p" ><input data-id="Email Address:input" type="text" name="email" value="" maxlength="80"></p>
   <p data-id="First Name:p" ><input data-id="First Name:input" type="text" name="first_name" value="" maxlength="50"></p>
   <p data-id="Last Name:p" ><input data-id="Last Name:input" type="text" name="last_name" value="" maxlength="50"></p>
   <button type="submit" class="Button ctct-button Button--block Button-secondary" data-enabled="enabled">Sign Up</button>
</form>

Answer 1

Here's an example of some code you could put in your button OnClick event. This POST's data to another URL.

Hopefully you can figure out what's going on in this code. Basically it is building a string (data) with all of the data from the HTML form and submitting this to the other website using HTTP POST.

Most likely you would also need to check the response back from the other website.

string remoteUrl = "https://visitor2.constantcontact.com/api/signup";

ASCIIEncoding encoding = new ASCIIEncoding();
string data = "ca=my-secrect-key&list=3&source=EFD&required=list,email&url=&email=" + Server.UrlEncode(TextBox1.Text) + "&first_name=" + Server.UrlEncode(TextBox2.Text) + "&last_name=" + Server.UrlEncode(TextBox3.Text);
byte[] bytes = encoding.GetBytes(data);
HttpWebRequest httpRequest = (HttpWebRequest)WebRequest.Create(remoteUrl);
httpRequest.Method = "POST";
httpRequest.ContentType = "application/x-www-form-urlencoded";
httpRequest.ContentLength = bytes.Length;
using (Stream stream = httpRequest.GetRequestStream())
{
    stream.Write(bytes, 0, bytes.Length);
    stream.Close();
}