Home Angular JS Application Unable To Find Single Record with Wcf Rest Service
Reply: 0

Angular JS Application Unable To Find Single Record with Wcf Rest Service

user6151 Published in April 22, 2018, 12:43 am

I am consuming wcf rest service into angular js application. I am trying to display single record based on user Last Name in Angular JS Application. I can get the details (JSON Format) of the user when i run wcf service on local host.

Here is the interface.


        [WebInvoke(Method = "GET",
        RequestFormat = WebMessageFormat.Json,
        ResponseFormat = WebMessageFormat.Json,
        UriTemplate = "/GetCustomers/{Account_Holder_Last_Name}")]
        string GetCustomers(string Account_Holder_Last_Name);

Here is the Implementation .

 public string GetCustomers(string Account_Holder_Last_Name)

            List<object> customers = new List<object>();
            string sql = "SELECT * FROM Current_Account_Holder_Details WHERE Account_Holder_Last_Name =@Account_Holder_Last_Name";
            using (SqlConnection conn = new SqlConnection())
                conn.ConnectionString = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;
                using (SqlCommand cmd = new SqlCommand(sql))
                    cmd.Parameters.AddWithValue("@Account_Holder_Last_Name", Account_Holder_Last_Name);
                    cmd.Connection = conn;
                    using (SqlDataReader sdr = cmd.ExecuteReader())
                        while (sdr.Read())

                                Tittle = sdr["Tittle"],
                                Account_Holder_First_Name = sdr["Account_Holder_First_Name"],
                                Account_Holder_Last_Name = sdr["Account_Holder_Last_Name"],
                                Account_Holder_DOB = sdr["Account_Holder_DOB"],
                                Account_Holder_House_No = sdr["Account_Holder_House_No"],
                                Account_Holder_Street_Name = sdr["Account_Holder_Street_Name"],
                                Account_Holder_Post_Code = sdr["Account_Holder_Post_Code"],

                                Account_Holder_Occupation = sdr["Account_Holder_Occupation"],
                                Account_Number = sdr["Account_Number"]


                return (new JavaScriptSerializer().Serialize(customers));


Here is the screen shot when i access the method on user last name and its works fine .

But the problem is when i call this method from angular js application ,its unable to filed to find the record and not displaying anything.I did not found any error in Google Chrome Console window .

Here is the angular js code with HTML.

    Layout = null;

<html xmlns="http://www.w3.org/1999/xhtml">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope, $http, $window) {
            $scope.IsVisible = false;
            $scope.Search = function () {
                var post = $http({
                    method: "GET",
                    url: "http://localhost:52098/HalifaxIISService.svc/GetCustomers/{Account_Holder_Last_Name}",
                    dataType: 'json',
                    data: { Account_Holder_Last_Name: $scope.Account_Holder_Last_Name},
                    headers: {
                        'Accept': 'application/json, text/javascript, */*; q=0.01',
                        'Content-Type': 'application/json; charset=utf-8'

                post.success(function (data, status) {
                    $scope.Customers = eval(data.d);
                    $scope.IsVisible = true;

                post.error(function (data, status) {
    <div ng-app="MyApp" ng-controller="MyController">
        <input type="text" ng-model="Account_Holder_Last_Name" />
        <input type="button" value="Submit" ng-click="Search(Account_Holder_Last_Name)" />
        <hr />
        <table cellpadding="0" cellspacing="0" ng-show="IsVisible">
            <tr style="height: 30px; background-color: skyblue; color: maroon;">
                <th> Tittle</th>
                <th>First Name</th>
                <th> Last Name</th>
                <th>  DOB </th>
                <th> House No</th>
                <th> Street Name</th>
                <th>Post Code</th>
                <th> Occupation</th>
                <th>Account Number</th>

            <tbody ng-repeat="m in Customers">



Here is the out put when i clicked the submit button .

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.299207 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO