ÇOKLU TABLO-LINQ:

Buraya kadar yaptığımız uygulamalarda hep tek bir tablo kullandık. Burada ise hem LINQ ve JSON kullanarak verileri çekmeyi göreceğiz hem de LINQ ile birden fazla tabloyu bağlayarak kullanacağız.

UYGULAMA:

1) Daha önce kullanmadığımız veri tabanımızın içinde manav isimli tablo vardı. Ve içindeki örnek kayıtlar şekildeki gibi idi.

2) Diğer tablomuzu şekilde gibi tasarlayarak ismine urunfiyat adını verelim.urunad primarykey var.

3) İçine aşağıdaki örnek kayıtları girelim. Buradaki urunadı tek olacak ve manav içinde bulunan ürünlerden olacak.

4) Yeni bir boş MVC projesini Uyg12 adı ile oluşturalım.

5) Models klasörü üzerinde sağ tuşa basarak Add New Item seçimi yaptıktan sonra ADO.NET Data Entiity seçimi yaparak ismini Model1 bırakalım.

6) İlk kalıp seçili iken Next butonuna basalım.

7) Veri tabanımızı seçerek Yes-Next-Next ile yolumuza devam edelim.

8) İki tablomuzu seçerek sonlandıralım.

9) Diyagramı kapatalım.

10) Controller üzerinde sağ tuşa basarak HomeController isimli yeni bir Controller ekleyelim.

Boş kalıbı seçiyoruz.

11) Aşağıdaki tanımlamaları üst kısımda yapalım.

using System.Data;

using System.Data.Entity;

using System.Net;

12) Hemen altına Model tanımlamasını yapalım.

using Uyg12.Models;

13) Veri tabanı tanımlamamızı Class’ın üst kısmında yapalım.

private yuksel6Entities db = new yuksel6Entities();

Buraya kadarki görünüm şekildeki gibi olacaktır.

14)HomeController.cs içinde İlk Aciton’ımızı JSon yapısını kullanarak aşağıdaki gibi yazalım. Bu yapı manav tablosundaki tüm kayıtları JSon formatında fırlatacaktır.

public JsonResult Jsonzz()

{

var r = from p in db.Manav

select p;

return Json(r, JsonRequestBehavior.AllowGet);

}

15) Otomatik olarak oluşan Home klasörü içine Index.cshtml dosyası ekleyelim.

16) Burada özel bir Grid kullanacağız. Onun için üst kısımda aşağıdaki tanımlamaları yapalım.

Yukardaki kodların etkili olması için Internet bağlantınızın olması gerekir.

17) Altına aşağıdaki satırları ekleyelim. Burada Button1 fonksiyonu tetikleyecek ve çıktısı ise grid isimli Tablo yapısında görüntülenecektir.

18) Altına Script dosyamızı yazıyoruz.

//$(document).ready(function () { /Çalıştığında tüm kayıtların otomatik oalrak gelmesini sağlar

$("#Button1").click(function () {

var url = "Home/Jsonzz"; // url değişkenine json dosyamızın bulunduğu yeri yazıyoruz.

$.getJSON(url, function (data) // url deki json getJSON komutuyla data değişkenine atıyoruz ve bir fonsiyonda kullanıyoruz

{

$("#grid").igGrid({

dataSource: data

});

</script>

19) Eğer çalışmaz ise bir UpdateAll ihtiyacı duyuyorsunuz demektir.

20) Artık Tüm Kayıtları görebilirsiniz.

21) HomeController içinde ikinci JSon yapısını aşağıdaki gibi tanımlayalım. Bu da bize girilen ürün adına göre kaydı getirecektir. İsterseniz ID’ye göre de yapabiliriz. Ben ikisini aynı anda yazacağım.

public JsonResult JsonSorgula(string id)

{

var r = from p in db.Manav

where p.ad == id

select p;

return Json(r, JsonRequestBehavior.AllowGet);

}

public JsonResult Jsonhaha(int? id)

{

var r = from p in db.Manav

where p.Id == id

select p;

return Json(r, JsonRequestBehavior.AllowGet);

}

22) Index.cshtml dosyasını açarak üst kısımda daha önce oluşturduğumuz Button1 altına aşağıdaki satırları ilave edelim. Ben burada TextBox kullanıyorum. Ancak Açılır liste de kullanabilirsiniz. Bu yapıyı önceki konularımızda anlatmıştık.

23) Bu kontroller ile ilgili Scriptleri diğer Script yapımızın altına yazalım.

$("#Button2").click(function () {

var url = "Home/JsonSorgula/" + Text2.value;

$.getJSON(url, function (data)

{

$("#grid").igGrid({

dataSource: data

});

//for (var i = 0; i < data.length; i++) { // Açıklama satırı işinize yarar diye bıraktım.

//if (data[i].ad == “Muz”)

//{

//document.write(data[i].Id + " " + data[i].ad + " " + data[i].detay + "<br>");

//}

});

</script>

$("#Button3").click(function () {

var url = "Home/Jsonhaha/" + Text3.value

$.getJSON(url, function (data)

{

$("#grid").igGrid({

dataSource: data

});

</script>

24) Çalıştırarak test edebilirsiniz.

25) Şimdi iki tabloyu birleştiren LINQ yazılımını yapacağız. Bunun için HomeController içine geçerek aşağıdaki Json yapısını yazalım.

public JsonResult Jsonikitablo()

{

var r = from p in db.Manav

join c in db.urunfiyat

on p.ad equals c.urunad

select new

{

p.Id,

p.ad,

c.fiyat

};

return Json(r, JsonRequestBehavior.AllowGet);

}

26) Bunu tetikleyecek butonu Index.cshtml dosyasına ekleyelim.

27) Bu tetikleme ayrı bir Grid içinde olacağı için aşağıdaki tanımlamayı da yapalım.

28) Şimdi bununla ilgili Scripti yazalım.

$("#Button4").click(function () {

var url = "Home/Jsonikitablo"

$.getJSON(url, function (data)

{

grid2.hidden = false; // Bu ve altaki satırın tersini

grid.hidden = true; //Diğer Sriptlere yazın

$("#grid2").igGrid({

dataSource: data

});

</script>

29) Test edebiliriz.

30) Bu örnekleri çoğaltabiliriz. Ancak en son ve karmaşık örneği yaparak zirvede bırakacağım.

Bunun için yeni Json yapısını HomeController içinde yazalım. Burada iki tabloyu birleştirerek gruplama yapıyoruz.

public JsonResult grupla()

{

var r =

(from ii in

(from a in db.Manav

join b in db.urunfiyat on a.ad equals b.urunad

select new { BT = a.ad , BA = b.fiyat})

group ii by new { ii.BT} into g

select new

{

ÜrünAdı = g.Key,

ÜrünAd=g.Key.BT,

ToplamKazanç = g.Sum(x => x.BA),

ToplamMiktar = g.Count(),

OrtalamaKazanc= g.Average(x => x.BA)

}).ToList();

return Json(r, JsonRequestBehavior.AllowGet);

}

31) Ardından index.cshtml dosyasına Button kontrolünü koyalım.

32) Bunun gridini de oluşturalım.

33) Bununla ilgili scripti yazalım.

$("#Button5").click(function () {

var url = "Home/grupla"

$.getJSON(url, function (data) {

grid3.hidden = false;

grid2.hidden = true;

grid.hidden = true;

$("#grid3").igGrid({

dataSource: data

});

</script>

34) Çalıştırarak test edelim.

35) Diğer bir uygulanabilecek yol ise HomeController içinde aşağıdaki Action’ı oluşturalım.

public ActionResult zz()

{

var r = from p in db.Manav

select p;

return View(r.ToList());

}

36) Yukardaki kodun içinde sağ tuşa basarak Add View diyelim ve şekildeki gibi yapılandıralım.

37) Bu sayfayı yüklersek tüm kayıtlar görüntülenecektir. Bu normalde 35.adıdmaki ifadeye gerek olmadan da yüklenir. Ancak eğer bunu boş getirseydik ve 35.adımdakikodu devreye sokmak isteseydik zz.cshtml dosyasına aşağıdaki kodu ilave etmemiz gerekir. zz başına ilgili JScriptler sürükleyin.

var grid = new WebGrid(Model);

<div>

@grid.GetHtml(tableStyle: "webGrid")

</div>

}

38) O zaman görüntü şekildeki gibi olur.

39) Peki niye bunu yaptık. Şimdiki yapıyı görmeniz için. Bunun için zz.cshtml dosyasına girerek aşağıdaki gibi satırın sadece üstündeki ve altındaki satırı sililim.İtem.id ifadesini İtem.ad yapalım

<td>

@*Tek Bıraktık*@

@Html.ActionLink("Details", "Sorgula", new { id=item.ad })

</td>

40) Ardından aşağıdaki Aciton’ı HomeController içine ekleyelim.

public ActionResult Sorgula(string id)

{

var r = from p in db.Manav

where p.ad == id //İd yaz ad yazma

select p;

return View(r.ToList());

}

41) Bunu kullanarak Sorgula isimli View’ı Home altında şekildeki gibi oluşturalım.

42) Aşağıdaki satırları üst kısma koyalım.

var grid = new WebGrid(Model);

<div>

@grid.GetHtml(tableStyle: "webGrid")

</div>

}

43) Çalıştırarak sonucu gözlemleyelim. Buda bir alternatif. Eğer hazır gridi kullanacaksanız onu biçimlemeniz gerekir.

.Eğer gridi formatlayacaksak aşağıdaki css dosyasını oluştur. Ben grs için adı ile oluşturdum.

.webGrid { margin: 4px; border-collapse: collapse; width: 500px; background-color:#B4CFC3;}

.header { background-color: #C1D4E6; font-weight: bold; color: #FFF; }

.webGrid th, .webGrid td { border: 1px solid #C0C0C0; padding: 5px; }

.alt { background-color: #E4E9F5; color: #000; }

.gridHead a:hover {text-decoration:underline;}

.description { width:auto}

.select{background-color: #71857C}

Bunları zz ve sorgulama sayfalarında tanımlayalım.

Çalıştıralım;