【发布时间】：2019-04-16 07:42:53
【问题描述】：
我使用 asp.net web api 和 angularjs (javascript) 编写了简单的 web 应用程序。在这个应用程序中，我有一个主网格，当我单击行内的按钮时，将打开模态对话框。模态对话框包含有许多项目的详细网格（表格）。见下图：
他的数据中的每个项目都包含 parentId。在我的例子中，每个细节网格项都包含 id = 1，我们可以在下一张图片中看到：
此解决方案（当我单击“加号”按钮时）工作正常（只有 Kolicina 字段可以进行更改）。但是，我们必须逐行单击加号按钮以保存所有更改。我的问题是，如何实现功能，在模式对话框中我们将只有一个按钮来保存所有行更改。我假设应该将数组（所有项目更改）转发到 web api 控制器方法。 感谢您提供任何有用的信息。
编辑 我的 html 模态看起来像：
<div id="vipZaglavljeModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content" style="overflow:scroll;max-height:700px;width:750px;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">VIP Stavke</h4>
</div>
<div class="modal-body">
<table id="myTableModal" class="table table-bordered table-condensed">
<thead>
<tr>
<th style="padding-left:15px;font-size:medium;">Id</th>
<th style="font-size:medium">Sifra</th>
<th style="font-size:medium">Naziv</th>
<th style="font-size:medium">Kolicina</th>
<th style="font-size:medium;width:70px;">Prodavnica</th>
<th style="font-size:medium">***</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="stavka in stavke track by $index">
<td style="padding-left:15px;font-size:medium;padding-top:12px;">{{stavka.Id}}</td>
<td style="font-size:medium;padding-top:12px;">{{stavka.Sifra}}</td>
<td style="font-size:medium;padding-top:12px;">{{stavka.Naziv}}</td>
<td style="font-size:medium;padding-top:12px;"><input type="text" class="form-control" ng-model="stavka.Kolicina" style="width:70px;margin-top:-5px;"/></td><!--ng-class="{ nakonStoKliknesSave: kliknutoNaSave[$index] }"-->
<td style="font-size:medium;padding-top:12px;">{{stavka.Prodavnica}}</td>
<td style="font-size:medium;padding-top:12px;"><button ng-click="vipZaglavljePut(stavka.Id, stavka)" ng-disabled="((formatDateScope(stavka.VIPZaglavlje.Pocetak) < trenutniDatumIVrijeme && formatDateScope(stavka.VIPZaglavlje.Kraj) < trenutniDatumIVrijeme) || (formatDateScope(stavka.VIPZaglavlje.Pocetak) > trenutniDatumIVrijeme && formatDateScope(stavka.VIPZaglavlje.Kraj) > trenutniDatumIVrijeme) || (formatDateScope(stavka.VIPZaglavlje.Pocetak) > trenutniDatumIVrijeme && formatDateScope(stavka.VIPZaglavlje.Kraj) < trenutniDatumIVrijeme))" class="btn btn-primary" style="margin-top:-5px">+</button></td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" style="font-size:medium">OK</button>
<!--<button type="button" class="btn btn-primary" ng-click="osnovnaSredstvaDelete()" style="font-size:medium">Da</button>-->
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
【问题讨论】：
-
你能展示你的代码吗？
-
我可以。这是 angularjs 服务函数：
var _vipZaglavljePut = function (id, vipZaglavlje) { var deferred = $q.defer(); $http.put("/api/VIPZaglavlje/" + id, vipZaglavlje).then(function (result) { deferred.resolve(result.data); }, function () { deferred.reject(); }); return deferred.promise; }vipZaglavlje 是对象。 -
这是 angularjs 控制器功能：
$scope.vipZaglavljePut = function (id, vipZaglavlje) { VIPZaglavlje.vipZaglavljePut(id, vipZaglavlje).then( function () { for (var i = 0; i < $scope.stavke.length; i++) { if ($scope.stavke[i].Id == id) { $scope.stavke[i] = vipZaglavlje; } } }, function () { alert("Desila se greška!") }); } -
这是web api方法[httpput]：
// PUT: api/VIPZaglavlje/5 public void Put(int id, [FromBody]VIPStavkePutModel value) { try { var userName = User.Identity.Name; var VIPStavke = _db.VIPStavke.Where(x => x.Id.Equals(id)).FirstOrDefault(); VIPStavke.Kolicina = value.Kolicina; _db.SaveChanges(); } catch (Exception ex) { var message = ex.Message; } } -
在 html 中，我有带有 ng-repeat 循环的 html 表（如上图 1 所示）。取而代之的是蓝色的“加号”按钮，我只想在模式底部实现一个按钮（用于保存所有更改）。
标签： javascript angularjs asp.net-web-api asp.net-mvc-5