I have a project requirement to connect a dropdownlist with MVC and angular JS.
Here is my attempt:
var app1 = angular.module('Assign', [])
app1.controller('SAPExecutive_R4GState', function ($scope, $http, $window) {
// alert(UMSLocationDetails);
var LocObj = JSON.parse(UMSLocationDetails)
var ZoneValue = "";
$.each(LocObj, function (index, element) {
ZoneValue += element.LocationID + ",";
});
ZoneValue = ZoneValue.substr(0, ZoneValue.length - 1);
var Values = { "MaintZones": ZoneValue };
alert(JSON.stringify(Values));
$scope.DefaultLabel = "Loading.....";
$http({
method: "POST",
url: "/App/GetR4GStates",
dataType: 'json',
data: JSON.stringify(Values),
headers: { "Content-Type": "application/json" }
}).success(function (result) {
$scope.DefaultLabel = "--Select--";
$scope.State = data;
});
post.error(function (data, status) {
$window.alert(data.Message);
});
});<select id="SAPExecutive_R4GState" class="form-control" ng-model="R4GState.Selected" ng-controller="SAPExecutive_R4GState as R4GState" ng-init="Select" ng-options="b for b in list">
</select>And here is my C# code:
[HttpPost]
public JsonResult GetR4GStates(string MaintZones)
{
List<SelectListItem> lstR4GState = new List<SelectListItem>();
try
{
Filters ObjFilter = new Filters();
DataTable dt = ObjFilter.GetR4GState(MaintZones);
if (dt.Rows.Count > 0)
{
lstR4GState = (from DataRow dr in dt.Rows
select new SelectListItem()
{
Text = Convert.ToString(dr["R4GSTATENAME"]),
Value = Convert.ToString(dr["R4GSTATECODE"])
}).ToList();
}
else
{
SelectListItem slEmptyData = new SelectListItem();
slEmptyData.Text = "No Data found";
slEmptyData.Value = "No Data found";
lstR4GState.Add(slEmptyData);
}
}
catch (Exception e)
{
}
// ErrorLog.HandleErrorLog("", "", "GetR4GStates", "Error2");
return Json(lstR4GState);
}
Although I am receiving values in return Json(lstR4GState);, they are not populating the dropdown.
I would appreciate any guidance on where I might be making mistakes, especially since I am still learning AngularJS.