title: Post collection of entities through jQuery ajax
body: <p>I'm using EF 4. Currently I'm inserting data in two entities through jQuery ajax POST method.
  Entities looks like:<img src="https://i.stack.imgur.com/zSMDJ.png" alt="enter image description here"></p>
  
  <p>My Web service looks like:</p>
  
  <pre><code>[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
  [System.ComponentModel.ToolboxItem(false)]
  // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
  [System.Web.Script.Services.ScriptService]
  public class AddArea : System.Web.Services.WebService
  {
      [WebMethod]
      [System.Web.Script.Services.ScriptMethod(UseHttpGet = false, ResponseFormat = System.Web.Script.Services.ResponseFormat.Json)]
      public Int64 InsertArea(string forestType, byte NumberOfPillars, bool isReferencePoint, decimal AreaCalculated)
      {
          using (var db = new DefaultCS())
          {
              var forestArea = new ForestArea();
              forestArea.ForestType = forestType;
              forestArea.NumberOfPillars = NumberOfPillars;
              forestArea.isReferencePoint = isReferencePoint;
              forestArea.AreaCalculated = AreaCalculated;
  
              db.ForestAreas.AddObject(forestArea);
              db.SaveChanges();
  
              return forestArea.Id;
          }
      }
  
      [WebMethod]
      [System.Web.Script.Services.ScriptMethod(UseHttpGet = false, ResponseFormat = System.Web.Script.Services.ResponseFormat.Json)]
      public string InsertCoordinates(long forestAreaId, string pillarNo, string latitude, string longitude, string forwardBearings, string backBearings, decimal backDistanceInMeter, decimal backDistanceInChain)
      {
          using (var db = new DefaultCS())
          {
              ForestCoordinate forestCoordinates = new ForestCoordinate();
              forestCoordinates.ForestAreaId = forestAreaId;
              forestCoordinates.PillarNo = pillarNo;
              forestCoordinates.Latitude = latitude;
              forestCoordinates.Longitude = longitude;
              forestCoordinates.ForwardBearings = forwardBearings;
              forestCoordinates.BackBearings = backBearings;
              forestCoordinates.BackDistanceInMeter = backDistanceInMeter;
              forestCoordinates.BackDistanceInChain = backDistanceInChain;
  
              db.ForestCoordinates.AddObject(forestCoordinates);
              db.SaveChanges();
          }
          return "true";
      }
  }
  </code></pre>
  
  <p>The <code>InserArea</code> methods runs one time but 'InsertCoordinates` run in loop.
  here is my ajax:</p>
  
  <pre><code>$.ajax({
      type: "POST",
      url: "AddArea.asmx/InsertArea",
      contentType: 'application/json; charset=utf-8',
      dataType: 'json',
      data: '{ "forestType": "R", "NumberOfPillars": "' + (parseInt($('#txtNoPillar').val()) + 1) + '", "isReferencePoint": "' + $('#rdReference').is(':checked') + '", "AreaCalculated": "' + $('#areaM').text() + '" }',
      success: function (response) {
          var areaId = response.d;
          var numOfPillar = $('#txtNoPillar').val();
          var i = 0;
          for (i; i &lt;= numOfPillar; i++) {
  
              $.ajax({
                  type: "POST",
                  url: "AddArea.asmx/InsertCoordinates",
                  contentType: 'application/json; charset=utf-8',
                  dataType: 'json',
                  data: '{ "forestAreaId": "' + areaId + '", "pillarNo": "' + $('#txtPillarNo' + i).val() + '", "latitude": "' + $('#txtLatitude' + i).val() + '", "longitude": "' + $('#txtLongitude' + i).val() + '", "forwardBearings": "' + $('#txtBearing' + i).val() + '", "backBearings": "' + $('#txtBackBearing' + i).val() + '", "backDistanceInMeter": "' + $('#txtDistance' + i).val() + '", "backDistanceInChain": "' + $('#txtDistanceInChain' + i).val() + '" }',
                  success: function (response) {
                      console.log(response);
                  },
                  error: function (response) {
                      console.log(response);
                  }
              });
          }
          console.log(response);
      },
      error: function (response) {
          console.log(response);
      }
  }).done(function () {
      alert("Data saved successfully.");
  });
  </code></pre>
  
  <p><strong>My Question:</strong> Is there any way to eliminate looping of <code>InsertCoordinates</code> method and post Collection of Entity(ForestCoordinate) at one time to web service?
  This is working correctly but I want more elegance way to do this. Thanks for any help.</p>
  
  <p><strong>Update 1</strong> Here is new webservice according to @Eugene P.</p>
  
  <pre><code>[WebMethod]
      [System.Web.Script.Services.ScriptMethod(UseHttpGet = false, ResponseFormat = System.Web.Script.Services.ResponseFormat.Json)]
      public Int64 InsertArea(ForestArea forestArea, EntityCollection&lt;ForestCoordinate&gt; forestCoordinates)
      {
          using (var db = new DefaultCS())
          {
              forestArea.ForestCoordinates = forestCoordinates;
              db.ForestAreas.AddObject(forestArea);
              db.SaveChanges();
  
              return forestArea.Id;
          }
      }
  </code></pre>
  
  <p>and jQuery is :</p>
  
  <pre><code>var forestArea = {};
  
                  forestArea.forestType = "R";
                  forestArea.NumberOfPillars = (parseInt($('#txtNoPillar').val()) + 1);
                  forestArea.isReferencePoint = $('#rdReference').is(':checked');
                  forestArea.AreaCalculated = $('#areaM').text();
  
                  var json = { "forestCoordinates": [] };
                  var numOfPillar = $('#txtNoPillar').val();
                  var i = 0;
                  for (i; i &lt;= numOfPillar; i++) {
  
                      json.forestCoordinates.push({ pillarNo: $('#txtPillarNo' + i).val(), latitude: $('#txtLatitude' + i).val(), longitude: $('#txtLongitude' + i).val(), forwardBearings: $('#txtBearing' + i).val(), backBearings: $('#txtBackBearing' + i).val(), backDistanceInMeter: $('#txtDistance' + i).val(), backDistanceInChain: $('#txtDistanceInChain' + i).val() });
                  }
  
                  // Create a data transfer object (DTO) with the proper structure.
                  var DTO = { 'forestArea': forestArea, 'forestCoordinates': json };
                  $.ajax({
                      type: "POST",
                      url: "AddArea.asmx/InsertArea",
                      contentType: 'application/json; charset=utf-8',
                      dataType: 'json',
                      data: JSON.stringify(DTO),
                      success: function (response) {
                          var areaId = response.d;
                          console.log(response);
                      },
                      error: function (response) {
                          console.log(response);
                      }
                  }).done(function () {
                      alert("Data saved successfully.");
                  });
  </code></pre>
  
  <p>At the client side json object shows non-empty array but at server it is always zero. What wrong is going?</p>