Currently, I am working on creating an application using AngularJS that involves retrieving data from a database and populating a list item with that data.
To achieve this, I have written a WebMethod as shown below:
[WebMethod]
public static string getname()
{
SqlHelper sql = new SqlHelper();
DataTable dt = sql.ExecuteSelectCommand("select cust_F_name,Cust_L_Name from customer");
Dictionary<string, object> dict = new Dictionary<string, object>();
object[] arr = new object[dt.Rows.Count];
for (int i = 0; i <= dt.Rows.Count - 1; i++)
{
arr[i] = dt.Rows[i].ItemArray;
}
dict.Add(dt.TableName, arr);
JavaScriptSerializer json = new JavaScriptSerializer();
return json.Serialize(dict);
}
This method returns the data in JSON format.
I am using the following JavaScript code to bind the data:
var DemoApp = angular.module('DemoApp', []);
DemoApp.factory('SimpleFactory', function () {
var factory = {};
var customer;
$.ajax({
type: "POST",
url: "Home.aspx/getname",
data: JSON.stringify({ name: "" }),
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
success: function (data, status) {
customer = $.parseJSON(data.d);
},
failure: function (data) {
alert(data.d);
},
error: function (data) {
alert(data.d);
}
});
factory.getCustomer = function () {
return customer;
};
return factory;
});
DemoApp.controller('SimpleController', function ($scope, SimpleFactory) {
$scope.Customer = SimpleFactory.getCustomer();
});
In my view, the HTML code looks like this:
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="DemoApp">
<head runat="server">
<title></title>
</head>
<body data-ng-controller="SimpleController">
<form id="form1" runat="server">
<div>
Name<input type="text" data-ng-model="Name" />{{ Name }}
<ul>
<li data-ng-repeat="customer in Customer | filter:Name">{{ customer.cust_F_name }} -
{{ customer.cust_L_name }}</li>
</ul>
</div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="Script/Home.js" type="text/javascript"></script>
</body>
</html>
However, despite my efforts, it is not functioning as expected. It works fine when I hard code the data in the factory, but when I try to fetch the data using an AJAX call, it fails. I am struggling to understand why this issue is occurring.