模型未填充 JSON 数据

Question

我是 Angular JS 的新手，在某个特定问题上停留了很长时间。

对于 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>

并且在输入文本框中我们可以输入一个值并进行快速搜索。

这是我的控制器代码：

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;
    });
},

即使参数已正确记录在控制台中。

这是我希望数据绑定到的模型的样子：

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; }
}

Answer 1

您的模型应该具有与 postparams 中同名的所有属性 json...那么只有它会在控制器中映射到它...它是否具有同名的所有属性？

Answer 2

如果将 [FromBody] 添加到 AdvSearch 方法中，是否可以解决问题？此外，在 AdvSearch 中，您将 ListCaseInputSearchModel 作为类型。

AdvSearch([FromBody] CaseInputSearchModel model)

编辑：没有注意到你正在发送一个数组。试试这个方法签名：

AdvSearch([FromBody] IEnuermable<CaseInputSearchModel> model)

模型未填充 JSON 数据

Model not populate with JSON Data

javascript

twitter-bootstrap

angularjs

angular-ui-grid