0
最近AngularJSを使用し始めました。私は自分のHTMLにドロップダウンを持っていますが、これはデータベースを使用して取り込みたいものです。しかし、コントローラーの内部に適切なソリューションを見つけることができません。以下は、私のC#のコードは次のとおりです。 -AngularJSを使用してMVC EFをドロップダウンします
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にしていないコードをビルドして実行します下リスト。ドロップダウンにどのように配置できますか?
あなたは 'SUCCESS'に' 'はconsole.log(データ)ログインできます(これは実際には 'then')、あなたがあなたから戻ってくるデータを取得しているかどうか確認してください。 'GetLocList()'はどこから呼び出されますか? – Jax
ページの読み込み時に自動的に呼び出したい。 – Deepak
それはどこから呼び出されますか?あなたのコードは呼び出しがどこで起こったかを示していません。その場合、あなたの関数は決して使用されないので、データは返されません。 – Jax