C# 如何使用angularJS在sharepoint中绑定下拉列表？

您好，我正在sharepoint 2013 Web部件中开发一个小应用程序。我正在尝试使用AngularJS绑定数据库中的下拉列表。我的页面是rfregletterwp.ascx和rfregletterwp.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:'rfpregrettentwp.ascx/GetDDLNames'但是我的页面名是rfpregrettentwp.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 */
    }
}

<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>

并使用url调用web方法：

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

像这样：

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 */
    }
}

<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>

---

替换为visual studio项目的名称。

我建议您将服务器端代码插入如下布局页面：

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 */
    }
}

<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>

并使用url调用web方法：

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

像这样：

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 */
    }
}

<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>

替换为visual studio项目的名称