如何使用 angularJS 绑定共享点中的下拉列表？

Question

您好，我正在使用 Sharepoint 2013 webparts 开发一个小应用程序。我正在尝试使用 angular 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> 替换为您的 visual studio 项目名称。

如何使用 angularJS 绑定共享点中的下拉列表？

how to bind dropdown in sharepoint using angularJS?

c#

sharepoint

ascx

angularjs