Send (Pass) multi dimentional Array to Web Service using AngularJS in ASP.Net

Last Reply 13 days ago By dharmendr

Posted 14 days ago

How to generate multidimensional array from textbox and pass it to webservice using angularjs.

Posted 13 days ago

Hi rani,

Check this example. Now please take its reference and correct your code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', []);
        app.controller("MyController", function ($scope, $http) {
            $scope.MyArray = [];
            $scope.Add = function () {
                var customer = {};
                customer.Id = $scope.MyArray.length + 1;
                customer.Name = $scope.Name;
                customer.Country = $scope.Country;
                $scope.MyArray.push(customer);
            };

            $scope.Save = function () {
                $http({
                    method: "POST",
                    url: "WebService.asmx/GetCustomers",
                    dataType: 'json',
                    data: JSON.stringify({ customers: $scope.MyArray }),
                    headers: { "Content-Type": "application/json" }
                }).success(function (response) {
                    alert(response.d + ' record inserted.');
                });
            };
        });
    </script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
    <table>
        <tr>
            <td><input type="text" id="txtName" ng-model="Name" /></td>
            <td><input type="text" id="txtCountry" ng-model="Country" /></td>
            <td><input type="button" id="btnAdd" value="Add" ng-click="Add();" /></td>
        </tr>
    </table>
    <hr />
    <table>
        <tr>
            <td>Id</td>
            <td>Name</td>
            <td>Country</td>
        </tr>
        <tr ng-repeat="customer in MyArray">
            <td>{{customer.Id}}</td>
            <td>{{customer.Name}}</td>
            <td>{{customer.Country}}</td>
        </tr>
    </table>
    <hr />
    <input type="button" id="btnSave" value="Save" ng-click="Save();" />
</body>
</html>

WebService

C#

using System.Collections.Generic;
using System.Web.Services;

/// <summary>
/// Summary description for WebServiceCS
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// 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 WebServiceCS : System.Web.Services.WebService
{
    [WebMethod]
    public int GetCustomers(List<Customer> customers)
    {
        foreach (Customer customer in customers)
        {
            // Insert code goes here.
        }

        return customers.Count;
    }

    public class Customer
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Country { get; set; }
    }
}

VB.Net

Imports System.Collections.Generic
Imports System.Web.Services

' To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
<System.Web.Script.Services.ScriptService()> _
<WebService(Namespace:="http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _
Public Class WebServiceVB
    Inherits System.Web.Services.WebService

    <WebMethod()> _
    Public Function GetCustomers(ByVal customers As List(Of Customer)) As Integer
        For Each customer As Customer In customers
            ' Insert code goes here.
        Next

        Return customers.Count
    End Function

    Public Class Customer
        Public Property Id As Integer
        Public Property Name As String
        Public Property Country As String
    End Class

End Class

Screenshot