Post Multiple JSON Objects to Ajax Method in C#

C# web method

  1. [System.Web.Services.WebMethod]  
  2. public static void Post(object data, object dt)  
  3. {  
  4.     List < Category > lstItems = new JavaScriptSerializer().ConvertToType < List < Category >> (data);  
  5.     List < Product > lstprditems = new JavaScriptSerializer().ConvertToType < List < Product >> (dt);  
  6.     string ctid = "";  
  7.     string ctnme = "";  
  8.     string pdid = "";  
  9.     string pdnme = "";  
  10.     for (int i = 0; i < lstItems.Count; i++)  
  11.     {  
  12.         ctid = ctid + "," + lstItems[i].categoryID;  
  13.         ctnme = ctnme + "," + lstItems[i].categoryName;  
  14.     }  
  15.     for (int i = 0; i < lstprditems.Count; i++)  
  16.     {  
  17.         pdid = pdid + "," + lstprditems[i].productID;  
  18.         pdnme = pdnme + "," + lstprditems[i].productName;  
  19.     }  
  20.     if (ctid.Length > 0)  
  21.     {  
  22.         ctid = ctid.Remove(0, 1);  
  23.         ctnme = ctnme.Remove(0, 1);  
  24.     }  
  25.     if (ctid.Length > 0)  
  26.     {  
  27.         pdid = pdid.Remove(0, 1);  
  28.         pdnme = pdnme.Remove(0, 1);  
  29.     }  
  30. }  
Code

  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2.   
  3. <head runat="server">  
  4.     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>  
  5.   
  6.     <script type="text/javascript">  
  7.         function PassJavascriptObject()  
  8.         {  
  9.             var Ct = [];  
  10.             var Pd = [];  
  11.             var categoryModel = {  
  12.                 categoryID: 1,  
  13.                 categoryName: "Beverage"  
  14.             };  
  15.             Ct.push(categoryModel);  
  16.             var categoryModel1 = {  
  17.                 categoryID: 2,  
  18.                 categoryName: "Liuwu"  
  19.             };  
  20.             Ct.push(categoryModel1);  
  21.             var productModel = {  
  22.                 productID: 1,  
  23.                 productName: "Chai"  
  24.             };  
  25.             Pd.push(productModel)  
  26.             var productModel2 = {  
  27.                 productID: 2,  
  28.                 productName: "teccc"  
  29.             };  
  30.             Pd.push(productModel2)  
  31.             $.ajax(  
  32.             {  
  33.                 url: 'WebForm1.aspx/Post',  
  34.                 type: 'post',  
  35.                 dataType: 'json',  
  36.                 // It is important to set the content type  
  37.                 // request header to application/json because  
  38.                 // that's how the client will send the request  
  39.                 contentType: 'application/json',  
  40.                 data: JSON.stringify(  
  41.                 {  
  42.                     data: Ct,  
  43.                     dt: Pd  
  44.                 }),  
  45.                 cache: false,  
  46.                 success: function(result)  
  47.                 {  
  48.                     alert(result);  
  49.                 },  
  50.                 error: function(xhr, ajaxOptions, thrownError)  
  51.                 {  
  52.                     alert(thrownError);  
  53.                 }  
  54.             });  
  55.         }  
  56.     </script>  
  57.   
  58. </head>  
  59.   
  60. <body>  
  61.     <form id="form1" runat="server">  
  62.         <div>  
  63.             <span onclick="javascript:PassJavascriptObject();">Call Method</span>  
  64.         </div>  
  65.     </form>  
  66. </body>  
  67.   
  68. </html>