title: AngularJS: Call asp.net WebMethod
body: <p>I'm pretty new to AngularJS.</p>
  
  <p><strong>This is my HTML:</strong></p>
  
  <pre><code>&lt;%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %&gt;
  
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html ng-app="Resource"&gt;
  &lt;head runat="server"&gt;
  
      &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"&gt;&lt;/script&gt;
  
      &lt;script src="JS/controller.js" type="text/javascript"&gt;&lt;/script&gt;
  
      &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div ng-controller="ResourcesCtrl"&gt;
          &lt;form id="form1" runat="server"&gt;
          &lt;div&gt;
              &lt;table&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt;
                              Name
                          &lt;/th&gt;
                          &lt;th&gt;
                              Value
                          &lt;/th&gt;
                          &lt;th&gt;
                              Comment
                          &lt;/th&gt;
                          &lt;th&gt;
                              Action
                          &lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                      &lt;tr ng-repeat="resource in resources"&gt;
                          &lt;td&gt;
                              {{resource.KeyName}}
                          &lt;/td&gt;
                          &lt;td&gt;
                              {{resource.Text}}
                          &lt;/td&gt;
                          &lt;td&gt;
                              {{resource.Comment}}
                          &lt;/td&gt;
                          &lt;td&gt;
                              &lt;span&gt;Update&lt;/span&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;
          &lt;/div&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>This is my JS:</strong></p>
  
  <pre><code>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);
  }
  </code></pre>
  
  <p><strong>And this is the server method:</strong></p>
  
  <pre><code> [WebMethod]
      public static string GetResources(int langId)
      {
          ResourcesManagerBL resBl = new ResourcesManagerBL(langId);
          var resources = resBl.GetResourcesForLanguage(langId);
          return Json.ToJson(resources);
      }
  </code></pre>
  
  <p>The result is many blank rows (as the number of the resources),
  What I'm doing wrong, in the console the data look OK.</p>
  
  <p><strong>The result is something like this:</strong></p>
  
  <p><img src="https://i.stack.imgur.com/cN3l6.png" alt="enter image description here"></p>