带有Angular和.net核心的select选项

Question

I have angular controller for get and post some data. I made two controller to work correctly and now when I made 3rd one with mixing two previous controllers get and post doesn't work. Could you help to find a problem ? Here is a code. sparePartController.js //sparePartController.js

(function () {

    "use strict";

    angular.module("app")
        .controller("sparePartController", sparePartController);

    function sparePartController($http)
    {
        var vm = this;

        vm.spareParts = [];

        vm.newSparePart = {};

        vm.errorMessage = "";

        vm.isBusy = true;

        $http.get("/spares/getAll")
            .then(function (response) {
                //success
                angular.copy(response.data, vm.spareParts);
            }, function (error) {
                vm.errorMessage = error;
            }).finally(function () {
                vm.isBusy = false;

            });

        vm.addSparePart = function () {

            vm.isBusy = true;

            vm.errorMessage = "";
            $http.post("/spares", vm.newSparePart)
                .then(function (response) {
                    console.log("test");
                    vm.spareParts.push(response.data);
                    vm.newSparePart = {};
                }, function () {
                    console.log = "failed to save new spare";
                    vm.errorMessage = "failed to save new spare";
                }).finally(function () {
                    vm.isBusy = false;

                });

        };
    }
})();

Index.cshtml to show spare parts and add new one

@model IEnumerable<RnD.Models.ViewModels.SparePartViewModel>
@{
    ViewBag.Title = "Spare Parts List";
}

@section scripts{
    <script src="~/lib/angular/angular.js"></script>
    <script src="~/js/app.js"></script>
    <script src="~/js/sparePartController.js"></script>
    <script src="~/js/spareTypeController.js"></script>
    <script src="~/js/machineController.js"></script>

}

<div class="row" ng-app="app" ng-controller="sparePartController as vm">
    <!-- Start Modal-->
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
        Create New Spare Part
    </button>
    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                </div>
                <div class="modal-body">
                    <form novalidate name="newSpareForm" ng-submit="vm.addSparePart()">
                        <div class="form-group">
                            <label for="InternalCode">Internal Code</label>
                            <input class="form-control" type="text" placeholder="Internal Code" id="InternalCode" ng-model="vm.newSparePart.internalCode" required min="3" />
                        </div>
                        <div class="form-group" ng-controller="machineController as machineVM">
                            <label>Machine Type</label>
                            <select class="form-control" ng-model="machineVM.machineType" ng-options="machine.name for machine in machineVM.machines"></select>
                        </div>
                        <div class="form-group" ng-controller="spareTypeController as spareVM">
                            <label>Spare Type</label>
                            <select class="form-control" ng-model="spareVM.id">
                                <option ng-repeat="spare in spareVM.spares" value="{{spare.id}}">{{spare.name}}</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <input type="submit" value="Add" class="btn btn-success" />
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

                </div>
            </div>
        </div>
        <!-- End Modal-->

    </div>
    <hr />
    <div class="panel panel-default" ng-repeat="spare in vm.spareParts">
        <div class="panel-heading">
            {{spare.internalCode}} //it was vm.internalCode
        </div>
        <div class="panel-body">

        </div>
        <div class="panel-footer">

        </div>
    </div>
</div>

PS To add, when I want to post I have problem to catch value from select. Internal code is recognized from angular controller but machinetype it is not recognized that filed always is null.

here is modelview class

public class SparePartViewModel
    {
        [Required]
        [StringLength(100)]
        public string InternalCode { get; set; }

        [StringLength(4096)]
        public string Description { get; set; }

        [StringLength(255)]
        public string NameOnFolder { get; set; }

        public decimal? Enter { get; set; }

        public decimal? Exit { get; set; }

        public decimal? Thickness { get; set; }

        public string Band { get; set; }

        public string Color { get; set; }

        public bool Elastic { get; set; }

        [Required]
        public MachineType MachineType { get; set; }

        [Required]
        public virtual SpareType SpareType { get; set; }

    }

I even try in index.cshtml to put this code <select class="form-control" ng-model="vm.newSparePart.machineType" ng-options="machine.name for machine in machineVM.machines"></select> but in this case when I call [From Body] my viewModel is null

Here is my SparePartsController.cs

[Route("/spares")]
    [Authorize]
    public class SparePartsController : Controller
    {
        private ILogger<SparePartsController> _logger;
        private ISparePartRepository _repository;

        public SparePartsController(ISparePartRepository repository, ILogger<SparePartsController> logger)
        {
            _logger = logger;
            _repository = repository;
        }

        [HttpGet("")]
        public IActionResult Index()
        {
            return View();
        }

        [HttpGet("getAll")]
        public IActionResult Get()
        {
            try
            {
                var results = _repository.GetAllSpares();

                return Ok(Mapper.Map<IEnumerable<SparePartViewModel>>(results));

            }
            catch (Exception ex)
            {
                _logger.LogError($"Failed to get all Spares : {ex}");
                return BadRequest("Error Occurred");
            }
        }

        [HttpPost("")]
        public async Task<IActionResult> Post([FromBody]SparePartViewModel viewModel)
        {
            if (ModelState.IsValid)
            {
                var newSpare = Mapper.Map<SparePart>(viewModel);

                _repository.AddSpare(newSpare);
                if (await _repository.SaveChangesAsync())
                {
                    return Created($"spare/{newSpare.InternalCode}", Mapper.Map<SparePartViewModel>(newSpare));
                }
            }
            return BadRequest("Failed to save spare.");
        }
    }

Answer 1

I see a few things off here. 1. I don't think /spares is the full URL to the add method. 2. Even if it were, you still need to send it a correct signature - ie the items within the object you send need to match with items in the add spares method signature. 3. I don't see where your newSparePart object is getting assigned values; it's just an empty object. Share the method signature for your add spare method so we can verify that the serialized object. Which brings up 4. You likely need to serialize your object to json: JSON.stringify(vm.newSparePart) when you send it via HTTP post.