title: Javascript or Jquery Posting of data to ASP.NET from an html element defined in Javascript then getting the returned value and displaying it
body: <p><strong>I am required to use .Net 3.5 and This is what I have so far</strong></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;%@ Page Language="C#" AutoEventWireup="true" CodeFile="chooseElecDiv.aspx.cs" Inherits="chooseElecDiv" %&gt;
  
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head runat="server"&gt;
      &lt;meta charset="utf-8"/&gt;
      &lt;title&gt;Choose&lt;/title&gt;
      &lt;script src="js/classManipulator.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body class="body"&gt;
      &lt;form id="Form1" runat="server"&gt;
          &lt;div class="w-container header"&gt;
              &lt;div class="w-section w-clearfix header-section"&gt;
                  &lt;div class="header-link"&gt;Logout&lt;/div&gt;
                  &lt;div class="header-link"&gt;Manage&lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
          &lt;div class="w-container const-cont"&gt;
              &lt;div class="w-section const-section"&gt;
                  &lt;div id="const-details" class="const-details"&gt;&lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
          &lt;div class="w-container selection-cont"&gt;
              &lt;div class="w-section selection-section"&gt;
                  &lt;div class="w-row selection-row"&gt;
                      &lt;div id="opts-sel" class="w-col w-col-3 selected-col"&gt;
  
                      &lt;/div&gt;
                      &lt;div id="sel-opts" class="w-col w-col-9 options-col"&gt;
  
                      &lt;/div&gt;
  
                  &lt;/div&gt;
  
              &lt;/div&gt;
  
          &lt;/div&gt;
          &lt;script type="text/javascript" src="js/jquery.min.js"&gt;&lt;/script&gt;            
      &lt;/form&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>Javascript: located in js/classManipulator.js</strong></p>
  
  <p>Posts the value as json to ASP.NET</p>
  
  <pre><code>function saveAddresses() {
  $.ajax({
      type: "POST",
      url: "chooseElecDiv.aspx/saveAddresses",
      data: "{}",
      dataType: "json",
      contentType: "application/json; charset=utf-8",
      success: OnSuccess,
      error: OnError
  });
  }
  function OnSuccess(data) {
      alert(data);
  }
  function OnError(data) {
      alert(data);
  }
  
  
  window.onload = function(){
      var form = document.createElement("form");
      addMyClass(form, "ps-form");
      form.setAttribute("data-name", "Email Form");
      form.id = "email-form";
      form.name = "email-form";
      document.getElementById("const-details").appendChild(form);
  
      /*THIS CREATES THE BUTTON AND ADDS IT TO A PREVIOUSLY DEFINED FORM*/
      var saveButton = document.createElement("input");
      saveButton.setAttribute("data-wait", "Please wait...");
      saveButton.setAttribute("runat", "server");
      saveButton.type = "button";
      saveButton.value = "Save";
      saveButton.id = "savebtn";
      form.appendChild(saveButton);
      saveButton.addEventListener("click", saveAddresses);
  }
  </code></pre>
  
  <p><strong>ASP.NET</strong></p>
  
  <pre><code>using System;
  using System.Collections.Specialized;
  using System.Web.Services;
  using System.Web.Script.Services;
  using System.Collections.Generic;
  using System.ComponentModel.DataAnnotations;
  
  
  namespace ASPLoadDataJquery
  { 
      [MetadataType(typeof(chooseElecDiv))]
      public partial class chooseElecDiv : System.Web.UI.Page
      {
          protected void Page_Load(object sender, EventArgs e)
          {
  
          }
  
      [WebMethod]
      [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
      public static string SaveAddresses()
      {
          System.Threading.Thread.Sleep(5000);
          return "Hello tks";
      }
  
  }
  </code></pre>
  
  <p>}</p>
  
  <p>I would like to be able to send the json data to ASP.NET and have ASP.NET process and confirm receipt by responding. </p>
  
  <p>How do I get C# to detect the post request from the button without using elements defined as ASP.NET objects and processing them directly with the code behind? </p>
  
  <p>How do I get ASP.NET to receive the data that is posted as json?</p>
  
  <p><strong>I get error</strong></p>
  
  <pre><code>Compiler Error Message: ASPNET: Make sure that the class defined in
  this code file matches the 'inherits' attribute, and that it extends
  the correct base class (e.g. Page or UserControl).
  
  Source Error:
  Line 18: { 
  Line 19:     [MetadataType(typeof(chooseElecDiv))]
  Line 20:     public partial class chooseElecDiv : System.Web.UI.Page
  </code></pre>