ViewModel Properties are null

I am getting null values in the PTaxViewModel assessmentSearchParameters in the get method of my PTaxController when I enter a value for each of the inputs in my home page and click the search button.  Any suggestions are appreciated.

Here is my view:
@{
    ViewBag.Title = "Home Page";
    Layout = "_Layout";
}
@model OnlinePayments.ViewModels.PTaxViewModel
@section Scripts {
    <script src="~/lib/angular/angular.min.js"></script>
    <script src="~/lib/angular-route/angular-route.min.js"></script>
    <script src="~/js/app-ptax.js"></script>
    <script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
    <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
    <script src="~/js/ptaxController.js"></script>
}
<div>
    <form novalidate name="myForm" id="myForm" data-ng-controller="ptaxController as vm" data-ng-app="app-ptax" ng-submit="vm.getAssessments()">
        <table class="table-full-width">
            <tr>
                <td class="search-cell">
                    <label for="assessmentNumber">Assessment Number: </label>
                    <input type="text"  id="assessmentNumber" name="assessmentNumber" ng-model="vm.assessmentNumber" />
                    <span asp-validation-for="AssessmentNumber"></span>
                </td>
                <td class="search-cell">
                    <label for="ownerFirstName">Owner First Name: </label>
                    <input asp-for="OwnerFirstName" id="OwnerFirstName" />
                </td>
                <td class="search-cell">
                    <label asp-for="OwnerLastName">Owner Last Name: </label>
                    <input asp-for="OwnerLastName" id="OwnerLastName" />
                </td>
                <td class="search-cell">
                    <label asp-for="PropertyAddress">Property Address: </label>
                    <input asp-for="PropertyAddress" id="PropertyAddress" />
                </td>
                <td class="search-cell">
                    <label asp-for="BillingAddress">Billing Address:</label>
                    <input asp-for="BillingAddress" id="BillingAddress" />
                </td>
            </tr>
        </table>

        <div>
            <br />
            <div class="text-center"> <input type="submit" value="Search" /> </div>
            <br />
            <div ng-show="vm.IsBusy" class="text-center"> <i class="fa fa-spinner fa-spin"></i> Loading...</div>
            <table ng-show="vm.assessmentsLoaded" class="table-full-width table table-responsive table-striped">
                <tr>
                    <td>
                        Assessment Number
                    </td>
                    <td>Owner</td>
                    <td>Description</td>
                    <td colspan="2">Amount Due</td>

                </tr>
                <tr ng-repeat="assessment in vm.assessments">
                    <td>{{ assessment.assessmentNumber }}</td>
                    <td>{{ assessment.ownerName }}</td>
                    <td>{{ assessment.propertyDescription }}</td>
                    <td style="text-align:right">{{ assessment.totalCharges | currency}}</td>
                    <td><button ng-disabled="assessment.totalCharges == 0" class="btn btn-sm btn-primary">Pay This Bill</button></td>

                </tr>
            </table>
        </div>
    </form>
</div>

Open in new window



My ptaxController.js

(function () {
    "use strict";
    angular.module("app-ptax")
        .controller("ptaxController", ptaxController);

    function ptaxController($http) {
        var vm = this;
        vm.assessments = [];
        vm.ErrorMessage = "";
        vm.getAssessments = function () {
            vm.IsBusy = true;
            $http.post("/api/assessments")
                .then(function (response) {
                    try {
                        angular.copy(response.data, vm.assessments);
                        vm.assessmentsLoaded = true;
                    }
                    catch (error) {
                        vm.ErrorMessage = "Copy Failed: " + error.ErrorMessage;
                    }
                },
                function (error) {
                    vm.ErrorMessage = "Assessment Retrieval Failed:" + error.ErrorMessage;
                })
                .finally(function () {
                    vm.IsBusy = false;
                });
        }
    }
})();

Open in new window


My PtaxController.CS

 
 [Route("api/assessments")]
    public class PtaxController : Microsoft.AspNetCore.Mvc.Controller
    {
        private string assessmentNumber;
        private string ownerFirstName;
        private string ownerLastName;
        private string propertyAddress;
        private string billingAddress;

        [HttpPost("")]
        public IActionResult Get(PTaxViewModel assessmentSearchParameters)
        {
            if (ModelState.IsValid)
            {
                assessmentNumber = assessmentSearchParameters.AssessmentNumber ?? "";
                ownerFirstName = assessmentSearchParameters.OwnerFirstName ?? "";
                ownerLastName = assessmentSearchParameters.OwnerLastName ?? "";
                propertyAddress = assessmentSearchParameters.PropertyAddress ?? "";
                billingAddress = assessmentSearchParameters.BillingAddress ?? "";
                try
                {
                    TaxRollProcessing.App_Code.Controller trpController = new TaxRollProcessing.App_Code.Controller();
                    NetMessenger messenger = new NetMessenger();
                    List<Assessment> assessments = trpController.GetAssessments(ownerFirstName, ownerLastName, assessmentNumber, propertyAddress, billingAddress, messenger);
                    return Ok(assessments);
                }
                catch (Exception e)
                {
                    throw e;
                }
                
            }
            return new BadRequestResult();
        }
    }

Open in new window


My PTaxViewModel:

using System.ComponentModel.DataAnnotations;
namespace OnlinePayments.ViewModels
{
    public class PTaxViewModel
    {
        [Required]
        public string AssessmentNumber { get; set; }
        public string OwnerFirstName { get; set; }
        public string OwnerLastName { get; set; }
        public string PropertyAddress { get; set; }
        public string BillingAddress { get; set; }
    }
}

Open in new window


Thank you for your help.
dpardenAsked:
Who is Participating?
 
louisfrCommented:
The model is used to fill the page that is sent to the client, then it is gone.
What you have bound the form to is the vm variable. $http.post could be used to send anything, not necessarily to submit the form.
I think you can pass vm as the second parameter of the post method.
$http.post("/api/assessments", vm)

Open in new window

0
 
louisfrCommented:
You're not passing any data to the post method.
1
 
dpardenAuthor Commented:
I apologize for being dense, but I thought the @model being set in the view would allow model binding to set the values in the PTaxViewModel.  So, how do I pass data to the post method?
0
 
dpardenAuthor Commented:
Thank you for your help.....Here is the modification I needed to get it to work.

 vm.getAssessments = function (assessmentNumber, ownerFirstName, ownerLastName, propertyAddress, billingAddress) {
            vm.IsBusy = true;
            var data = {
                assessmentNumber: assessmentNumber,
                ownerFirstName: ownerFirstName,
                ownerLastName: ownerLastName,
                propertyAddress: propertyAddress,
                billingAddress: billingAddress
            };

            $http.post("/api/assessments", JSON.stringify(data))

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.