Ich habe vor kurzem begonnen, AngularJS zu verwenden. Ich habe ein Drop-Down in meinem HTML, das ich mit Datenbank füllen möchte. Aber ich kann keine richtige Lösung in einem Controller finden, wie man sie auffüllt. Im Folgenden finden Sie # meine C-Code: -Populate Dropdown mit MVC EF mit 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);
}
Mein HTML ist: -
<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>
Ich habe eine CustForm.js Datei für Angular, in denen ich möchte aufzufüllen Drop Down als: -
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;
});
Aber wenn ich den Code keine Werte kommt in D Aufbau und Betrieb Rop Down Liste. Wie kann ich Drop Down befüllen?
können Sie sich 'console.log (Daten)' im 'success' (die sollte eigentlich "dann" sein) und sehen ob du irgendwelche Daten von dir bekommst? Wo wird 'GetLocList()' auch aufgerufen? – Jax
Ich möchte es beim Laden der Seite automatisch aufrufen. – Deepak
Woher wird es abgerufen? Ihr Code zeigt nicht an, wo der Aufruf stattfindet, wenn dies der Fall ist, wird Ihre Funktion nie verwendet, daher werden keine Daten zurückgegeben. – Jax