Unexpected token '<' hatası alıyorum
<script type="text/javascript">
document.querySelector("#add-item").addEventListener("click", function()
{
document.querySelector("#orderTable tbody").innerHTML +=
'<tr>'+
'<td>'+
'<select asp-for="@Model.OrderDetail.ProductId" class="form-select" required>'+
@{
if (Model.Products.Count > 0)
{
<option>Bir ürün seçiniz</option>
@foreach (var item in Model.Products)
{
<option value="@item.Id">@item.Name</option>
}
}
else
{
<option>Hiçbir ürün yok</option>
}
}
'</select>'+
'</td>'+
'<td>'+
'<div class="m-0">'+
'<input asp-for="@Model.OrderDetail.Quantity" type="number" class="form-control" value="" />'+
'</div>'+
'</td>'+
'</tr>';
});
document.querySelector("#btn_remove").addEventListener("click", function(){
document.querySelector('#row').remove();
});
</script>
Unexpected toke '<' hatası alıyorum
Öncelikle, lütfen soru hazırlarken biraz daha özenli olun.
Kodun düzenlenmiş hali şu şekilde:
<script type="text/javascript">
document.querySelector("#add-item").addEventListener("click", function()
{
document.querySelector("#orderTable tbody").innerHTML +=
'<tr>'+
'<td>'+
'<select asp-for="@Model.OrderDetail.ProductId" class="form-select" required>'+
@{
if (Model.Products.Count > 0)
{
<option>Bir ürün seçiniz</option>
@foreach (var item in Model.Products)
{
<option value="@item.Id">@item.Name</option>
}
}
else
{
<option>Hiçbir ürün yok</option>
}
}
'</select>'+
'</td>'+
'<td>'+
'<div class="m-0">'+
'<input asp-for="@Model.OrderDetail.Quantity" type="number" class="form-control" value="" />'+
'</div>'+
'</td>'+
'</tr>';
});
document.querySelector("#btn_remove").addEventListener("click", function(){
document.querySelector('#row').remove();
});
</script>
Diyelim ki;
Model.OrderDetail.ProductId = 123456
Model.Products.Count = 0
Model.OrderDetail.Quantity = 2
değerleri gelmiş olsun. Bu durumda sunucu bu dosyayı istemciye göndermeden önce aşağıdaki şekilde derler:
<script type="text/javascript">
document.querySelector("#add-item").addEventListener("click", function()
{
document.querySelector("#orderTable tbody").innerHTML +=
'<tr>'+
'<td>'+
'<select asp-for="123456" class="form-select" required>'+
<option>Hiçbir ürün yok</option>
'</select>'+
'</td>'+
'<td>'+
'<div class="m-0">'+
'<input asp-for="2" type="number" class="form-control" value="" />'+
'</div>'+
'</td>'+
'</tr>';
});
document.querySelector("#btn_remove").addEventListener("click", function(){
document.querySelector('#row').remove();
});
</script>
Görüldüğü gibi, derleme sonrasında <option>Hiçbir ürün yok</option>
kodu, string birleştirmelerinin arasına giriyor. Bu kodu da string halde ve kendinden sonraki string'le birleşecek şekilde yazmak gerek.
Bunu yapmanın en garanti yolu string birleştirme yapmak yerine tüm ifadeyi ters tırnaklar arasında yazmak olabilir:
<script type="text/javascript">
document.querySelector('#add-item').addEventListener('click', function()
{
document.querySelector('#orderTable tbody').innerHTML += `
<tr>
<td>
<select asp-for="@Model.OrderDetail.ProductId" class="form-select" required>
@{
if (Model.Products.Count > 0)
{
<option>Bir ürün seçiniz</option>
@foreach (var item in Model.Products)
{
<option value="@item.Id">@item.Name</option>
}
}
else
{
<option>Hiçbir ürün yok</option>
}
}
</select>
</td>
<td>
<div class="m-0">
<input asp-for="@Model.OrderDetail.Quantity" type="number" class="form-control" value="" />
</div>
</td>
</tr>
`;
});
document.querySelector('#btn_remove').addEventListener('click', function(){
document.querySelector('#row').remove();
});
</script>
Bu durumda kod aşağıdaki gibi derlenip istemciye iletilir:
<script type="text/javascript">
document.querySelector('#add-item').addEventListener('click', function()
{
document.querySelector('#orderTable tbody').innerHTML += `
<tr>
<td>
<select asp-for="123456" class="form-select" required>
<option>Hiçbir ürün yok</option>
</select>
</td>
<td>
<div class="m-0">
<input asp-for="2" type="number" class="form-control" value="" />
</div>
</td>
</tr>
`;
});
document.querySelector('#btn_remove').addEventListener('click', function(){
document.querySelector('#row').remove();
});
</script>