AngularJS:调用asp.net WebMethod

时间:2013-09-29 07:36:43

标签: asp.net angularjs webmethod

我对AngularJS很新。

这是我的HTML:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html ng-app="Resource">
<head runat="server">

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>

    <script src="JS/controller.js" type="text/javascript"></script>

    <title></title>
</head>
<body>
    <div ng-controller="ResourcesCtrl">
        <form id="form1" runat="server">
        <div>
            <table>
                <thead>
                    <tr>
                        <th>
                            Name
                        </th>
                        <th>
                            Value
                        </th>
                        <th>
                            Comment
                        </th>
                        <th>
                            Action
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="resource in resources">
                        <td>
                            {{resource.KeyName}}
                        </td>
                        <td>
                            {{resource.Text}}
                        </td>
                        <td>
                            {{resource.Comment}}
                        </td>
                        <td>
                            <span>Update</span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        </form>
    </div>
</body>
</html>

这是我的JS:

var myModule = angular.module('Resource', []).factory('ResourceData', function($http) {
    return {
        getResources: function(prmLangId) {
            //return the promise directly.
            return $http.get('Default.aspx/GetResources', { langId: prmLangId }).
                       then(function(result) {
                           //resolve the promise as the data
                           console.log(result);
                           return result.data;
                       });
        }
    }
});

myModule.config(function($httpProvider) {

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

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

        });

function ResourcesCtrl($scope, ResourceData) {
    $scope.resources = ResourceData.getResources(1033);
}

这是服务器方法:

 [WebMethod]
    public static string GetResources(int langId)
    {
        ResourcesManagerBL resBl = new ResourcesManagerBL(langId);
        var resources = resBl.GetResourcesForLanguage(langId);
        return Json.ToJson(resources);
    }

结果是许多空行(作为资源的数量), 我做错了,在控制台中数据看起来还不错。

结果是这样的:

enter image description here

1 个答案:

答案 0 :(得分:0)

web方法可以返回实际类型(如List),模块应该用result.data.d填充。