ChrisMoney · September 3, 2015 19:56
diff --git a/angular-with-web-service.cs b/angular-with-web-service.cs
 // ----------------------------------------------------------------------------------------------
 // Database Fetch for Jquery
 //---------------------------------------------------------------------------------------------

 // in this sample, and as described in the article, 
 // this is a simple method that will connect to the database, 
 // execute an SQL command and return data in form of a DataTable 
 public DataTable GetDataTable()
    {
        DataTable dataTable = new DataTable();
        using (OleDbConnection conn = new OleDbConnection
        ("Provider=Microsoft.Jet.OLEDB.4.0; Data Source=|DataDirectory|Quiz.mdb"))
        {
            OleDbCommand cmd = conn.CreateCommand();
            cmd.CommandText = "select * from Questions";

            cmd.CommandType = CommandType.Text;

            if (conn.State != ConnectionState.Open)
                conn.Open();

            OleDbDataReader dr = cmd.ExecuteReader(CommandBehavior.CloseConnection);

            dataTable.Load(dr);
        }
        return dataTable;
    }
 //once the datatable is ready, it has to be converted to JSON to be consumable with AngularJS, 
 //the following function uses Javascript serializer to do the conversion

    public String ConvertDataTableTojSonString(DataTable dataTable)
    {
        System.Web.Script.Serialization.JavaScriptSerializer serializer =
               new System.Web.Script.Serialization.JavaScriptSerializer();

        List<Dictionary<String, Object>> tableRows = new List<Dictionary<String, Object>>();

        Dictionary<String, Object> row;

        foreach (DataRow dr in dataTable.Rows)
        {
            row = new Dictionary<String, Object>();
            foreach (DataColumn col in dataTable.Columns)
            {
                row.Add(col.ColumnName, dr[col]);
            }
            tableRows.Add(row);
        }
        return serializer.Serialize(tableRows);
    }  
    //----------------------------------------------------------------------------------------------------------------- 
    //End database fetch
    //----------------------------------------------------------------------------------------------------------------

 //---------------------------------------------------------------------------------------------------------------
 // Web Service Method
 //-------------------------------------------------------------------------------------------------------------

 [WebService(Namespace = "AnyNameSpace")]

 [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 WebService : System.Web.Services.WebService

 {  
 // Business Logic Code goes here

 [WebMethod] // by writing this line, you tell your service to enable this method / function 
  //for public consumption. If you remove this line, the method can not be invoked.
    [ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
    public void HelloWorld()
    {
        JavaScriptSerializer js = new JavaScriptSerializer();
        Context.Response.Clear();
        Context.Response.ContentType = "application/json";
        HelloWorldData data = new HelloWorldData();
        data.Message = ConvertDataTableTojSonString(GetDataTable());
        Context.Response.Write(js.Serialize(data.Message));
    }

    public class HelloWorldData
    {
        public String Message;
    }
 }

 //--------------------------------------------------------------------------------------------------------------
 // End Web Service Method
 //--------------------------------------------------------------------------------------------------------------

 <html ng-app="serviceConsumer">
 <head runat="server">
    <title>consume JSON web service</title>
    <script src="js/angular.js"></script>
 </head>
 <body>
    <form id="form1" runat="server">
    <div>
        <div ng-controller="questionsController">
            search:<input type="text" ng-model="search" />
            <table>
                <tr ng-repeat="i in questions | filter:search">
                    <td>
                        {{i.QuestionID}}
                    </td>
                    <td>
                        {{i.QuestionText }}
                    </td>
                </tr>
            </table>
        </div>
        <br />
    </div>
    <script>

        var app = angular.module('serviceConsumer', []);

        app.controller('questionsController', function ($scope, $http) {

            var url = "WebService.asmx/HelloWorld";

            $http.get(url)
                       .success(function (data) {

                           var myjson = JSON.parse(data);

                           $scope.questions = JSON.parse(myjson);

                       })
        })
                         
    </script>
    </form>
 </body>
 </html>
	// ----------------------------------------------------------------------------------------------
	// Database Fetch for Jquery
	//---------------------------------------------------------------------------------------------

	// in this sample, and as described in the article,
	// this is a simple method that will connect to the database,
	// execute an SQL command and return data in form of a DataTable
	public DataTable GetDataTable()
	{
	DataTable dataTable = new DataTable();
	using (OleDbConnection conn = new OleDbConnection
	("Provider=Microsoft.Jet.OLEDB.4.0; Data Source=\|DataDirectory\|Quiz.mdb"))
	{
	OleDbCommand cmd = conn.CreateCommand();
	cmd.CommandText = "select * from Questions";

	cmd.CommandType = CommandType.Text;

	if (conn.State != ConnectionState.Open)
	conn.Open();

	OleDbDataReader dr = cmd.ExecuteReader(CommandBehavior.CloseConnection);

	dataTable.Load(dr);
	}
	return dataTable;
	}
	//once the datatable is ready, it has to be converted to JSON to be consumable with AngularJS,
	//the following function uses Javascript serializer to do the conversion

	public String ConvertDataTableTojSonString(DataTable dataTable)
	{
	System.Web.Script.Serialization.JavaScriptSerializer serializer =
	new System.Web.Script.Serialization.JavaScriptSerializer();

	List<Dictionary<String, Object>> tableRows = new List<Dictionary<String, Object>>();

	Dictionary<String, Object> row;

	foreach (DataRow dr in dataTable.Rows)
	{
	row = new Dictionary<String, Object>();
	foreach (DataColumn col in dataTable.Columns)
	{
	row.Add(col.ColumnName, dr[col]);
	}
	tableRows.Add(row);
	}
	return serializer.Serialize(tableRows);
	}
	//-----------------------------------------------------------------------------------------------------------------
	//End database fetch
	//----------------------------------------------------------------------------------------------------------------

	//---------------------------------------------------------------------------------------------------------------
	// Web Service Method
	//-------------------------------------------------------------------------------------------------------------

	[WebService(Namespace = "AnyNameSpace")]

	[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 WebService : System.Web.Services.WebService

	{
	// Business Logic Code goes here

	[WebMethod] // by writing this line, you tell your service to enable this method / function
	//for public consumption. If you remove this line, the method can not be invoked.
	[ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
	public void HelloWorld()
	{
	JavaScriptSerializer js = new JavaScriptSerializer();
	Context.Response.Clear();
	Context.Response.ContentType = "application/json";
	HelloWorldData data = new HelloWorldData();
	data.Message = ConvertDataTableTojSonString(GetDataTable());
	Context.Response.Write(js.Serialize(data.Message));
	}

	public class HelloWorldData
	{
	public String Message;
	}
	}

	//--------------------------------------------------------------------------------------------------------------
	// End Web Service Method
	//--------------------------------------------------------------------------------------------------------------

	<html ng-app="serviceConsumer">
	<head runat="server">
	<title>consume JSON web service</title>
	<script src="js/angular.js"></script>
	</head>
	<body>
	<form id="form1" runat="server">
	<div>
	<div ng-controller="questionsController">
	search:<input type="text" ng-model="search" />
	<table>
	<tr ng-repeat="i in questions \| filter:search">
	<td>
	{{i.QuestionID}}
	</td>
	<td>
	{{i.QuestionText }}
	</td>
	</tr>
	</table>
	</div>
	<br />
	</div>
	<script>

	var app = angular.module('serviceConsumer', []);

	app.controller('questionsController', function ($scope, $http) {

	var url = "WebService.asmx/HelloWorld";

	$http.get(url)
	.success(function (data) {

	var myjson = JSON.parse(data);

	$scope.questions = JSON.parse(myjson);

	})
	})

	</script>
	</form>
	</body>
	</html>