0
Я недавно начал использовать AngularJS. У меня есть Drop Down в моем HTML, который я хочу заполнить с помощью базы данных. Но я не могу найти правильное решение внутри контроллера о том, как его заполнить. Ниже мой C# код: -Population drop down с MVC EF, используя AngularJS
public JsonResult GetLocList()
{
IEnumerable<LocationTbl> ie = (from d in db.LocationTbls
select d).ToList();
//var ret = db.LocationTbls.Select(x => new { x.Id, x.LocName }).ToList();
return Json(ie,JsonRequestBehavior.AllowGet);
}
Мой HTML является: -
<tr>
<td>
Location :
</td>
<td>
<select ng-model="CustLoc" ng-options="l.locname for l in location">
<option value="">-- Select Country --</option>
</select>
<span class="error" ng-show="(f1.uCustLoc.$dirty || f1.$submitted) && f1.uCustLoc.$error.required">Location required!</span>
</td>
</tr>
У меня есть файл CustForm.js для Угловое, в котором я хочу, чтобы заполнить падение вниз, как: -
angular.module('custFormApp', [])
.controller('custDetailController', function ($scope, FileUploadService) {
debugger;
//Variables
$scope.Message = "";
$scope.FileInvalidMessage = "";
$scope.SelectedFileForUpload = null;
$scope.CustName = "";
$scope.CustDoB = "";
$scope.CustPhone = "";
$scope.CustEMail = "";
$scope.CustDescription = "";
$scope.CustGender = "";
$scope.IsFormSubmitted = false;
$scope.IsFileValid = false;
$scope.IsFormValid = false;
//Form Validation
$scope.$watch("f1.$valid", function (isValid) {
$scope.IsFormValid = isValid;
//GetLocList();
});
//File Validation
$scope.ChechFileValid = function (file) {
var isValid = false;
if ($scope.SelectedFileForUpload != null) {
if ((file.type == 'image/png' || file.type == 'image/jpeg' || file.type == 'image/gif' || file.type == 'image/jpg') && file.size <= (512 * 1024)) {
$scope.FileInvalidMessage = "";
isValid = true;
}
else {
$scope.FileInvalidMessage = "Selected file is Invalid. (only file type png,jpg, jpeg and gif and 512 kb size allowed)";
}
}
else {
$scope.FileInvalidMessage = "Image required!";
}
$scope.IsFileValid = isValid;
};
//File Select event
$scope.selectFileforUpload = function (file) {
$scope.SelectedFileForUpload = file[0];
}
//Save File
$scope.SaveFile = function() {
$scope.IsFormSubmitted = true;
$scope.Message = "";
$scope.ChechFileValid($scope.SelectedFileForUpload);
if ($scope.IsFormValid && $scope.IsFileValid) {
FileUploadService.UploadFile($scope.CustName, $scope.CustDoB, $scope.CustPhone, $scope.CustEMail, $scope.CustDescription, $scope.CustGender, $scope.SelectedFileForUpload).then(function (d) {
alert(d.Message);
ClearForm();
}, function (e) {
alert(e);
});
}
else {
$scope.Message = "Please Fill Required Details";
}
};
//Clear form
function ClearForm() {
$scope.CustName = "";
$scope.CustDoB = "";
$scope.CustPhone = "";
$scope.CustEMail = "";
$scope.CustDescription = "";
$scope.CustGender = "";
//as 2 way binding not support for File input Type so we have to clear in this way
//you can select based on your requirement
angular.forEach(angular.element("input[type='file']"), function (inputElem) {
angular.element(inputElem).val(null);
});
$scope.f1.$setPristine();
$scope.IsFormSubmitted = false;
}
function GetLocList() {
$http({
method: 'Get',
url: '/Home/GetLocList'
}).success(function (data, status, headers, config) {
$scope.location = data;
alert(data);
}).error(function (data, status, headers, config) {
$scope.message = 'Unexpected Error';
});
}();
//function getList() {
// debugger;
// var arrLocation = new Array();
// $http.get("/Home/LocList/").success(function (data) {
// $.map(data, function (item) {
// arrLocation.push(item.Id);
// arrLocation.push(item.LocName);
// });
// $scope.list = arrLocation;
// }).error(function (status) {
// alert(status);
// });
//}
//function getList($scope, $http) {
// $http.get("WebService/LocationService.asmx/GetLocation")
// .then(function (response) {
// $scope.list = response.data;
// })
//}
})
//custDetailController Ends
.factory('FileUploadService', function ($http, $q) { // explained abour controller and service in part 2
var fac = {};
fac.UploadFile = function (Name, DoB, Phone, EMail, Description, Gender, Photo) {
var formData = new FormData();
//We can send more data to server using append
formData.append("Name", Name);
formData.append("DoB", DoB);
formData.append("Phone", Phone);
formData.append("EMail", EMail);
formData.append("Description", Description);
formData.append("Gender", Gender);
formData.append("Photo", Photo);
var defer = $q.defer();
$http.post("/Home/SaveFiles", formData,
{
withCredentials: true,
headers: { 'Content-Type': undefined },
transformRequest: angular.identity
})
.success(function (d) {
defer.resolve(d);
})
.error(function (f) {
defer.reject(f);
});
return defer.promise;
}
return fac;
});Но когда я построить и запустить код нет значения приходит в D rop Down List. Как я могу заполнить Drop Down?
Вы можете войти 'console.log (данные)' в 'success' (который должен фактически быть 'then') и посмотреть, получаете ли вы какие-либо данные от вас BE? Также откуда вызывается 'GetLocList()'? – Jax
Я хочу назвать это автоматически при загрузке страницы. – Deepak
Итак, откуда он вызван? Ваш код не показывает, где происходит вызов, если это так, что ваша функция никогда не используется, поэтому данные не возвращаются. – Jax