136 lines
5.4 KiB
Plaintext
136 lines
5.4 KiB
Plaintext
@model CreateSliderDto
|
||
@{
|
||
ViewData["Title"] = "CreateSlider";
|
||
Layout = "~/Views/AdminLayout/Index.cshtml";
|
||
}
|
||
|
||
<div class="content">
|
||
<div class="container-fluid">
|
||
<h4 class="page-title">Ana Sayfa Önce Çıkanlar İşlemleri</h4>
|
||
<div class="row">
|
||
<div class="col-md-12">
|
||
<form asp-action="CreateSlider" method="post" enctype="multipart/form-data" id="sliderForm">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<div class="card-title">Yeni Slider Girişi</div>
|
||
</div>
|
||
<div class="card-body">
|
||
<!-- Lokasyon -->
|
||
<div class="form-group row">
|
||
<label for="Title" class="col-md-2 col-form-label">Lokasyon</label>
|
||
<div class="col-md-10">
|
||
<input type="text" class="form-control" asp-for="Location" id="Location">
|
||
<span asp-validation-for="Location" class="text-danger"></span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Sqm -->
|
||
<div class="form-group row">
|
||
<label for="Sqm" class="col-md-2 col-form-label">Metrekare</label>
|
||
<div class="col-md-10">
|
||
<textarea rows="1" class="form-control" asp-for="Sqm" id="Sqm"></textarea>
|
||
<span asp-validation-for="Sqm" class="text-danger"></span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Fiyat Açıklama -->
|
||
<div class="form-group row">
|
||
<label for="PriceInfo" class="col-md-2 col-form-label">Fiyat Açıklama</label>
|
||
<div class="col-md-10">
|
||
<input type="text" class="form-control" asp-for="PriceInfo" id="PriceInfo" oninput="formatNumber(this)">
|
||
<span asp-validation-for="PriceInfo" class="text-danger"></span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Görsel -->
|
||
<div class="form-group row">
|
||
<label for="ImageFile" class="col-md-2 col-form-label">Görsel</label>
|
||
<div class="col-md-10">
|
||
<input type="file" class="form-control" asp-for="ImageFile" id="ImageFile">
|
||
<span asp-validation-for="ImageFile" class="text-danger"></span>
|
||
<span class="badge badge-danger">Tema Bütünlüğü için Görsel Boyutu 1339x729 olmaldır.</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card-action">
|
||
<div id="errorMessages" class="text-danger mb-3"></div>
|
||
<button class="btn btn-success">Kaydet</button>
|
||
<a href="/Slider/Index/" class="btn btn-warning ml-2">Listeye Dön</a>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
@* Fiyat Alanı rakam formatlama *@
|
||
<script>
|
||
function formatNumber(input) {
|
||
let value = input.value.replace(/\D/g, ''); // sadece rakamlar
|
||
value = value.replace(/\B(?=(\d{3})+(?!\d))/g, "."); // binlik nokta ayırıcı
|
||
input.value = value;
|
||
}
|
||
</script>
|
||
|
||
|
||
@* Formdaki alanlar boş geçilemesin *@
|
||
<script>
|
||
document.addEventListener("DOMContentLoaded", function () {
|
||
const form = document.getElementById("sliderForm");
|
||
const errorDiv = document.getElementById("errorMessages");
|
||
|
||
const fields = [
|
||
{ id: "Location", name: "Lokasyon" },
|
||
{ id: "Sqm", name: "Metrekare" },
|
||
{ id: "PriceInfo", name: "Fiyat Açıklama" },
|
||
{ id: "ImageFile", name: "Görsel" }
|
||
];
|
||
|
||
// Her input için focus olduğunda çerçeveyi temizle
|
||
fields.forEach(field => {
|
||
const input = document.getElementById(field.id);
|
||
input.addEventListener("focus", function () {
|
||
input.style.border = "";
|
||
errorDiv.innerHTML = ""; // Hataları da temizle (isteğe bağlı)
|
||
});
|
||
});
|
||
|
||
// Form submit kontrolü
|
||
form.addEventListener("submit", function (e) {
|
||
let isValid = true;
|
||
let messages = [];
|
||
|
||
errorDiv.innerHTML = ""; // Önceki mesajları temizle
|
||
|
||
fields.forEach(field => {
|
||
const input = document.getElementById(field.id);
|
||
if (input.value.trim() === "") {
|
||
isValid = false;
|
||
messages.push(`<li>${field.name} alanı boş olamaz.</li>`);
|
||
input.style.border = "2px solid red";
|
||
}
|
||
});
|
||
|
||
if (!isValid) {
|
||
e.preventDefault();
|
||
errorDiv.innerHTML = `<ul>${messages.join("")}</ul>`;
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
|
||
<style>
|
||
.input-error {
|
||
border: 2px solid red !important;
|
||
box-shadow: 0 0 4px rgba(255, 0, 0, 0.5);
|
||
}
|
||
</style>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|