Selamlar Arkadaşlar uzun zaman sonra tekrar yeni bir blog yazısıyla karşınızdayım bir proje üstünde geliştirme yaparken yorum tarafında sayfanın yenilenmeden yorumun gönderilmesi gerektiğini düşünüp bu konuda ajax’a başvurdum çok araştırdım fakat genelde anlık yorum veya mesaj tarzı uygulamalar genelde php üzerinden ajax ile anlatılmış bende bunun .net ve .net core tarafında ki eksikliğini doldurmak istedim projenin github linkini de vereceğim.
Öncelikle Yorumları ajax üstünden anlık listelemek ve Yorum gönderebilmek için View Kısmında
//Yorum Listeleme
$(document).ready(function () {
$.ajax({
contentType: "application/json",
dataType: "json",
type: "Get",
url: "/Message/GetList/",
success: function (funk) {
let values = jQuery.parseJSON(funk);
let htmlst = ``;
$.each(values, (index, value) => {
htmlst += `<div class="be-img-comment"> <a href="blog-detail-2.html"> <img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="" class="be-ava-comment"> </a> </div> <div class="be-comment-content"> <span class="be-comment-name"> <a href="blog-detail-2.html">${value.Name}</a> </span> <span class="be-comment-time"> <i class="fa fa-clock-o"></i> ${value.Date} </span> <p class="be-comment-text"> ${value.MessageContent} </p> </div>`;
});
$("#listcom").html(htmlst);
}
});
});
// Yorum Gönderme
$("#btnadd").click(function () {
let values = {
Name: $("#Name").val(),
MessageContent: $("#MessageContent").val(),
Mail: $("#Mail").val(),
Date: $("#Date").val()
};
$.ajax({
type: "Post",
url: "/Message/MessageAdd/",
data: values,
success: function (fnk1) {
let valueat = jQuery.parseJSON(fnk1);
let htmlstr = ``;
// console.log(fnk1);
htmlstr = `<div class="be-img-comment"> <a href="blog-detail-2.html"> <img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="" class="be-ava-comment"> </a> </div> <div class="be-comment-content"> <span class="be-comment-name"> <a href="blog-detail-2.html">${valueat.Name}</a> </span> <span class="be-comment-time"> <i class="fa fa-clock-o"></i> ${valueat.Date} </span> <p class="be-comment-text"> ${valueat.MessageContent} </p> </div>`;
$("#listcom").append(htmlstr);
}
});
});Yukarıda bırakmış olduğum gerekli kodları yazıyoruz Daha sonra controller tarafında yazmamız gereken kod bloglarını aşağıdaki gibi yazalım
View Kısmındaki Ajax kodlarının son görünümü aşağıdaki gibi olmalıdır
<script type="text/javascript">
//Yorum Listeleme
$(document).ready(function () {
$.ajax({
contentType: "application/json",
dataType: "json",
type: "Get",
url: "/Message/GetList/",
success: function (funk) {
let values = jQuery.parseJSON(funk);
let htmlst = ``;
$.each(values, (index, value) => {
htmlst += `<div class="be-img-comment"> <a href="blog-detail-2.html"> <img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="" class="be-ava-comment"> </a> </div> <div class="be-comment-content"> <span class="be-comment-name"> <a href="blog-detail-2.html">${value.Name}</a> </span> <span class="be-comment-time"> <i class="fa fa-clock-o"></i> ${value.Date} </span> <p class="be-comment-text"> ${value.MessageContent} </p> </div>`;
});
$("#listcom").html(htmlst);
}
});
});
// Yorum Gönderme
$("#btnadd").click(function () {
let values = {
Name: $("#Name").val(),
MessageContent: $("#MessageContent").val(),
Mail: $("#Mail").val(),
Date: $("#Date").val()
};
$.ajax({
type: "Post",
url: "/Message/MessageAdd/",
data: values,
success: function (fnk1) {
let valueat = jQuery.parseJSON(fnk1);
let htmlstr = ``;
// console.log(fnk1);
htmlstr = `<div class="be-img-comment"> <a href="blog-detail-2.html"> <img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="" class="be-ava-comment"> </a> </div> <div class="be-comment-content"> <span class="be-comment-name"> <a href="blog-detail-2.html">${valueat.Name}</a> </span> <span class="be-comment-time"> <i class="fa fa-clock-o"></i> ${valueat.Date} </span> <p class="be-comment-text"> ${valueat.MessageContent} </p> </div>`;
$("#listcom").append(htmlstr);
}
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>Proje github link : buraya tıklayarak projeye ulaşabilirsiniz
Evet arkadaşlar bugünkü yazımız bu kadar kodları doğru uyguladığınız takdirde sorunsuz bir şekilde anlık yorum gönderme işleminiz tamamlanacaktır. Herhangi bir hata alırsanız veya sorunuz olursa yorum kısmından veya mail adresimden ya da sosyal medya hesaplarımdan ulaşıp bana sorunuzu iletebilirsiniz görüşmek üzere sağlıklı , mutlu günler dilerim 🙂
