帶有Angular和.net核心的select選項

Question

我有用於獲取和發布一些數據的角度控制器。 我使兩個控制器正常工作，現在當我將第三個控制器與之前的兩個控制器混合使用get和post時不起作用。 你能幫忙找到問題嗎？ 這是代碼。 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顯示零件並添加新零件

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

附言：要添加，當我要發布時，我很難從select中獲取價值。 內部代碼可從角度控制器識別，但無法識別機器類型，因此字段總是為空。

這是modelview類

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

    }

我什至嘗試在index.cshtml中將以下代碼放入<select class="form-control" ng-model="vm.newSparePart.machineType" ng-options="machine.name for machine in machineVM.machines"></select>但在這種情況下，當我調用[From Body]時，我的viewModel為null

這是我的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

我在這里看到一些事情。 1.我不認為/ spares是add方法的完整URL。 2.即使是，您仍然需要向其發送正確的簽名-即，您發送的對象中的項目需要與add spares方法簽名中的項目匹配。 3.我看不到newSparePart對象在哪里分配值； 它只是一個空對象。 為您的添加備用方法共享方法簽名，以便我們可以驗證序列化的對象。 出現了4.您可能需要通過HTTP發布將對象序列化為json：JSON.stringify（vm.newSparePart）。