angularJSを使ってsharepointのドロップダウンをバインドする方法は？

Question

こんにちは私はsharepoint 2013 webpartsで1つの小さなアプリケーションを開発しています。私は角度jsを使用してデータベースからのドロップダウンをバインドしようとしています。私のページはRFRegretLetterWP.ascxとRFRegretLetterWP.ascxです。私は以下のように試みました。

<script type="text/javascript"> 
    angular.module('drpdwnApp', []).controller('drpdwnCtrl', function ($scope, $http) { 
     $scope.ProductList = null; 
     //Declaring the function to load data from database 
     $scope.fillProductList = function() { 
      $http({ 
       method: 'POST', 
       url: 'RFPRegretLetterWP.ascx/GetDDLNames', 
       data: {} 
      }).success(function (result) { 
       $scope.ProductList = result.d; 
      }); 
     }; 
     //Calling the function to load the data on pageload 
     $scope.fillProductList(); 
    }); 
</script> 

これは私のhtmlコードです。

<div ng-app="drpdwnApp" ng-controller="drpdwnCtrl"> 
       <select ng-model="drpdpwnvalue" ng-options="item.OrderID for item in ProductList"> 
       <option value="" label="Select and item"></option> 
       </select> 
</div> 

これは私のサーバー側のコードです。

public static List<OrderList> GetDDLNames() 
{ 
    List<OrderList> list = new List<OrderList>(); 
    using (SqlConnection conn = new SqlConnection("I have connection string here")) 
    { 
     conn.Open(); 
     string strquery = ("select * from CategoryMaster order by CategoryName Asc"); 
     using (SqlCommand cmd = new SqlCommand(strquery, conn)) 
     { 
      SqlDataReader reader = cmd.ExecuteReader(); 
      while (reader.Read()) 
      { 
       OrderList objorder = new OrderList(reader["Vendor_ID"].ToString()); 
       list.Add(objorder); 
      } 
     } 
    } 
    return list; 
} 

public class OrderList 
{ 
    public string Vendor_ID; 
    public OrderList(string UName) 
    { 
     Vendor_ID = UName; 
    } 
} 

私はサーバーへの呼び出しにほとんど疑いがありません。これは私のURLです
url： 'RFPRegretLetterWP.ascx/GetDDLNames'しかし私のページ名はRFPRegretLetterWP.ascx.csです。混乱しています。いくつかの記事で私は[System.Web.Services.WebMethod（）]に気づいたが、それを置くとエラーが出る。私はこの点についていくつかの提案をしてもらえますか？

using System.Web.Services; 

public partial class RFPRegretLetterWP : LayoutsPageBase 
{ 
    [WebMethod] 
    public static IEnumerable GetDDLNames() 
    { 
     List<OrderList> list = new List<OrderList>(); 
     /* your code */ 
     return list; 
    } 
    public class OrderList 
    { 
     /* your code */ 
    } 
} 

とURLをWebメソッドを呼び出します：このような

_spPageContextInfo.webAbsoluteUrl/_layouts/15/<project name>/<pagename>.aspx/GetDDLNames 

：考慮

Answer 1

てくれてありがとう私はあなたがこのようなLayoutsPageにサーバー側のコードを挿入することをお勧め

<script type="text/javascript"> 
    angular.module('drpdwnApp', []).controller('drpdwnCtrl', function ($scope, $http) { 
     $scope.ProductList = null; 

     //Declaring the function to load data from database 
     $scope.fillProductList = function() { 

      $.ajax({ 
       type: "POST", 
       url: _spPageContextInfo.webAbsoluteUrl + "/_layouts/15/<project name>/RFPRegretLetterWP.aspx/GetDDLNames", 
       data: null, 
       contentType: "application/json; charset=utf-8", 
       dataType: "json", 
       async: true, 
       success: onCompleted, 
       error: onError 
      }); 

      function onCompleted(data) { 
       if (data !== null) 
        $scope.ProductList = data.d; 
      } 

      function onError(error) { 
       console.log('An error has occurred: ' + error.data); 
      } 
     }; 


     //Calling the function to load the data on pageload 
     $scope.fillProductList(); 
    }); 
</script> 

<project name>をあなたのビジュアルスタジオプロジェクトのn ame。