unexpected number hatası
<script type="text/javascript">
document.querySelector('#add-item').addEventListener('click', function()
{
document.querySelector('#orderTable tbody').innerHTML += `
<tr>
<td>
<select asp-items="@Model.Products" asp-for="@Model.OrderDetail.ProductId" class="form-select">
@{
if (Model.Products.Count > 0)
{
<option>Lütfen ürün seçiniz</option>
@foreach (var item in Model.Products)
{
<option value="@item.Value">@item.Text</option>
}
}
else
{
<option>Hiçbir ürün yok</option>
}
}
</select>
</td>
<td>
<div class="m-0">
<input asp-for="@Model.OrderDetail.Quantity" class="form-control" value="" />
</div>
</td>
<td>
<button type="button" class="btn btn-outline-danger" id="btn_remove">
Öğeyi Sil
</button>
</td>
</tr>
`;
});
document.querySelector('#btn_remove').addEventListener('click', function(){
var row = document.querySelector("#orderTable").rows.length - 1;
document.querySelector('#orderTable tbody').removeChild();
});
</script>
Ben .NET kullanmadığım için atladığım bir husus var.
Razor, javascript içindeki string ifadede bulunan html formlarını işleyemez sanıyorum.
<script type="text/javascript">
// select'e eklenecek option'ların string'ini oluşturuyorum.
// Bu bir form işleme değil, sıradan bir foreach döngüsü. Razor bunu işleyecektir.
var productOptions = `
<option>Lütfen ürün seçiniz</option>
@foreach (var item in Model.Products)
{
<option value="@item.Value">@item.Text</option>
}
`;
// #add-item'e basıldığında tabloya satır eklenmesi
// Burada select'i razor'un düzenlemesi için asp-* attribute'leri eklemiyorum.
// Ayrıca silme butonunun da id ile değil class ile seçilebilmesi için btn-remove ifadesini class olarak yazıyorum.
document.querySelector('#add-item').addEventListener('click', function () {
document.querySelector('#orderTable tbody').innerHTML += `
<tr>
<td>
<select class="form-select">
${productOptions}
</select>
</td>
<td>
<div class="m-0">
<input type="number" class="form-control" />
</div>
</td>
<td>
<button type="button" class="btn btn-outline-danger btn-remove">
Öğeyi Sil
</button>
</td>
</tr>
`;
});
// Silme butonları da DOM'a dinamik olarak ekleneceği için olay dinleyicinin buna göre düzenlenmesi gerekir.
// #orderTable > tbody daha önce DOM'da bulunuyorsa, click olay dinleyicisini buna verebiliriz.
// tbody'nin herhangi bir yerine click edildiğinde bu click edilen yerin btn-remove class'ına sahip olup olmadığına bakarak işlem yaparız.
// Yine karışmaması için, bu tıklanan butonun kapsayıcısı olan tr'nin silinmesi için e.target.closest('tr') ile satırı seçip .remove() ile sileriz.
document.querySelector('#orderTable tbody').addEventListener('click', function (e) {
if (e.target && e.target.classList.contains('btn-remove')) {
e.target.closest('tr').remove();
}
});
</script>
Bu script'in çalışabileceği örnek bir html kodu:
Aşağıdaki kodu, yukarıda yazdıklarımı prompt ederek Chat GPT'ye oluşturttum:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sipariş Ekleme</title>
<!-- Bootstrap için CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<h2>Sipariş Ekleme</h2>
<!-- Sipariş Ekle Butonu -->
<button id="add-item" type="button" class="btn btn-primary mb-3">Yeni Sipariş Ekle</button>
<!-- Sipariş Tablosu -->
<table id="orderTable" class="table table-bordered">
<thead>
<tr>
<th>Ürün</th>
<th>Miktar</th>
<th>İşlem</th>
</tr>
</thead>
<tbody>
<!-- Başlangıçta tablo boş -->
</tbody>
</table>
</div>
<!-- Razor'dan gelecek JavaScript kodu -->
<script type="text/javascript">
// Ürün dropdown seçeneklerini Razor ile JS değişkenine aktar
var productOptions = `
<option>Lütfen ürün seçiniz</option>
@foreach (var item in Model.Products)
{
<option value="@item.Value">@item.Text</option>
}
`;
// Yeni öğe ekleme işlemi
document.querySelector('#add-item').addEventListener('click', function () {
document.querySelector('#orderTable tbody').innerHTML += `
<tr>
<td>
<select class="form-select">
${productOptions}
</select>
</td>
<td>
<div class="m-0">
<input type="number" class="form-control" />
</div>
</td>
<td>
<button type="button" class="btn btn-outline-danger btn-remove">
Öğeyi Sil
</button>
</td>
</tr>
`;
});
// Silme işlemi (Olay delegasyonu)
document.querySelector('#orderTable tbody').addEventListener('click', function (e) {
if (e.target && e.target.classList.contains('btn-remove')) {
e.target.closest('tr').remove();
}
});
</script>
<!-- Bootstrap için JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>