how to bind dropdown in sharepoint using angularJS?

Question

Hi I am developing one small application in sharepoint 2013 webparts. I am trying to bind dropdown from database using angular js. My pages are RFRegretLetterWP.ascx and RFRegretLetterWP.ascx. I have tried as below.

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

This is my html code.

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

This is my server side code.

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

I have little doubt in making call to server. This is my Url
url: 'RFPRegretLetterWP.ascx/GetDDLNames' but my page name is RFPRegretLetterWP.ascx.cs so i am having confusion. In some articles i noticed [System.Web.Services.WebMethod()] but when i put it it gives me error. May I have some suggestions on this regards. thank you for consideration

Answer 1

I suggest you to insert the server side code into a LayoutsPage like this:

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

and call the web method with the url:

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

like this:

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

Replace <project name> with your visual studio project's name.