StrugglingCoder StrugglingCoder - 7 months ago 11
Javascript Question

Model not populate with JSON Data

I am new to Angular JS and stuck for long time on a particular issue.

For a UI Grid row , a column value would be in

linkcelltemplate
. And on click of that a Bootstrap Modal popup opens up and that has a
case quick search functionality
.

Here is the piece of code :

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


And in the input text box we can enter a value and do a quick search.

enter image description here

Here is my controller piece of code :

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


But here the
CaseInputSearchModel
while passing from the controller to web service is always
NULL
. But in the console I can see the list being passed.

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

Even though the parameters are logged in the console properly.

enter image description here

Here is how the Model to which I want the data to be bound looks like :

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

If you add [FromBody] to the AdvSearch method does that fix it? Also, in the AdvSearch you have ListCaseInputSearchModel as the type.

AdvSearch([FromBody] CaseInputSearchModel model)

EDIT: Didn't notice you were sending an array. Try this method signature:

AdvSearch([FromBody] IEnuermable<CaseInputSearchModel> model)

Comments