从 Asp.Net Webmethod 获取 Json 数据并在 angularJS 中使用答案

【问题标题】：Get Json Data From Asp.Net Webmethod and Consume in angularJS从 Asp.Net Webmethod 获取 Json 数据并在 angularJS 中使用
【发布时间】：2014-06-06 07:08:15
【问题描述】：

谁能指导我如何从asp.net webmethod获取json数据，并在angularJS中使用。

app.controller('MainController', ['$scope', function ($scope, $http) { 
    try { 
    $http({ method: 'GET', url: 'ProblemList.aspx/GetProblemList' })
.success(function (data, status, headers, config) { 
    alert(data); }).error(function (data, status, headers, config) { 
    }); 
    } catch (e) { 
    throw e; 
    }

【问题讨论】：

app.controller('MainController', ['$scope', function ($scope, $http) { try { $http({ method: 'GET', url: 'ProblemList.aspx/ GetProblemList' }).success(function (data, status, headers, config) { alert(data); }).error(function (data, status, headers, config) { }); } catch (e) { throw e ; }
当你放置断点时它是否会命中函数，如果没有发布你的方法。
不，它没有达到功能

标签： asp.net angularjs webmethod

【解决方案1】：

我有同样的问题，我尝试了很多不同的方法，这就是我发现它的工作方式......（我认为技巧是标题配置和 json 参数与“数据：{}”的组合，我不确定，但这真的很棘手）

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestAngular.aspx.cs" Inherits="COEWebApp.NCoe.Employees.TestAngular" %>

<!DOCTYPE html>
<html lang="en">

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>

<body ng-app="myapp">

  <div ng-controller="MyController" >
    <button ng-click="myData.doClick(item, $event)">Send AJAX Request</button>
    <br/>
    Data from server: {{myData.fromServer}}
  </div>

  <script>
      angular.module("myapp", [])
          .controller("MyController", function ($scope, $http) {
              $scope.myData = {};
              $scope.myData.doClick = function (item, event) {

                  $http.post('TestAngular.aspx/GetEmployees', { data: {} })
                    .success(function (data, status, headers, config) {
                        $scope.myData.fromServer = data.d;
                    })
                    .error(function (data, status, headers, config) {
                        $scope.status = status;
                    });

              }


          }).config(function ($httpProvider) {

              $httpProvider.defaults.headers.post = {};

              $httpProvider.defaults.headers.post["Content-Type"] = "application/json; charset=utf-8";

          });
  </script>

</body>

</html>

在代码隐藏的同一个 aspx 页面上，这是简单的代码...

[WebMethod]
public static string GetEmployees()
{
  return "OK-test";
}

【讨论】：

谢谢它帮助我，我没有传递第二个参数“{ data: {} }”

【解决方案2】：

在这里，简单的Angularjs Ajax Call 到WebMethod 并得到响应

<div ng-app="myapp" ng-controller="MyController" >

  <div ng-click="getData()">GetData</div> <br />     
  {{showData}}
</div>    
_____________________________________________________
<script>
    var test = angular.module("myapp", []);
    test.controller("MyController", function ($scope, $http) {
            $scope.getData = {};
            $scope.getData = function () {

                try {
                    // Call to Web Method
                    var httpRequest = $http({
                        method: "POST",
                        url: "AjaxCall.aspx/test",
                        dataType: 'json',
                        data: {},      //use if want send parameter ::  data: {id:1},
                        headers: {
                            "Content-Type": "application/json"
                        }
                    });

                    // if success 
                    httpRequest.success(function (data, status) {
                        $scope.showData = data.d;
                        console.log(JSON.parse(data.d));  // conversion string to json format
                    });

                    // if fail
                    httpRequest.error(function (data, status) {
                        $scope.status = status;
                        console.log(status);
                    });
                }
                catch (e) {
                    console.log(e + " Some Error");
                }

            };
        });
</script>

页面背后的代码：

// AjaxCall.aspx.cs file
[WebMethod]
public static string test()  // if parameterized call :: test(string id)
{
    return "succeed";
}

【讨论】：