title: Passing object to a WebMethod through jquery ajax
body: <p>I am trying to pass an object to a page method defined. I'm trying to pass data to it collected from three textboxes.</p>
  
  <p><strong>Page Method</strong></p>
  
  <pre><code>    [System.Web.Services.WebMethod]
      public static string saveDataToServer(object csObj)
      {
          // Function Body.
      }
  </code></pre>
  
  <p><strong>Javascript/jQuery</strong></p>
  
  <pre><code>        $("#osmSendMsg").click(function () {
              debugger;
              var cntDetails = {
                   cntName : $("#osmContactName").val(),
                   cntEmail : $("#osmContactEmail").val(),
                   cntMsg : $("#osmContactMessage").val()
              }
              PostDataToServer(cntDetails,"Please wait...","/ContactUs.aspx/saveDataToServer","csObj");
          });
  </code></pre>
  
  <p><strong>PostDataToServer</strong></p>
  
  <pre><code>// Post data to server (ajax call).
  function PostDataToServer(dataToSend, strMessagetoShow, strMethodToCall, jsonObjectName) {
      debugger;
      /*
      dataToSend          Contains the JSON Object.
      submitType          1 == Normal Submit; 2 == Submit and Print.
      strMessagetoShow    Text that is displayed in the Please Wait Window.
      */
      var tempurl = strMethodToCall;
      var tempdata;
      $.ajax({
          url: tempurl,
          type: "POST",
          async: false,
          dataType: "json",
          data: "{" + jsonObjectName + ":" + JSON.stringify(dataToSend) + "}",
          //timeout: 30000,
          contentType: "application/json; charset=utf-8",
          success: function (data) {
              tempdata = data;
          },
          error: function (result) {            
              tempdata = null;
          }
      });  //end of the ajax call
      return tempdata;
  } //End of the post Data
  </code></pre>
  
  <p>Now the call is reaching the web method. No problem. I'm getting the object as well.But how do I process the object?</p>
  
  <p><img src="https://i.stack.imgur.com/0Ky27.png" alt="Data inside the object"></p>
  
  <p>As you can see, that's what I'm getting. I also tried declaring a class and passing it as the parameter..but all it's properties are empty. If you notice the data is appearing as a key, value pair. I could convert it into a Dictionary, but I believe that's a complicated solution.</p>
  
  <p><img src="https://i.stack.imgur.com/PJfqW.png" alt="Key - Value Pair"></p>
  
  <p>A simpler solution would be welcomed! </p>