AÇILIRLİSTE-GRİDVİEW:

 

Bu kısımda çeşitli veri tabanı uygulamaları yaparak basit  ve kullanışlı kullanımlar göreceğiz.

 

1) vt2 isimli bir empty MVC projesi oluşturalım.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2) Daha önce oluşturduğumuz veri tabanını  App_Folder klasörü içine getirelim.

 

 

 


 

 

Proje adı üzerinde sağ tuşa basarak Manage Nuget PAckage kısmından aşağıdaki yapıları install edelim.

 

 

 

 

 

 

 

 

İlerde lazım oalcak Json.Net,Bootstrap CSS ve JQuery yapılarını da yükleyelim.

 

 

 

 

 

 

 

Son olarak aşağıdaki yapıyı da yükleyerek çıkalım.

 


 

3) Şekildeki gibi veri tabanımız gelecektir. İçinde örnek kayıtlarımız olmalıdır.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

4) Model üzerinde sağ tuşa basarak Add/New Item seçeneğine tıklayalım.Model1  adını değiştirmeden şekildeki seçimi yaparak onaylayalım.

 

 

 


 

 

5) Gelen ekrandan ilk seçimi yaparak devam edelim.

 

 

 

 

 

 

 

 

 

6) App_Folder içindeki veri tabanımız seçerek varsayılan ayarlarda devam edelim.

 

 


 

 

7) Next ile bir sonraki adıma geçtikten sonra tablomuzu seçerek sonlandıralım.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

8) Model1.edmx tasarım alanını kapatalım.

 

 


 

 

9) Projemizi Derleyelim. Controller üzerinde sağ tuşa basarak Add/ Controller seçeneğine tıklayalım.

 

 

 

 

 

 

10) Şekildeki ayarları yaparak onaylayalım.

 

 

 

 

 

 

 

 

 


 

 

11) Otomatik olarak oluşan Manavs View klasörü içindeki Index dosyasını yükleyerek verilerin otomatik olarak geldiğini gözlemleyelim.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

12) Models klasörü altında bulunan Manav.cs dosyasını açalım.

 

 


 

 

13) Varsayılan olarak aşağıdaki kodları göreceğiz.

 

 

 

 

 

 

 

 

 

 

 

 

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

using System.ComponentModel;

 

using System.Web.Mvc;

 

 

 

15) Aşağıdaki kodları ekleyelim.

public Manav()

        {

            liste = new List<SelectListItem>();

        }

        [DisplayName("Konular")]

        public List<SelectListItem> liste

        {

            get;

            set;

        }

 


16) Tüm görünüm şekildeki gibi olacaktır.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

17) HomeController isimli yeni bir Empty Controller ekleyelim.

 

 


 

 

 

 

 

 

 

18) Aşağıdaki satırı üst kısma ilave edelim.

 

using vt2.Models;

 

 

19) Ardından aşağıdaki View tanımlamalarını yapalım.

public ActionResult Index()

        {

           

            Manav model = new Manav();

            model.liste.Add(new SelectListItem { Text = "Z Sayfası", Value = "..\\Home\\z" });

            model.liste.Add(new SelectListItem { Text = "X Sayfası", Value = "..\\Home\\index" });

            model.liste.Add(new SelectListItem { Text = "Veritabanım", Value = "..\\Manavs\\index" });

            return View(model);

        }

        public ActionResult z()

        {

            return View();

        }

        public ActionResult x()

        {

            return View();

        }

 

 

20) Index,z ve x Viewlarını oluşturalım.

 

 

 

 

21) Şekildeki gibi Home klasörü altında üç View’ın oluşması gerekir.

 

 

 

 

 

 

22) Index.cshtml dosyasının en üstüne aşağıdaki satırı ekleyelim.

 

<script src="~/Scripts/jquery-2.1.4.min.js"></script>

<script src="~/Scripts/jquery-2.1.4.js"></script>

<script src="~/Scripts/bootstrap.min.js"></script>

@model vt2.Models.Manav

 

23) h2 tagının altına aşağıdaki kodları yazalım.

 

@Html.DropDownListFor(model => model.liste, Model.liste, "Seçiniz")

 

@*@Html.DropDownList("hhhh",Model.liste)*@

 

 

<script type="text/javascript">

 

        $(document).ready(function () {

            $("#liste").change(function () {

                var k = $("#liste").val();

                //alert(k)

                window.location.href =   k;

 

 

            });

        });

 

</script>

 

23) Çalıştırarak sonucu gözlemleyebilirsiniz.

 

 

 

 

 

 

 

 

 

 

 

 

 


 

 

24) Nerde olursak olalım. Ana sayfaya gitmek için _LAyout.cshtml dosyasındaki Application Name ifadesini şekildeki gibi Ana Sayfa olarak değiştirelim.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Değişik yerleştirme şekilleri için bir önceki proje uygulamamızı inceleyebilirsiniz. Örneğin layout sayfası olarak bu index..cshtml dosyasını kullanabilirsiniz.


 

UYGULAMA:

 

Bu uygulamayı yukarıdaki projemize dahil edebilirdik. Ancak kafamızın şu etapta karışmaması için ayrı bir proje olarak yapalım.

 

1) Uyg11 adlı projeyi boş bir MVC olarak oluşturalım.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2) JQuery Data Entitiy gibi eksik yapılarınız varsa yüklüyelim.

.

 

 

 

 

 

 

 

 

 

3) Şekildeki veri tabanını kullanacağız. Kayıtlar şekildeki gibi olsun.

 

 

 

 

 

 

 

 

 

 

 

 

 

4) Model klasörü üzerinde sağ tuşa basarak Add New Item seçeneği yaparak listeden ADo.NET Entity Model seçimi yapalım ve modelim ismini ManavModel yapalım.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

5) İlk seçimi yaparak devam edelim. Ardından New Connection ile veri tabanımızı seçelim.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

6) Gelen projeye alma iletişim kutusuna Yes diyelim ve devam edelim.

 

 


 

 

 

7) Tablomuzu seçerek sonlandıralım.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

8) Diyagramı kapatarak projemizi derleyelim.

 

 

 


 

9) Models klasörü altında bulunan Manav.cs clasını açalım.

 

 

 

 

 

 

 

 

 

 

 

 

 

10) İçindeki kodların en üzerine aşağıdaki namespace tanımlamalarını yapalım.

using System.Linq;

    using System.Web;

    using System.Web.Mvc;      

 

Ardındna içine aşağıdaki kodları ilave edlim.

  public List<SelectListItem> ManavList { get; set; }

  public List<Manav> ManavGrid { get; set; }

 

İlk satır açılır listemi temsil edecektir.. İkinci Satır ise kayıtların listelendiği Giridi temsil etmektedir.

 

 


 

11) Tüm kodlar şekildeki gibi olmalı.

 

 

 

  

 

 

 

 

 

 

 

 

 

 

 

 

 

12) Controller klasörü üzerinde sağ tuşa basarak Add Controller seçimi yapalım ve boş bir Controller ekleme işlemini başlatalım.

 

 

 

  

 

 

 

 

 


 

13) İsmine ManavsController diyelim.

 

 

 

 

 

 

 

14) En üst kısımda aşağıdaki namespace tanımlaması yapalım.

 

 

using Uyg11.Models;

 

 

15) Class içinde Index Action’ın hemen üstünde aşağıdaki tanımlamayı yapalım.

 

 

  private yuksel6Entities db = new yuksel6Entities();

 

 

16) Index action’ını aşağıdaki gibi yazalım.

 

public ActionResult Index()

        {

            Manav _model = new Manav();

 

            //Manav tablosundaki tüm kayıtları manavliste isimli

            //değişkene yüklüyoruz.

            var manavliste = db.Manav.ToList();

 

 

 

            //Tüm kayıtlar manavliste içindeydi

            //Burdan kayıtları seçerek yeni bir List item oluşuruyoruzç. Bu listenin

            // Text bilgilerini ad sütunundan alırken Id kısımları ise Value böölümüne

            //aktarıyor.Bunu da Model içinde tanımladığım ManavList, Açılır listesinde

            //gönderiyoruz.

            _model.ManavList =(from d in manavliste select new SelectListItem

                {

                    Value =d.Id.ToString(),

                    Text=d.ad

 

                }).ToList();

 

 

 

            //Aşağıdaki yazılım ise Gird içine tüm kayıtları getirecektir.

            //Bunun değişik yazılımları var.Ancak aşağıdaki yazılım tüm versiyonlarda

            //Çalışır. Buurda Manav veritabanından tüm kayıtları deçerek qq isimli

            // değişkene aktarıyor.Ardından Model içinde tanımlı Gride yolluyor.

 

 

            var qq = (from e in db.Manav

                      select new

                      {

                          Id = e.Id,

                          ad = e.ad,

                          detay = e.detay

                      }).ToList().Select(x => new Manav

                      {

                          Id = x.Id,

                          ad = x.ad,

                          detay = x.detay

                      });

            _model.ManavGrid  = qq.ToList();

            return View("Index", _model);

 

 

 

 

        }

 

17 ) Aynı kontroller içinde bu aşağıdaki action’ı tanımlıyoruz. Bu da filtreleme yapacaktır.

 

public ActionResult Filter(int Manav_ID)

        {

           

            //Açılır Listeden seçtiğimiz kaydın Value kısmında

            //ID değeri olduğu için bunu yakalayarak mnv_ıd isimli

            //değişkene atıyor

            int mnv_ID = Convert.ToInt32(Manav_ID);

 

         

            List<Manav> y = null;

      

 

 

            //Eğer seçilen değer sıfırsa ki bu değer Index.html içindeki

            //Scripten fırlatılacak

            if (mnv_ID == 0)

            {

 

                var qq3 = (from e in db.Manav

                           select new

                           {

                               Id = e.Id,

                               ad = e.ad,

                               detay = e.detay

                           }).ToList().Select(x => new Manav

                           {

                               Id = x.Id,

                               ad = x.ad,

                               detay = x.detay

                           });

                return PartialView("_ShowManav", qq3.ToList());

            }

            else

                //Aksi durumda seçilen liste elmanına ait ID fırlatılacak.

            {

 

            

 

                var qq4 = (from e in db.Manav

                           where e.Id == mnv_ID

                           select new

                           {

                               Id = e.Id,

                               ad = e.ad,

                               detay = e.detay

                           }).ToList().Select(x => new Manav

                           {

                               Id = x.Id,

                               ad = x.ad,

                               detay = x.detay

                           });

                return PartialView("_ShowManav", qq4.ToList());

            }

           

        }

 

 

18 ) Yukarıdaki kod aşağıdaki gibi yazılabilir. Ancak her versiyonda çalışmaz…

public ActionResult Filter(int Manav_ID)

        {

            int emp_ID = Convert.ToInt32(Maanv_ID);

            List<Manav> y = null;

            var qq = y;

            if (emp_ID == 0)

            {

                qq = (from e in db.Manav

                      select new Manav

                      {

                          Id = e.Id,

                          ad = e.ad,

                          detay = e.detay

                      }).ToList();

            }

            else

            {

                qq = (from e in db.Manav

                      where e.Id == Manav_ID

                      select new Manav

                      {

                          Id = e.Id,

                          ad = e.ad,

                          detay = e.detay

                      }).ToList();

            }

            return PartialView("_ShowManav", qq);

        } 

 

 

 

 

19) StyleSheet1’i  oluşturalım. Bu Grid’e format uygulayacak.

 

 

 

 

 

 

 

 

 

 

 

 

 

.gridTable {margin: 5px;padding: 10px;border: 1px #c8c8c8 solid

            border-collapse: collapse;min-width: 550px

             background-color: #fff;color: #fff; width:100%;} 

.gridHead th{font-weight: bold;background-color: #030D8D

             color: #fff;padding: 10px; text-align:left;} 

.gridHead a:link,.gridHead a:visited,.gridHead a:active,.gridHead a:hover {color: #fff;} 

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

.gridTable tr.gridAltRow{background-color: #efeeef;} 

.gridTable tr:hover{background-color: #f6f70a;} 

.gridAltRow td{padding: 10px;margin: 5px; color: #333;text-align:left;} 

.gridRow td{padding: 10px;color: #333text-align:left;} 

.gridFooter td{padding: 10px; color: #ffffff;font-size: 12pt

               text-align: center; background-color:#228B22;} 

.gridFooter a{font-weight: bold;color: blue; border: 2px #f00 solid;}

 

 


 

21) Index.cshtml Viewe’ını Manavs View klasörü altında oluşturalım.

 

 

 

 

 

 

 

 

 

 

 

 

 

22) İçini aşağıdaki gibi yapılandıralım.

@model Uyg11.Models.Manav

@{

    ViewBag.Title = "Yuksel 2015";

}

<script src="~/Scripts/jquery-2.1.4.min.js"></script>

<script src="~/Scripts/jquery-2.1.4.js"></script>

<script src="~/Scripts/bootstrap.min.js"></script>

<script src="~/Scripts/bootstrap.js"></script>

 

<link href="~/Content/StyleSheet1.css" rel="stylesheet" />

 

<table style="width: 90%; text-align: center; background-color: #ADD8E6; padding: 10px;">

    <tr>

        <td style="padding: 10px; text-align: center; height:30px; background-color:#FF0000;

          font-size:20pt; font-weight:bold; color:white;">

            Select Manav #

            @Html.DropDownList("UrunSec", Model.ManavList)

        </td>

    </tr>

    <tr>

        <td>

            <div id="UrunGrid">

                @Html.Partial("_ShowManav", Model.ManavGrid)

            </div>

        </td>

    </tr>

</table>

<script>

 

    $(document).ready(function () {

        $("#UrunSec").append($("<option></option>").val("0").html("Hepsi"));

        $("#UrunSec").val("0");

    });

</script>

 

<script type="text/javascript">

 

    $('#UrunSec').change(function (e) {

        e.preventDefault();

        var url = '@Url.Action("Filter")';

        $.get(url, { Manav_ID: $(this).val() }, function (result) {

            $('#UrunGrid').html(result);

        });

    });

</script>

 

23) Şimdi de İndex.cshtml’nin bulunduğu yerde sağ tuşa basarak PartialView eçimi yapalım ve adına _ShowManav diyelim.

 

 

 

 

 

 

 

 

 

 


 

24) İçine aşağıdaki gibi yapılandıralım.

 

<link href="~/Content/StyleSheet1.css" rel="stylesheet" />

<div id="gridposition" style="width: 100%;">

    @{

        var grid1 = new WebGrid(source: Model, canPage: true, rowsPerPage: 11, ajaxUpdateContainerId: "gridContent");

 

        @grid1.GetHtml(mode: WebGridPagerModes.All,

            tableStyle: "gridTable",

            headerStyle: "gridHead",

            footerStyle: "gridFooter",

            rowStyle: "gridRow",

            alternatingRowStyle: "gridAltRow",

            htmlAttributes: new { id = "positionGrid" },

            fillEmptyRows: false,

            columns: grid1.Columns(

             grid1.Column("Id", header: "ID"),

             grid1.Column("ad", header: "Ad"),

             grid1.Column("detay", header: "Detay")))

    }

  

</div>

 

 

25) Buraya kadar olanları gözlemlemek için çalıştıralım.

 

 

 


 

 

26) Bir kayıt seçelim.

 

 

 

 

 

 

 

 

 

 

 

 

 

27) Tekrar tüm kayıtları listeleyelim. Ardından elmayı seçelim .Bunun sonucunda sadece 1 elma listelendiğini göreceğiz.

 

 

 

 

 

 


 

 

 

 

 

 

 

 

 

28) Bu sorunu çözmek için ilk olarak Manav Controllers içinde bulunan  Index action’ını aşağıdaki gibi düzenleyelim.

 

public ActionResult Index()

        {

            Manav _model = new Manav();

 

            var manavliste = db.Manav.ToList();

 

 

 

            //_model.ManavList =(from d in manavliste select new SelectListItem

            //    {

            //        Value =d.Id.ToString(),

            //        Text=d.ad

 

            //    }).ToList();

 

 

 

            //Yukardaki satırlar yerine aşağıdaki satırları yazdık

            //Burada İlk olarak ad sütununu seçerek sadece benzersiz olanları kk

            // ismli değişkene atadık.

            //Daha sonra bu KK isimli değişkeni tarıyarak

           //Açılır listeyi doldurduk.

 

            var kk = (from d in manavliste

                      orderby d.ad

                      select new

                      {

                          ad = d.ad

 

 

                      }).Distinct();

 

            _model.ManavList = (from dd in kk

                                          select new SelectListItem

                                          {

                                              Value = dd.ad.ToString(),

                                              Text = dd.ad.ToString()

                                          }).ToList();

 

 

 

            var qq = (from e in db.Manav

                      select new

                      {

                          Id = e.Id,

                          ad = e.ad,

                          detay = e.detay

                      }).ToList().Select(x => new Manav

                      {

                          Id = x.Id,

                          ad = x.ad,

                          detay = x.detay

                      });

            _model.ManavGrid  = qq.ToList();

            return View("Index", _model);

 

        }

 

 

29) Bu durumda çalıştırdığımızda kayıtların tek olarak geldiğini göreceğiz. Ancak seçim çalışmayacaktır.

 

 


 

30) ActionResult Filter’ı ise aşağıdaki gibi değiştirelim.

 

public ActionResult Filter(string Manav_ID)

        {

            //Alınan değişkeni string yaptık.

           

            //int mnv_ID = Convert.ToInt32(Manav_ID);

 

            //Yukarıdaki satır ile aşağıdaki satırı değiştirdik.

            string emp_ID = Manav_ID;

 

            List<Manav> y = null;

 

 

 

 

            //if (mnv_ID == 0)

           

           // Yukarıdaki satırı aşağıdaki ile değiştirdik.

            // Bunun için Index.cshtml dosyasında 0

            //ifadesini de Hepsi oalrak değiştireceğiz.

            if (emp_ID == "Hepsi")

            {

 

                var qq3 = (from e in db.Manav

                           select new

                           {

                               Id = e.Id,

                               ad = e.ad,

                               detay = e.detay

                           }).ToList().Select(x => new Manav

                           {

                               Id = x.Id,

                               ad = x.ad,

                               detay = x.detay

                           });

                return PartialView("_ShowManav", qq3.ToList());

            }

            else

            {

 

 

                //Aşağıdaki satırları ilave ettik.

                //Burada Id numarasına göre uygun olan kaydı seçiyoruz.

               

 

                var qq12 = from e in db.Manav

                           where e.ad == emp_ID

                           select e.ad;

 

                //bu seçimler hep dizi mantığı ile çalıştığı için

                //ToArray ile dizi olarak aktarıyorum.

                var al = qq12.ToArray();

 

                //Sonrada dizinin ilk elemanını seçiyorum.Bu da aradığım ifade

                string urun = al[0].ToString();

 

 

 

                var qq4 = (from e in db.Manav

                           //where e.Id == mnv_ID

                           where e.ad == urun // Yukardaki satırın yerine

                           select new

                           {

                               Id = e.Id,

                               ad = e.ad,

                               detay = e.detay

                           }).ToList().Select(x => new Manav

                           {

                               Id = x.Id,

                               ad = x.ad,

                               detay = x.detay

                           });

                return PartialView("_ShowManav", qq4.ToList());

            }

           

        }

 

 

 

31) Index.cshtml dosyasında ise sadece aşağıdaki Script bölümünde değişiklik yapıyoruz.

<script>

 

    $(document).ready(function () {

        $("#UrunSec").append($("<option></option>").val("Hepsi").html("Hepsi"));

        $("#UrunSec").val("Hepsi");

        //$("#UrunSec").append($("<option></option>").val("0").html("Hepsi"));

        //$("#UrunSec").val("0");

    });

</script>

 

 

 

32) Sayfayı çalıştırarak sonucu gözlemleyelim.

 

 


 

 

33)