jQuery ile Veri Çekme

jQuery ile Veri Çekme (Script)

Sayfa hazır olduğunda Controller'daki JsonResult metoduna istek atıyoruz. Veri geldiğinde iskeletleri silip gerçek kartları basıyoruz.

$(document).ready(function () {
    $.ajax({
        url: '/Product/GetProducts', // Controller/Action adınız
        type: 'GET',
        success: function (data) {
            var container = $('#product-container');
            container.empty(); // İskeletleri (skeleton) temizle

            $.each(data, function (i, item) {
                var html = `
                    <div class="col-md-6 mb-4">
                        <div class="product-card">
                            <img src="${item.ImageUrl}" class="img-fluid" />
                            <h5>${item.Name}</h5>
                            <p>${item.Price} TL</p>
                        </div>
                    </div>`;
                container.append(html);
            });
        },
        error: function() {
            alert("Veriler yüklenirken bir hata oluştu.");
        }
    });
});

 

 

 

ASP.NET MVC  Controller Örneği

 

public class ProductController : Controller
{
    public JsonResult GetProducts()
    {
        // Gerçek senaryoda burası veritabanından gelir
        var products = new List<object> {
            new { Name = "Modern Koltuk", Price = 4500, ImageUrl = "/images/p1.jpg" },
            new { Name = "Ahşap Masa", Price = 2200, ImageUrl = "/images/p2.jpg" }
        };

        // Gecikmeyi simüle etmek için (Test amaçlı, gerçekte kullanmayın)
        System.Threading.Thread.Sleep(2000); 

        return Json(products, JsonRequestBehavior.AllowGet);
    }
}



Tarih: 2026.04.01