I am encountering an issue with sending data to the controller through ajax. The value goes as "null". Can someone please assist me with this?
Here are my HTML codes:
<div class="modal fade" id="sagTikMenuKategoriGuncelleModal" data-bs-backdrop="static">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header" style="font-weight: 600; color: rgb(157, 163, 173); background-color: rgb(248, 248, 248);">
<h5 class="modal-title">Update Category Field</h5>
<button class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<div class="col-md-12 pb-4 text-center kategoriAlanlariModalBodyDiv" style="font-weight: bold; color:rgb(168, 174, 185);">
<span>You can update your category field name here</span>
</div>
<form class="needs-validation" novalidate id="sagTikMenuKategoriGuncelleModalForm">
<div class="row g-3">
<div class="col-md-12">
<label for="kategoriAlanGuncelleAdi" class="form-label">Category Field Name *</label>
<input id="kategoriAlanGuncelleAdi" type="text" class="form-control" placeholder="Category Field Name" required>
<div class="invalid-feedback">
This Field Cannot Be Empty
</div>
</div>
</div>
<div class="modal-footer mt-3">
<button class="btn btn-secondary" type="submit" id="sagTikMenuKategoriGuncelleButonModal">Update</button>
</div>
</form>
</div>
</div>
</div>
</div>
Next, let's look at my jQuery codes:
var kategoriAlanGuncelleId;
var kategoriAlanGuncelleAd;
$(".urunKategorileriAlanAdlari > span").contextmenu(function () {
kategoriAlanGuncelleId = $(this).attr("id");
kategoriAlanGuncelleAd = $(this).text();
});
$("#sagTikMenuKategoriGuncelleButonModal").click(function () {
var kategoriAlanAdGuncel = new Object();
kategoriAlanAdGuncel.urunKategorileriKategoriAdi = $("#kategoriAlanGuncelleAdi").val();
kategoriAlanAdGuncel.urunKategorileriId = kategoriAlanGuncelleId;
var kategoriAlanGuncelAdres = "@Url.Action("kategoriAlanGuncelle", "kategoriAlanlari")";
$.ajax({
url: kategoriAlanGuncelAdres,
type: "POST",
data: kategoriAlanAdGuncel,
success: function (veri) {
},
error: function (hata, ajaxoptions, throwerror) {
alert("Error :" + hata.status + " " + throwerror + " " + hata.responseText);
}
});
});
And now, taking a look at the C# controller:
[HttpPost]
public IActionResult kategoriAlanGuncelle(urunKategorileri mod)
{
if (mod == null)
{
return RedirectToAction("Categories", "Home");
}
if (mod.urunKategorileriId == 0 || mod.urunKategorileriKategoriAdi == null)
{
return RedirectToAction("Categories", "Home");
}
var data = kategoriAlanlariServices.kategoriGuncelle(mod);
if (data == 0)
{
return RedirectToAction("Categories", "Home");
}
return RedirectToAction("Categories", "Home");
}
I have verified the data I receive in jQuery using an "alert", and they appear complete. However, despite that, a null value is being passed to the controller. The properties of the object variable I created in jQuery are matching the table columns. I'm struggling to identify the root cause of this issue.