2016-04-26 154 views
1

我是Angular JS的新手,在特定問題上長時間陷入困境。模型不填充JSON數據

對於UI網格行,列值將是linkcelltemplate。點擊一個Bootstrap模式彈出窗口打開,並有一個case quick search functionality

下面是一段代碼:

<div ng-controller="CaseSearchCtrl"> 
    <div ng-show="case.togglePleaseWait"> 
     <div class="refresh" style="padding:15px;width:100%;height:100px;"> 
      <h4>Please wait....</h4> 
     </div> 
    </div> 

    <div class="panel panel-default"> 
     <div class="panel-heading text-center"> 
      Case Search 
     </div> 

     <table class="table table-striped"> 
      <tr> 
       <td> 
        <select name="selSearchType" id="selSearchType" class="form-control" ng-model="case.searchTerm" 
          ng-init="case.searchTerm == 'caseNo'" ng-options="o as o for o in case.searchTerms"></select> 
       </td> 
       <td><input type="text" class="form-control" placeholder="enter search term" ng-model="case.input" /></td> 
       <td><button class="btn btn-default" type="button" ng-click="case.quickSearch()">Quick Search</button></td> 
      </tr> 
     </table>  
    </div> 
</div> 

而且在輸入文本框,我們可以輸入一個值,做一個快速搜索。

enter image description here

這裏是我的控制器代碼片段:

TransactionModule.controller("CaseSearchCtrl", ['$scope', '$uibModal', 'TransactionServices', 'CaseServices', 'CaseDataServices', 'TransactionDataServices', function ($scope, $uibModal, TransactionServices, CaseServices, CaseDataServices,TransactionDataServices) { 

    /* Case implementation starts*/ 
    $scope.case = { 

     searchTerm: "caseNo",  
     searchTerms: caseSearchTerms(), 
     toggleQuickSearch: true, 
     togglePleaseWait: false, 
     name: "", 
     number: "", 
     type: "", 
     constName: "", 
     userName: "", 
     status: "", 
    } 

    $scope.case.quickSearch = function() { 
     $scope.case.togglePleaseWait = true; 

     console.log($scope.case.input); 

     if ($scope.case.searchTerm == "caseNo") { 
      $scope.case.number = $scope.case.input; 
     } 
     else if ($scope.case.searchTerm == "caseName") { 
      $scope.case.name = $scope.case.input; 
     } 
     else if ($scope.case.searchTerm == "constituentName") { 
      $scope.case.constName = $scope.case.input; 
     } 
     else if ($scope.case.searchTerm == "userName") { 
      $scope.case.userName = $scope.case.input; 
     } 
     else if ($scope.case.searchTerm == "status") { 
      $scope.case.status = $scope.case.input; 
     } 
     else if ($scope.case.searchTerm == "type") { 
      $scope.case.type = $scope.case.input; 
     } 
     var postParams = [ 
     { 
      "CaseId": $scope.case.number, 
      "CaseName": $scope.case.name, 
      "ReferenceSource" : "", 
      "ReferenceId" : "", 
      "CaseType": $scope.case.type, 
      "CaseStatus": $scope.case.status, 
      "ConstituentName": $scope.case.constName, 
      "UserName": $scope.case.userName, 
      "ReportedDateFrom" : "", 
      "ReportedDateTo" : "", 
      "UserId": $scope.case.userName 
     }] 

     console.log("Post params are"); 

     console.log(postParams); 


     CaseServices.getCaseAdvSearchResults(postParams).then(function (result) { 
      if (result.length > 0) { 
       $scope.case.togglePleaseWait = false; 
       //constMultiDataService.setData(result, HOME_CONSTANTS.QUICK_CASE_SEARCH); 
       console.log("Setting results for Quick search in TransactionDataServices"); 
       console.log(result); 
      } .......................... 

但這裏的CaseInputSearchModel而從控制器傳遞到Web服務始終是NULL。但在控制檯中,我可以看到傳遞的列表。

getCaseAdvSearchResults: function (postCaseSearchParams) { 
    console.log("Before sending to controller"); 
    console.log(postCaseSearchParams); 
    return $http.post(BasePath + "CaseNative/AdvSearch", postCaseSearchParams, { 
     // return $http.post(BasePath + "Home/WriteCaseRecentSearches", postCaseSearchParams, { 
     headers: { 
      "Content-Type": "application/json", 
      "Accept": "application/json" 
     } 
    }).then(function (result) { 
     $http.post(BasePath + "Home/WriteCaseRecentSearches", postCaseSearchParams, { 
      headers: { 
       "Content-Type": "application/json", 
       "Accept": "application/json" 
      } 
     }); 
     console.log(result); 
     return result.data; 
    }); 
}, 

enter image description here

即使參數在控制檯登錄正確。

enter image description here

這裏是示範如何,我想對數據進行約束的樣子:

public class CaseInputSearchModel 
{ 
    public string CaseId { get; set; } 
    public string CaseName { get; set; } 
    public string ReferenceSource { get; set; } 
    public string ReferenceId { get; set; } 
    public string CaseType { get; set; } 
    public string CaseStatus { get; set; } 
    public string ConstituentName { get; set; } 
    public string UserName { get; set; } 
    public string ReportedDateFrom { get; set; } 
    public string ReportedDateTo { get; set; } 
    public string UserId { get; set; } 
} 
+0

你能告訴你如何將結果映射回模型嗎?我看到你在請求中手動將camelCase映射到PascalCase。您可能只想使用JSON.Net CamelCasePropertyNamesContractResolver() – Martin

+0

您可以在Chrome控制檯中打開「網絡」選項卡,並檢查發佈請求的有效內容是否實際上包含您期望的內容? – noppa

回答

1

如果添加[FromBody]AdvSearch方法這是否解決?另外,在AdvSearch中,您有ListCaseInputSearchModel作爲類型。

AdvSearch([FromBody] CaseInputSearchModel model)

編輯: 沒注意到你發送一個陣列。試試這個方法簽名:

AdvSearch([FromBody] IEnuermable<CaseInputSearchModel> model)

+0

要將其轉換爲列表,我只發送json數組。它不應該被映射嗎? – StrugglingCoder

+0

難道你只是'IEnumerable '作爲類型? – Stephen

+0

列表不起作用的具體原因是什麼? – StrugglingCoder

1

烏爾模型應該都具有相同名稱的屬性,如postparams JSON ...那麼只有它將被映射到控制器中...它是否具有所有具有相同名稱的屬性?

+0

請參閱最新的問題。我已附上標準守則。 – StrugglingCoder

+0

嘗試使用json.stringify(postCaseSearchParams),同時將json傳遞到控制器.. – 2016-04-26 17:57:50