How to pass Javascript object to server side c# page method RSS

• • Reply
  

  jfrasco

  Member

  21 Points

  14 Posts

  How to pass Javascript object to server side c# page method

  Nov 08, 2012 08:37 PM|LINK

  I am using Javascript in my page to collect the values of the text fields using name/value pair and then using JQuery.Post to send it to a Web Method in an ASPX page in the same project. The page and method is identified in the URL part of the Post and the Data part is passing the object that was created to the C# method. I declared my method parameter to be the same class, WorkOrder, so it is strongly typed but it does not work. If I hard code a name and an interger pair in the Post for data and change the variable for the method to methodname(int WorkOrder) then it works, I just can't make it work for the object I am passing to it.

  Thank you for any assistance with this issue. 

• • Reply
  

  BrockAllen

  All-Star

  27524 Points

  4902 Posts

  MVP

  Re: How to pass Javascript object to server side c# page method

  Nov 08, 2012 08:45 PM|LINK

  When you post do you set the content type in the request header to "application/json" and JSON.stringify the data in the body?

  Brock Allen | http://brockallen.com
  DevelopMentor | http://www.develop.com
  thinktecture | http://www.thinktecture.com/
• • Reply
  

  jfrasco

  Member

  21 Points

  14 Posts

  Re: How to pass Javascript object to server side c# page method

  Nov 08, 2012 11:59 PM|LINK

  1. The WorkOrder_Events.js function is called when the UpdateWorkOrder item is clicked.

  2. The WorkOrder object is created by the WorkOrder_Event functions then calls the updateWorkOrder() function in the WorkOrder_Functions.js file passing in the WorkOrder object.

  3. The updateWorkOrder() function uses the Ajax.Post action to call the WebMethod UpdateWorkOrderDetail in the C# WorkOrder_Methods.aspx page and passes the Javascript object. I am using entity framework and WorkOrder is one of the Models mapping the database table. This is where it fails.

  Here is the code:

  // WorkOrder_Detail.html
  <table id="WorkOrderMenu">
      <tr>
          <td id="AddWorkOrder"><a href="#">Add</a></td>
          <td id="UpdateWorkOrder"><a href="#">Update</a></td>
          <td id="DeleteWorkOrder"><a href="#">Delete</a></td>
      </tr>
  </table>
  <table id="WorkOrderList" border="1">
    <tbody>
      {#foreach $T.d as post}
          <tr>
              <td colspan="1">Work Order ID: </td>
              <td colspan="3"><input id="txtID" type="text" size="25" value={$T.post.woid} /></td>
          </tr>
          <tr>
              <td colspan="1">Work Order: </td>
              <td colspan="3"><input id="txtWO" type="text" size="25" value={$T.post.workorder} /></td>
          </tr>
          <tr>
              <td>Part Number: </td>
              <td><input id="txtWOPN" type="text" size="25" value={$T.post.partnumber} /></td>
              <td>Serial Number: </td>
              <td><input id="txtWOSN" type="text" size="25" value={$T.post.serialnumber} /></td>
          </tr>
          <tr>
              <td colspan="1">Nomenclature: </td>
              <td colspan="3"><input id="txtWOName" type="text" size="25" value={$T.post.name} /></td>
          </tr>
          <tr>
              <td colspan="1">Status: </td>
              <td colspan="3"><input id="txtWOStatus" type="text" size="25" value={$T.post.status} /></td>
          </tr>
          <tr>
              <td colspan="1">Substatus: </td>
              <td colspan="3"><input id="txtWOSubStatus" type="text" size="25" value={$T.post.substatus} /></td>
          </tr>
          <tr>
              <td colspan="1"> Work Summary: </td>
              <td colspan="3"><input id="txtWOSummary" type="text" size="25" value={$T.post.summary} /></td>
          </tr>
          <tr>
              <td colspan="4"></td>
          </tr>
      {#/for}
    </tbody>
  </table>
  
  // WorkOrder_Events.js
  $("table[id$='WorkOrderMenu'] td:nth-child(2)").live('click', function (event)
      {
          var WorkOrder = new Object();
         
          WorkOrder.ID = document.getElementById('txtID').value;
          WorkOrder.Number = document.getElementById('txtWO').value;
          WorkOrder.PN = document.getElementById('txtWOPN').value;
          WorkOrder.SN = document.getElementById('txtWOSN').value;
          WorkOrder.Name = document.getElementById('txtWOName').value;
          WorkOrder.Status = document.getElementById('txtWOStatus').value;
          WorkOrder.SubStatus = document.getElementById('txtWOSubStatus').value;
          WorkOrder.Summary = document.getElementById('txtWOSummary').value;

          updateWorkOrder(WorkOrder);        
      });
  
  // WorkOrder_Functions.js
  function updateWorkOrder(WorkOrder) {
      $.ajax({
          type: "POST",
          url: "Logic/WorkOrder_Methods.aspx/UpdateWorkOrderDetail",
          data: JSON.stringify(WorkOrder),
          contentType: "application/json",
          dataType: "json",
          success: function (result) {
              alert(result.d);
          }
      });
  }
  
  // Page: WorkOrder_Methods.aspx
  [WebMethod]
          public static string UpdateWorkOrderDetail(WorkOrder WO)
          {
              string result = "Success";
  
              return result;
          }

  
   

• • Reply
  

  asteranup

  All-Star

  30184 Points

  4906 Posts

  Re: How to pass Javascript object to server side c# page method

  Nov 09, 2012 02:39 AM|LINK

  Hi,

  Are you getting any error? Put debugger  success and add a error method on the ajax call and debug. There are many working examples here-

  http://growingtech.blogspot.in/2012/01/post-complex-data-to-pagemethod-or.html

  Thanks & Regards
  Anup Das Gupta
  Mark as Answer if you feel so. Visit My Blog
  • Marked as answer by jfrasco on Nov 12, 2012 05:22 PM
• • Reply
  

  jfrasco

  Member

  21 Points

  14 Posts

  Re: How to pass Javascript object to server side c# page method

  Nov 12, 2012 05:35 PM|LINK

  I marked this as the answer even though I didn't find what I needed on the linked page it did start me down the path that did.

  To fix this issue I had to change the data part of the Javascript Post like this so the C# method will know what parameter it is:

  data: JSON.stringify({WO:WorkOrder}),

  Then, I changed the C# method parameter to be an object with the name of the value being passed in WO:

  [WebMethod]
          public static string UpdateWorkOrderDetail(object WO)

  This allowed the Javascript object to be successfully passed to the C# code and then can be parsed as needed.
  
  

• • Reply
  

  jfrasco

  Member

  21 Points

  14 Posts

  Re: How to pass Javascript object to server side c# page method

  Nov 12, 2012 05:37 PM|LINK

  Sorry, don't know why my response formatted like that, I wrote the text in the body and added the code using the Insert Code button on the menu so I apoligize how this came out.