Как связать выпадающий в sharepoint с помощью angularJS?

Question

Привет, я разрабатываю одно небольшое приложение на сайтах sharepoint 2013. Я пытаюсь привязать выпадающий из базы данных с помощью угловых 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()], но когда я его вставил, это выдает ошибку. Могу ли я иметь некоторые предложения по этому поводу. спасибо за внимание

Answer 1

Я предлагаю вам вставить код на стороне сервера в LayoutsPage следующим образом:

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:

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

как это:

<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> с названием вашей визуальной студии.