使用AngularJS使用MVC EF填充下拉菜單

Question

我最近開始使用AngularJS。我在我的HTML中使用數據庫填充下拉菜單。但是我無法在控制器內部找到適當的解決方案來填充它。下面是我的C＃代碼： -

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下載列表。我如何填充下拉？

Answer 1

所以這裏是@Jax幫助下的解決方案。我改變了CustForm.js文件： -

$scope.GetLocList = function() { 
 
       $http({ 
 
        method: 'Get', 
 
        url: '/Home/GetLocList' 
 
       }).success(function (data, status, headers, config) { 
 
        $scope.location = data; 
 
       }).error(function (data, status, headers, config) { 
 
        $scope.message = 'Unexpected Error'; 
 
       }); 
 
      } 
 

 
      $scope.GetLocList();

不要忘了在角控制器加$ HTTP。改變了我的HTML作爲： -

<select ng-model="CustLoc" ng-options="l.LocName for l in location track by l.Id"> 
 
           <option value="">-- Select Country --</option> 
 
          </select> 
 
          <span class="error" ng-show="(f1.uCustLoc.$dirty || f1.$submitted) && f1.uCustLoc.$error.required">Location required!</span>

最後我的C＃代碼爲： -

[HttpGet] 
    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(ret,JsonRequestBehavior.AllowGet); 
    }