Angularjs 选择带有Angular和.net core的选项

我有一个角度控制器来获取和发布一些数据。 我做了两个控制器来正确工作，现在当我做第三个控制器时，混合了两个之前的控制器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>

我甚至尝试在index.cshtml中输入此代码

，但在这种情况下，当我调用[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.");
        }
    }

[路由（“/spares”）]
[授权]
公共类SparePartsController:控制器
{
私人ILogger_记录器；
专用ISparePartRepository\u存储库；
公共SparePartsController（ISparePartRepository存储库，ILogger记录器）
{
_记录器=记录器；
_存储库=存储库；
}
[HttpGet（“”）
公共IActionResult索引（）
{
返回视图（）；
}
[HttpGet（“getAll”）]
public IActionResult Get（）
{
尝试
{
var results=_repository.GetAllSpares（）；
返回Ok（Mapper.Map（results））；
}
捕获（例外情况除外）
{
_logger.LogError（$“无法获取所有备件：{ex}”）；
返回错误请求（“发生错误”）；
}
}
[HttpPost（“”）
公共异步任务发布（[FromBody]SparePartViewModel viewModel）
{
if（ModelState.IsValid）
{
var newSpare=Mapper.Map（viewModel）；
_repository.AddSpare（newSpare）；
if（wait_repository.saveChangesSync（））
{
创建的返回（$“spare/{newSpare.InternalCode}”，Mapper.Map（newSpare））；
}
}
返回BADDREQUEST（“保存备件失败”）；
}
}

我在这里看到了一些东西。1.我认为/spares不是add方法的完整URL。2.即使是，您仍然需要向其发送正确的签名，即您发送的对象中的项需要与add spares方法签名中的项匹配。3.我看不出NewParePart对象在哪里获得赋值；它只是一个空的物体。共享addspare方法的方法签名，以便我们可以验证序列化对象是否正确。这带来了4。当您通过HTTP post发送对象时，可能需要将其序列化为json:json.stringify（vm.newSparePart）。

我更新代码，我求解以显示数据。但仍然需要帮助来找出发布时的问题所在。Url是正确的。您的不正确的NewParepart在发布期间不是emtpy对象，仅在开始时。当您调用http promise并发送数据时，它正在与ng模型链接，并且应该使用值发布。看起来SparePartViewModel需要Elastic、MachineType和SpareType。我看不出你的角度模型在哪里填充了这个。。。另外，在通过帖子发送数据之前，您是否尝试过序列化数据？当我遇到这种情况时，我会简化问题。创建一个带有基本、简单的“SimpleViewModel”的边项目，该边项目包含字符串“SimpleCode”而没有其他内容。在.NET控制器和angular服务中设置POST方法。创建一个角度控制器，其中包含一个预填充的模型以发送到服务，并使用简单的HTML按钮将其发送。一旦你成功了，就给你的“SimpleViewModel”添加一个不可为空的“int”变量，并给你的角度模型添加必要的值，然后再试一次，等等。。最终你们会得到一个“啊哈”时刻。其他字段并不是必需的，你们可以从实体中看到。只有必填字段是内部代码和最后一个虚拟字段。我会像你说的那样简化，那不是问题。我的问题是如何从angular填充虚拟财产，为什么不使用我的方法，有什么不对？我设法填充SparePartViewModel中的所有字段，捕获值的唯一问题是MachineType和SpareType，所有其他字段都在工作。

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