【发布时间】：2022-01-03 04:07:44
【问题描述】：
我的 jquery 脚本有问题（我刚开始学习 jQuery）。
每次我通过单击 SaveWorkout 按钮保存锻炼时，锻炼数组中发送的数据都会以某种方式成倍增加。 例如，我用一项运动保存了 2 次锻炼，然后当我想用一项运动保存第三次锻炼时，3 个相同的运动被发送到数组中（cshtml 中的表格 - #detailsTable）。 此外，例如当我用一个练习保存了 2 个锻炼时，当我想用两个练习保存第三个锻炼时，同样的 3 个练习乘以 2，总共发送了 6 个练习。 我试图以某种方式使用 remove () 或 empty () 清除表格，但这没有帮助。
问题可能出在哪里？
感谢大家的帮助
下面我附上了我的cshtml和控制器。
<script>
//Show Modal.
function addNewOWorkout() {
$("#newWorkoutModal").modal();
}
//Add Multiple Exercise.
$("#addToList").click(function (e) {
e.preventDefault();
if ($.trim($("#exerciseName").val()) == "" || $.trim($("#numberOfRepetitions").val()) == "" || $.trim($("#weight").val()) == "") return;
var exerciseName = $("#exerciseName").val(),
numberOfRepetitions = $("#numberOfRepetitions").val(),
weight = $("#weight").val(),
detailsTableBody = $("#detailsTable tbody");
var exerciseItem = '<tr><td>' + exerciseName + '</td><td>' + numberOfRepetitions + '</td><td>' + weight + '</td></tr>';
detailsTableBody.append(exerciseItem);
clearItem();
});
//After Add A New Order In The List, Clear Clean The Form For Add More Order.
function clearItem() {
$("#exerciseName").val('');
$("#numberOfRepetitions").val('');
$("#weight").val('');
}
// After Add A New Order In The List, If You Want, You Can Remove It.
$(document).on('click', 'a.deleteItem', function (e) {
e.preventDefault();
var $self = $(this);
if ($(this).attr('data-itemId') == "0") {
$(this).parents('tr').css("background-color", "#ff6347").fadeOut(800, function () {
$(this).remove();
});
}
});
//After Click Save Button Pass All Data View To Controller For Save Database
function saveWorkout(data) {
return $.ajax({
contentType: 'application/json; charset=utf-8',
dataType: 'json',
type: 'POST',
url: "/Workout/SaveWorkout",
data: data,
success: function (result) {
alert(result);
location.reload();
},
error: function () {
alert("Błąd!")
}
});
}
//Collect Multiple Order List For Pass To Controller
$("#saveWorkout").click(function (e) {
e.preventDefault();
var workoutArr = [];
workoutArr.length = 0;
$.each($("#detailsTable tbody tr"), function () {
workoutArr.push({
Name: $(this).find('td:eq(0)').html(),
RepetitionsNumber: $(this).find('td:eq(1)').html(),
weight: $(this).find('td:eq(2)').html()
});
});
var data = JSON.stringify({
workoutName: $("#workoutName").val(),
exercises: workoutArr
});
$.when(saveWorkout(data)).then(function (response) {
console.log(response);
}).fail(function (err) {
console.log(err);
});
});
</script>
<div class="modal fade" id="newWorkoutModal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4>Dodaj nowy trening</h4>
</div>
<form id="NewWorkoutForm">
<div class="modal-body">
<h5 style="color:#ff6347">Szczegóły treningu</h5>
<hr />
<div class="row">
<input type="hidden" id="WorkoutID" />
<div class="col-12">
<label class="control-label pb-2">
Nazwa treningu
</label>
<div class="col-lg-7 col-md-10">
<input type="text" id="workoutName" name="workoutName" placeholder="" class="form-control" />
</div>
</div>
</div>
<h5 style="margin-top:10px;color:#ff6347">Szczegóły ćwiczenia</h5>
<hr />
<div class="form-horizontal">
@*<input type="hidden" id="OrderId" />*@
<div class="row">
<input type="hidden" id="ExerciseID" />
<div class="col-lg-7 col-md-10">
<label class="control-label pb-2">
Nazwa ćwiczenia
</label>
<input type="text" id="exerciseName" name="exerciseName" placeholder="" class="form-control" />
</div>
<div class="col-lg-3 col-md-4">
<label class="control-label pb-2">
Liczba powtórzeń
</label>
<input type="text" id="numberOfRepetitions" name="numberOfRepetitions" placeholder="" class="form-control" />
</div>
<div class="col-lg-2 col-md-4">
<label class="control-label pb-2">
Ciężar (kg)
</label>
<input type="text" id="weight" name="weight" placeholder="" class="form-control" />
</div>
</div>
<div class="row pt-3 pb-3">
<div class="col-md-4 col-lg-offset-4">
<a id="addToList" class="btn btn-sm btn-primary">Dodaj do listy</a>
</div>
</div>
<table id="detailsTable" class="table">
<thead>
<tr>
<th style="width:40%">Nazwa ćwiczenia</th>
<th style="width:15%">Liczba powtórzeń</th>
<th style="width:15%">Ciężar</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Zamknij</button>
<button id="saveWorkout" type="submit" class="btn btn-success">Zapisz trening</button>
</div>
</form>
</div>
</div>
</div>
控制器中的方法：
public ActionResult SaveWorkout(string workoutName, Exercise[] exercises)
{
string result = "Błąd!";
var userId = User.Identity.GetUserId();
if (workoutName != null || exercises != null)
{
Workout newWorkout = new Workout()
{
Name = workoutName,
CreateDate = DateTime.Now,
UserId = userId
};
db.Workouts.Add(newWorkout);
db.SaveChanges();
var workoutId = db.Workouts.OrderByDescending(w => w.WorkoutID).Select(r => r.WorkoutID).FirstOrDefault();
foreach (var exercise in exercises)
{
Exercise newExercise = new Exercise()
{
Name = exercise.Name,
RepetitionsNumber = exercise.RepetitionsNumber,
Weight = exercise.Weight,
WorkoutID = workoutId
};
db.Exercises.Add(newExercise);
}
db.SaveChanges();
result = "Sukces!";
}
return Json(result, JsonRequestBehavior.AllowGet);
}
【问题讨论】：
-
你调用 SaveChanges 两次。
-
在后端你总是添加新的锻炼对象，你永远不会更新现有的。
-
是的，我知道。我不想更新我的训练。我想创建新的并在其中保存新的练习。但是每次我在 javascript 代码中将练习添加到列表中时，练习都会以某种方式成倍增加。例如，当我只向列表中添加一个练习时（在 javasript 代码中它是“workoutArr”变量，在后面是“练习”变量），多个练习被发送到控制器，例如两个相同的练习，尽管我只在列表中添加了一个。
-
*在后端是“练习”变量
标签： javascript c# jquery .net asp.net-mvc