2016-04-26 114 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