CourseWorkElectronicsShop/ElectronicsShop/ElectronicsShopShopClientApp/Views/Home/OrderView.cshtml

@using ElectronicsShopContracts.ViewModels
@using ElectronicsShopDataModels.Models

@model (int, Dictionary<int, (IProductModel, int)>)

@{
	ViewData["Title"] = "OrderView";
}

<div class="text-center">
    <h1 class="display-4">Создание корзины</h1>
</div>



<form method="post">
	<div class="row">
		<div class="col-4"></div>
		<div class="col-8">
			<input id="id" type="hidden" name="id" readonly value="@Model.Item1" />
		</div>
	</div>
	<div class=" text-center">
		<div class="row">
			<div class="col-4">Сумма:</div>
			<div class="col-8">
				<input id="sum" type="text" name="sum" readonly />
			</div>
		</div>
		<p>
			<a asp-action="AddProduct">Добавить товар</a>
		</p>
		<table class="table">
			<thead>
				<tr>
					<th>
						Номер
					</th>
					<th>
						Продукт
					</th>
					<th>
						Количество
					</th>
					<th>
						Сумма
					</th>
				</tr>
			</thead>
			<tbody>
				@foreach (var item in Model.Item2) {
					<tr class="element">
							<th>
								@Html.DisplayFor(modelItem => item.Key)
							</th>
							<th>
								@Html.DisplayFor(modelItem => item.Value.Item1.ProductName)
							</th>

							<th class="count">
									@Html.DisplayFor(modelItem => item.Value.Item2)
							</th>

							<th class="countsum">
									@Html.DisplayFor(modelItem => item.Value.Item1.Price)
							</th>
						
							<td>
								<a class="btn btn-primary btn-sm" asp-action="DeleteProductOrder" asp-route-ID="@item.Key">Удалить</a>
							</td>
					</tr>
				}

			</tbody>
		</table>
		<div class="row">
			<div class="col-4"></div>
			<div class="col-8">
				<input type="submit" value="Заказ готова, вернуться!" class="btn btn-primary" />
				<a class="btn btn-primary btn-sm" asp-action="DeleteOrder" asp-route-ID="@Model.Item1">Отменить создание корзины</a>
			</div>
		</div>
	</div>
	<script src="~/lib/jquery/dist/jquery.min.js"></script>
</form>

<script>
	$('btn').on('click', function () {
		calc();
	});

	let sum = 0;
	const elementRows = document.querySelectorAll('.element');
	calc();

	function calc() {
		elementRows.forEach(row => {
			const count = parseInt(row.querySelector('.count').innerHTML, 10);
			const countsum = parseInt(row.querySelector('.countsum').innerHTML, 10);
			const rowTotal = count * countsum;
			sum += rowTotal;
		});
		$('#sum').val(sum);
	}
</script>