mIRCForumlari - mIRC ve IRC Kullanıcılarının Paylaşım Platformu
  https://www.sosyalchat.com/


SohbetG.Com

Kullanıcı Etiket Listesi

Yeni Konu aç Cevapla
 
Seçenekler
Alt 18 Şubat 2023, 05:25   #1
Çevrimdışı
Üyelik tarihi: 07 Aralık 2022
Konular: 21281
Mesajlar: 24.385
Nerden: İstanbul
Cinsiyet: Erkek
Web Site: TRmIRC.Net
IRC Sunucu: IRC.TRmIRC.Net
Alınan Beğeni: 3914
Beğendikleri: 7042
@RahmetLi
Ruh Hali : : Olu Gibi
Standart ASP.NET Mvc ile Ajax Kullanarak Tablo Oluşturmak

İlk olarak, Controller kısmında GetSalesData adında bir metot tanımlanır. Bu metot, SQL veritabanından verileri çekip JSON formatında geri döndürecektir.

Kod : Kodu kopyalamak için üzerine çift tıklayın!

public ActionResult GetSalesData() { // SQL bağlantı dizesi string connString = ConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString; // SQL sorgusu string query = "SELECT * FROM Sales"; // SQL veritabanı bağlantısı oluştur SqlConnection conn = new SqlConnection(connString); // SQL veritabanı bağlantısını aç conn.Open(); // SQL sorgusunu yürüt SqlDataAdapter adapter = new SqlDataAdapter(query, conn); // DataTable nesnesi oluştur DataTable data = new DataTable(); // Verileri DataTable'a yükle adapter.Fill(data); // SQL veritabanı bağlantısını kapat conn.Close(); // DataTable'ı JSON formatına dönüştür ve geri döndür return Json(new { data = data }, JsonRequestBehavior.AllowGet); }
Aşağıda satır satır anlatımı bulabilirsiniz:

string connString = ConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString;:
Bağlantı dizesi, Web.config dosyasında tanımlanmış olan DefaultConnection adlı bağlantı dizesinden alınır.

string query = "SELECT * FROM Sales";:
Veritabanından okunacak olan sorgu tanımlanır.

SqlConnection conn = new SqlConnection(connString);:
SqlConnection sınıfından bir nesne oluşturulur ve bağlantı dizesi parametre olarak verilir.

conn.Open();:
Bağlantı açılır.

SqlDataAdapter adapter = new SqlDataAdapter(query, conn);:
SqlDataAdapter sınıfından bir nesne oluşturulur ve sorgu ve bağlantı nesneleri parametre olarak verilir.

DataTable data = new DataTable();:
DataTable sınıfından bir nesne oluşturulur.

adapter.Fill(data);:
SqlDataAdapter nesnesi kullanılarak veritabanından veriler okunur ve DataTable nesnesine yüklenir.

conn.Close();:
Bağlantı kapatılır.

return Json(new { data = data }, JsonRequestBehavior.AllowGet);:
Okunan veriler, JSON formatına dönüştürülür ve geri döndürülür.

View kısmında, tablo için sadece başlıklar belirtilir. JavaScript kodu ile, tablo DataTable() yöntemi kullanılarak oluşturulur. ajax özelliği kullanılarak, GetSalesData yöntemi çağrılır ve veriler alınır. columns özelliği, verilerin nasıl gösterileceğini belirler. Ayrıca, footerCallback özelliği ile toplam satırı hesaplanır ve tablonun alt kısmında gösterilir.

Kod : Kodu kopyalamak için üzerine çift tıklayın!

<table id="salesTable" class="display" style="width:100%"> <thead> <tr> <th>ID</th> <th>Date</th> <th>Product</th> <th>Price</th> <th>Quantity</th> <th>Total</th> </tr> </thead> <tfoot> <tr> <th colspan="4">Total:</th> <th id="quantityTotal"></th> <th id="priceTotal"></th> </tr> </tfoot> </table>

JavaScript kodu, verilerin alınması ve tablo oluşturulması için kullanılır. Aşağıda satır satır açıklaması yer almaktadır:

Kod : Kodu kopyalamak için üzerine çift tıklayın!

$(document).ready(function () { $('#salesTable').DataTable({ "ajax": { "url": "/Home/GetSalesData", "dataSrc": "data" }, "columns": [ { "data": "ID" }, { "data": "Date" }, { "data": "Product" }, { "data": "Price" }, { "data": "Quantity" }, { "data": "Total" } ], "footerCallback": function (row, data, start, end, display) { var quantityTotal = 0; var priceTotal = 0; for (var i = 0; i < data.length; i++) { quantityTotal += parseFloat(data[i].Quantity); priceTotal += parseFloat(data[i].Price) * parseFloat(data[i].Quantity); } $('#quantityTotal').html(quantityTotal); $('#priceTotal').html(priceTotal.toFixed(2)); } }); });
Aşağıda bu kodun satır satır açıklaması yer almaktadır:


$(document).ready(function () {:
Sayfa yüklendiğinde çalışacak JavaScript kodunu belirtir.

$('#salesTable').DataTable({:
salesTable adlı tablonun, DataTable yöntemi kullanılarak oluşturulacağını belirtir.

"ajax": { "url": "/Home/GetSalesData", "dataSrc": "data" }:
Verilerin alınacağı URL ve alınan verilerin yer alacağı JSON öğesinin adı belirtilir.

"columns": [...]:
Tabloda yer alacak sütunlar belirtilir.

"footerCallback": function (row, data, start, end, display) { ... }:
Footer bölümünde yer alacak toplam hesaplaması yapılır.

Özetle, yukarıdaki kodlar, SQL veritabanından verileri okuyup DataTable nesnesine yükleyerek, bu verileri JSON formatına dönüştürür ve Ajax kullanarak HTML sayfasında görüntüler. Ayrıca, JavaScript kodu kullanarak tablonun altındaki footer bölümünde toplam satırı hesaplar ve görüntüler.

ALINTI

Benzer Konular:



Kalbim Atar Cansız, Geçmez Gün Ahsız, Vahsız..
  Alıntı ile Cevapla

Cevapla
Etiketler
ajax, ASP.NET, Kullanarak, Oluşturmak, tablo


Konuyu Toplam 1 Üye okuyor. (0 Kayıtlı üye ve 1 Misafir)