SCRIPT-JQUERY:

 

Temel Script ifadelerini kapsayan bir uygulama ile başlayalım.

UYGULAMA:

 

1) Yeni bir MVC projesini ders5 adı ile oluşturalım.

Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip206.png

 

 

 

 

 

 

 

 

 

2) Controller klasörüne yeni bir kontrolü HomeController adı ile ekleyelim.

Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip207.png

 

 

 

 

 

Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip15.png

 

 

 

 


 

3) Controller içindeki Index Action’ı üzerinde sağ tuşa basarak Add/View seçeneği ile bir Html bağlayalım.

 

Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip16.png

 

 

 

 

 

 

 

 

 

 

 

Kutuyu boşaltarak Add butonuna basıyoruz.

Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip208.png

 

 


 

 

4)Kod kısmında <div> taglarının arasına HTML Toolbox’ından Input(Button) sürükleyelim.

 

Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip18.png

 

 

 

 

 

 

 

5) References üzerinde sağ tuşa basarak Manage NuGet Packages seçeneğine tıklayalım.

Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip19.png

 

 

 

 

 

 

 

6) Search kısmına Jquery yazarak bulduralım ve (nuget.org) install edelim. Eğer yüklüyse sağ üst köşesinde yeşil check işareti görünür.

 

Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip21.png

 

 

 

 

 

 

 


 

 

7) Update kısına geçip Update All ile güncellemeleri ara sıra yapmanızda fayda vardır.

 

Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip22.png

 

 

 

 

 

 

 

8) 6.Adım sonucuna Scripts isimli bir klasör oluşur ve içine Jquery dosyaları gelir. Bunlardan Jquery-2.1.4.js dosyasını head tagının içine sürüklüyoruz.

 

Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip23.png

 

 

 

 

 

 

 

 

 

9) HomeController dosyasını açarak aşağıdaki kodları ekleyelim. Bu biz javascript formatında bir mesaj döndürecektir. String Formatında bir javascript döndürüyoruz. Bu uzun bir script te olabilir.

    public JavaScriptResult GelenMesaj()

        {

            return JavaScript("alert(‘Merhaba Paralel Evrenli’)");

        }

 

Not: Yukardaki ifadeyi kopyalayarak yapıştırıyorsanız. Tek tırnakları yeniden koyunuz.


 

10) index.cshtml dosyasına giderek aşağıdaki script ifadelerini <html> kapanış tagından sonra ekleyelim.

 

@{

    Layout = null;

}

 

<!DOCTYPE html>

 

<html>

<head>

   

    <meta name="viewport" content="width=device-width" />

    <title>Index</title>

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

 

</head>

<body>

    <div>

        <input id="Button1" type="button" value="Java Mesajı Getir" />

        @*<button id="btnjs">Java Script Mesajı Gelsin</button>*@

    </div>

</body>

</html>

 

<script>

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

        $.getScript("Home/GelenMesaj")

    })

</script>

 

@*<script>

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

        $.getScript("Home/GelenMesaj")

    })

</script>*@

 

 

Uygulamamızı çalıştırıp Button1’e tıkladığımızda şekildeki gibi değer dönecektir.

Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip209.png

 


 

 

11 ) Şimdi içerik getirelim. Bunun için HomeController.cs dosyasının altına aşağıdaki ifadeyi ekleyelim. Bu bir Content istiyor.XML de yollayabiliriz.

 

  public ContentResult icerikAl()

        {

            return Content("Yüksel İnan");

        }

 

12) 2.Butonu getirelim.

 

 

Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip24.png 

 

 

 

 

 

 

13) Hemen altına aşağıdaki satırı ekleyelim.

<div id="icerik"></div>

 

14) Aşağıdaki script kodunu diğer script kodumuzun bitiş tagından sonra yazalım.

<script>

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

        $("#icerik").load("Home/icerikAl")

    })

</script> 

 

 

15) Çalıştırarak Buton 2’ye tıkladığımızda yazdığımız ifade gelecektir.

 

Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip25.png

 

 

 

 


 

16) Şimdi akvaryum isimli bir Class’ı Model klasörüne ekleyerek içine aşağıdaki kodları yazalım.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

 

namespace ders5.Models

{

    public class akvaryum

    {

        public string ad { get; set; }

        public int fiyat { get; set; }

    }

}

 

17) HomeController kısmına geçerek üst kısımda aşağıdaki gibi model tanımlaması yapalım.

using ders5.Models;

 

18) Kodların altına aşağıdaki ifadeyi ekleyelim.

     public JsonResult JSonVeriAl()

        {

            akvaryum akv = new akvaryum();

            akv.ad = "Koi";

            akv.fiyat = 200;

            return Json(akv,JsonRequestBehavior.AllowGet);

        }

Varsayılan olarak, ASP.NET MVC çerçevesinde bir JSON yükü ile bir HTTP GET isteğine yanıt vermek için vermez. JSON yanıt belgesi olarak göndermeniz gerekiyorsa, Json yöntem için ikinci parametre olarak JsonRequestBehavior.AllowGet kullanarak izin vermek gerekir. Parametreli yapılarda kullanılması gerekir.

 

 

19) Aşağıdaki Butonu ekleyelim

<input id="Button3" type="button" value="Json Veri Getir" />

 

 

20) Bu butona ait scripti aşağıdaki gibi yazalım. ikinci fonksiyon data alacak.

<script>

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

        $.getJSON("Home/JSonVeriAl", function (data) {

            alert(data.ad)

        })

    })

</script>


 

 

Çalıştıralım;

 

Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip26.png                                      

 

 

 

 

 

 

 

21) Eğer iki veriyi birden çekmek istersek kodumuzu aşağıdaki gibi değiştirmemiz gerekir.

<script>

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

        $.getJSON("Home/JSonVeriAl", function (data) {

            alert(data.ad + "-->" + data.fiyat)

        })

    })

</script>

Çalıştırdığımızda görüntü şekildeki gibi olacaktır.

Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip27.png

 

 

 

 

 

 

22) Şimdi de partial döndürelim. Bunun için ilk olarak Home klasörü içinde Partial isimli yeni bir klasör oluşturalım.

Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip28.png

 

 

 

 

 


 

23) Bu klasörün üzerinde sağ tuş Add View seçeneği ile şekildeki BenimPartial View’ını oluşturalım. Partial kutusunu doldurmayı unutmayınız.

 

Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip29.png

 

 

 

 

 

 

 

 

 

24) İçine aşağıdaki ifadeleri yazalım.

<ul>

    <li>İstanbul</li>

    <li>Ankara</li>

    <li>İzmir</li>

</ul>

 

25) Home Controller içine geçerek aşağıdaki kodları ilave edelim.

 

        public PartialViewResult BenParGetir()

        {

            return PartialView("Partial/BenimPartial");

        }

 

26) Şimdi bunu çağıracak Butonu ve scripti oluşturmak için index.cshtml dosyamıza geçerek yeni bir Button koyalım.

<br />

        <input id="Button4" type="button" value="Partial Getir" />

 <div id="partal"></div>


 

 

27) Aynı dosya içinde diğer scriptlerin altına yeni scriptimizi yazalım. Burayı açacak olursak; Button4’e tıkladığımız zaman partal isimli div içine HomeController da tanımladığım BenPartGetir içindeki bilgileri al.

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

        $("#partal").load("Home/BenParGetir")

    })

 

28) Yüklediğimizde görüntü şekildeki gibi olacaktır.

 

Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip30.png

 

 

 

 

 

 

 

 

 

29) Home Controller içinde kullandığımız yapılardan herhangi birinin adını seçerek, F12 tuşuna basarsanız içeriğine ulaşırsınız ve hepsinin ActionResult kütüphanesinden miras aldığını görebilirsiniz.

 

Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip31.png

 

 

 

 

 

 


 

UYGULAMA:

 

1)      ders6 isimli Boş bir MVC uygulaması açalım.

2)       

Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip212.png

 

 

 

 

 

 

 

 

 

 

 

 

 

2) View klasörü altında Shared isimli bir klasör oluşturalım.

 

 

3) Bu Shared klasörü üzerinde sağ tuşa basarak _Layout isimli bir View’ı şekildeki gibi oluşturalım.

Açıklama: C:\Users\sanane\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip120.jpg

 

 

 

 

 

 

 

 

 

 

 

 

Açıklama: C:\Users\sanane\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip121.jpg

 

 

 

 

 

Birçok yeni klasörün yukarılara eklendiğini gözlemleyin.

Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip213.png

 

 

 

 

 

 

 

 

 

4) İçine aşağıdaki kodlar otomatik gelecektir. Gelmediyse sorun var yeniden deneyin.

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>@ViewBag.Title - My ASP.NET Application</title>

    <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />

    <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />

    <script src="~/Scripts/modernizr-2.6.2.js"></script>

</head>

<body>

    <div class="navbar navbar-inverse navbar-fixed-top">

        <div class="container">

            <div class="navbar-header">

                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                </button>

                @Html.ActionLink("Application name", "Index", "Home", null, new { @class = "navbar-brand" })

            </div>

            <div class="navbar-collapse collapse">

                <ul class="nav navbar-nav">

                </ul>

            </div>

        </div>

    </div>

 

    <div class="container body-content">

        @RenderBody()

        <hr />

        <footer>

            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>

        </footer>

    </div>

 

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

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

</body>

</html>

 

Render Section: Layout yapısı üzerinde görüntüleme yapmamıza yarar. Layout yapısını kullanan sayfalarda üst ve alt bilgi seçenekleri aynıdır. Ancak ben belli sayfalarda değişik görünümler elde etmek istersem bunu Render Section ile sağlayabiliriz. Örneğin tüm sayfaların alt kısmında Telefon numarası yazarken Index sayfasında buna ilaveten adres yazmasını istersek bunu Render Section ile yapabiliriz.

 

Örneğin @RenderSection(“adres”) şeklinde bir ifadeyi Layout sayfasında Footer kısmına koyduk. Bu durumda çalıştırdığımızda hata verir. Çünkü adres diye bir tamamlama yapılmamıştır. Bu tanımlama yapılmayan sayfaların da çalışmasını istersek o zaman  @RenderSection(“adres”,false) yazmamız gerekir. Bunun anlamı adres tanımlı olmasa da çalı demektir. Bir render ifadesi genellikle aşağıdaki ifadeden sonra eklenir.

@{   

 ViewBag.Title = "xxxxxxxxx";   

}

 

Aşağıda bir örnek verilmiştir. Bu örneğin Index.aspx sayfasına yazıldığı zaman sadece o sayfada Adres bilgisi görünürken diğer layout kullanan sayfalarda adres bilgisi görünmeyecektir.

@section adres{

<span>

Kadıköy-İstanbul

</span>

}

 

Bu kısa açıklamadan sonra uygulamamıza devam edebiliriz.


 

 

5) body kapanış tagının hemen üstüne yani script ifadelerinin altına aşağıdaki ifadeyi yazalım.

  @RenderSection("scripts",false)

 

 

6) Yeni bir SQL veri tabanını App_Data klasörü içinde oluşturalım.

 

Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip214.png

 

 

 

 

7) SQL Server Database seçimi yaptıktan sonra yüksel6.mdf adı ile oluşturalım.

Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip215.png

 

 

 

 

 

 

 

 

 

 

 

 

Server Explorer kısmından veri tabanımızı açarak Add New Table  seçeneğine tıklayalım.

Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip216.png

 


 

 

 

8) Şekildeki gibi tasarlayarak Manav adı ile kaydedelim. Burada Id satırının Identity özelliği (1,1) yapılarak otomatik olarak artması sağlanmıştır.

Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip217.png

 

 

 

 

 

 

 

 

 

 

 

Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip218.png

 

 

 

 

 


 

 

9) İçine aşağıdaki kayıtları girelim.

Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip219.png

 

 

 

 

 

 

 

 

Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip220.png

 

 

 

 

 

 

 

 

10) Model klasörü üzerinde sağ tuşa basarak Add/New Item seçeneğine tıklayalım.

 

11) Data kısmından ADO.NET Entity Data Wizard seçimi yaparak ismine manav1 yazalım.

Açıklama: C:\Users\sanane\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip130.jpg

 

 

 

 

 

 

 

 

 

 

12) Empty EF Designer model seçimi yaparak Finish butonuna basalım.

Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip221.png

 

 

 

 

 

 

 

 

 

 

 

 

 

 

13) Sağ tuşa basarak Update Model from Database seçimi yapalım.

 

Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip222.png


 

 

14) Veri tabanını seçelim.

Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip223.png

 

 

 

 

 

 

 

 

 

 

 

 

 

15) Tablomuzu seçerek Finish butonuna basalım.

Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip224.png

 

 

 

 

 

 

 

 

 


 

 

16) Şekildeki görüntü olacaktır. Kaydederek kapatalım.

Açıklama: C:\Users\sanane\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip135.jpg

 

 

 

 

 

 

 

 

 

17) Models altında şekildeki gibi dosyamız oluşacaktır.

Açıklama: C:\Users\sanane\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip136.jpg

 

 

 

 

18) Controllers üzerinde sağ tuşa basarak Add/Controller seçimi yapalım.

Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip225.png

 

 

 

 

19) Şekildeki seçimi yaparak Add butonuna basalım.

Açıklama: C:\Users\sanane\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip138.jpg

 

 

 


 

 

20) Projemizi derleyelim. Ardından şekildeki bilgileri girerek onaylayalım.

Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip226.png

 

 

 

 

 

 

 

 

 

 

 

 

 

21) Şekildeki View’lar otomatik olarak oluşacaktır.

Açıklama: C:\Users\sanane\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip140.jpg

 

 

 

 

 

 

 

 

 

22) Test etmek için RouteConfig dosyasındaki Home  ifadesini Manavs olarak değiştirelim.

    routes.MapRoute(

                name: "Default",

                url: "{controller}/{action}/{id}",

                defaults: new { controller = "Manavs", action = "Index", id = UrlParameter.Optional }

            );


 

 

23) Projemizi yüklediğimizde tüm işlemleri yapabildiğimizi gözlemleyelim.

Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip227.png

 

 

 

 

 

 

 

 

 

 

 

 

 

24) _Layout.cshtml sayfasının footer kısmına aşağıdaki ifadeyi ekleyelim.

Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip228.png

 

 

 

 

25) Index.cshtml dosyasına aşağıdaki ifadeleri ekleyelim.

Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip231.png

 

 


 

 

26) Projemizi yüklediğimizde Index sayfasına bu adres bilgisi şekildeki gibi eklenecektir.

Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip232.png

 

 

 

 

 

 

 

27) Ancak Create sayfasına geçtiğimizde şekildeki gibi hata mesajı ile karşılaşacağız.

Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip233.png

 

 

 

 

 

 

28) Bunu önlemek için _Layout sayfasında eklemiş olduğumuz ifadenin sonuna false ekliyoruz.

Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip234.png

 

 

 

 

 

Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip235.pngProjeyi yüklediğinizde artık hata ile karşılaşmayacaksınız ve adres bilgisi sadece Index sayfasında görüntülenecektir.

 

 


 

 

29) Controllers üzerinden sağ tuşa basarak HomeController isimli yeni bir kontroller’ı boş olarak ekleyelim

Açıklama: C:\Users\sanane\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip144.jpg

 

 

 

 

 

 

 

30) Kodlar üzerinde sağ tuşa basarak Add View seçeneğine tıklayalım.

Açıklama: C:\Users\sanane\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip146.jpg

 

 

 

 

 

 

 

 

31) Şekildeki gibi yapılandıralım.

Açıklama: C:\Users\sanane\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip147.jpg

 

 

 

 

 

 

 

 

 

 


 

32) Bu yeni View(Index) içine aşağıdaki kodları ekleyelim.

@{

    ViewBag.Title = "Index";

    Layout = "~/Views/Shared/_Layout.cshtml";

}

 

<h2>Index</h2>

<br />

<br />

<a href="#" class="btn btn-success" id="btnListele">Listeler</a>

 

<br />

<br />

 

<ul id="ulList"></ul>

 

 

33) HomeController.cs dosyasına geçerek aşağıdaki action’ı ekleyelim.

   public JsonResult Listeler()

        {

            ders6.Models. manav1Containerdb = new ders6.Models. manav1Container ();

            return Json(db.Manav.ToList(), JsonRequestBehavior.AllowGet);

        }

 

34)RouteConfig dosyamızda kontroller bilgisini Home olarak değiştirip çalıştırdığımızda görüntü şekildeki gibi olacaktır.

 

Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip236.png

 

 

 

 

 


 

 

35) Home klasörü içindeki Index sayfamızdaki tüm kodlar aşağıdaki gibi olsun

@{

    ViewBag.Title = "Index";

    Layout = "~/Views/Shared/_Layout.cshtml";

}

 

@section scripts{

    <script type="text/javascript">

        $(function () {

            $('#btnListele').on("click", function (e) {

                e.preventDefault();

                $.ajax({

                    url: '/Home/Listeler/',

                    type: 'GET',

                    dataType: 'json',

                    success: function (data) {

                        $(data).each(function (index, item) {

                            $('#ulList').append("<li>" + item.ad + "</li>");

                        });

                    }

 

                });

            });

        });

    </script>

    }

 

36) Çalıştırıp Listeler butonuna tıkladığımız zaman görüntü şekildeki gibi olacaktır. Buradan Copy-Paste yapıyorsanız tek tırnaklara dikkat edin.

 

Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip237.png

 

37) Kodumuzu aşağıdaki gibi değiştirelim.

@section scripts{

    <script type="text/javascript">

        var i = 0; var t = 0;

        $(function () {

            $('#btnListele').on("click", function (e) {

                e.preventDefault();

                $.ajax({

                    url: '/Home/Listeler/',

                    type: 'GET',

                    dataType: 'json',

                    success: function (data) {

         $(data).each(function (index, item) {

               i++;

               $('#ulList').append("<li>" + i.toString() + "</li>");

               t = t + i;

        $('#ulList').append("<li>" + item.ad + "==>" + item.detay + "</li>" + "<p/>");

       

        });

        $('#ulList').append("<hr/>" + "<li>Toplam:" + t.toString() + "</li>");

        }

          });

         });

        });

    </script>

    }

Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip238.png38) Çalıştırdığımızda görüntü şekildeki gibi olacaktır.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

WEBGRID:

 

Kullanışlı bir Grid yapısı olan WebGrid’i bir önceki uygulamamıza devam ederek gerçekleştireceğiz.

39) HomeController içine aşağıdaki Action’ı ekleyelim.

 

    public ActionResult BenimGrid()

        {

            ders6.Models.manav1Container db = new ders6.Models.manav1Container();

            return View(db.Manav.ToList());

        }

 

40) Bununla ilintili View’ı Home klasörü altında oluşturalım.

 

Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip239.png

 

 

 

 

 

Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip240.png

 

 

 

 

 

 

 

 

 

 

 

41) BenimGrid sayfasına aşağıdaki kodları ilave edelim.

@{

    var grid = new WebGrid(Model);

    <div>

    @grid.GetHtml()

</div>

 

}

42)Home kontrolü içindeki Index.cshtml dosyasına aşağıdaki kodu üst kısma veya canınız bu linkin nerde görünmesini isterseniz oraya ilave ediniz

<a href="Home\BenimGrid">WebGrid Sayfasına Gidiniz…</a>

Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip241.pngProjemizi yükleyerek Index sayfamızdan BenimGrid sayfasına geçiş yapınız.

 

 

 

 

 

 

 

43) Bu ASP.NET.MVC gridini çağırır. Burada her şey otomatiktir. Başlık çubuğuna tıkladığınızda o alana göre sıralama yapar.

Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip242.png

 

 

 

 

 

 

 

 

 

 


 

44) Script bölgesinde bu grid’e ait birçok metodun olduğunu görebiliriz.

Açıklama: C:\Users\sanane\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip155.jpg

 

 

 

 

 

tableStyle

Tablonun genelinde kullanılacak olan CSS sınıfının tanımlanacağı parametredir.

 

headerStyle

Tablonun headerında (başlık bölümünde) kullanılacak olan CSS sınıfının tanımlanacağı parametredir.

 

footerStyle

Tablonun alt footerında (alt bölümünde) kullanılacak olan CSS sınıfının tanımlanacağı parametredir.

 

rowStyle

Tablonun satırlarında kullanılacak olan CSS sınıfının tanımlanacağı parametredir.

 

alternatingRowStyle

Tablonun çift numaralı satırlarında kullanılacak olan CSS sınıfının tanımlanacağı parametredir. Örneğin bir satırın beyaz bir satır mavi olmasını istiyorsanız rowStyle’a beyaz arka plan, alternatingRowStyle’a da mavi arka plan tanımlaması yapmanız gerekecektir.

 

selectedRowStyle

Tablonun seçili satırında kullanılacak olan CSS sınıfının tanımlanacağı parametredir.

 

caption

Tablonun başlığının tanımlanacağı parametredir.

 

displayHeader

Tablo sütun başlıklarının (header) görünüp görünmemesinin tanımlanacağı parametredir. Eğer true değeri atanırsa başlıklar görünür, false değeri atanırsa görünmez.

 

fillEmptyRows

Eğer gridin son sayfasındaki eleman sayısı, sayfadaki eleman sayısından az ise kalan satırların boş satırlarla doldurulup doldurulmamasının tanımlanacağı parametredir. Eğer true değeri atanırsa kalan satırlarda boş satır görünür, false değeri atanırsa görünmez.

 

emptyRowCellValue

Eğer fillEmptyRows değeri true ise boş satırlara atanacak değerin tanımlanacağı parametredir.

 

columns

Grid sütunlarında hangi verilerin yer alacağının tanımlanacağı parametredir.

 


 

exclusions

Eğer fillEmptyRows değeri true ise boş satırlara değer atanması istenmeyen sütunların tanımlanacağı parametredir.

 

mode

Gridin sayfalama yönteminin tanımlanacağı parametredir.

 

firstText

Grid üzerinde sayfalama yapıldığında ilk sayfa linkine tanımlanacak metin ifadesidir.

 

previousText

Grid üzerinde sayfalama yapıldığında önceki sayfa linkine tanımlanacak metin ifadesidir.

 

nextText

Grid üzerinde sayfalama yapıldığında sonraki sayfa linkine tanımlanacak metin ifadesidir.

 

lastText

Grid üzerinde sayfalama yapıldığında son sayfa linkine tanımlanacak metin ifadesidir.

 

numericLinksCount

Sayfalama yapıldığında kaç adet sayfa numarasının görüntüleneceğinin tanımlanacağı parametredir.

 

 

45) Kodumuzu aşağıdaki gibi değiştirerek çalıştırdığımızda başlık bilgilerini değiştirdiğimizi ve bir üst başlık eklediğimizi görebilirsiniz.

 

@{

    var grid = new WebGrid(Model);

    <div>

    @grid.GetHtml(

    caption:"BİZİM MANAV",

       columns: grid.Columns(

                    grid.Column("Ad", "Ürün Adı"),

                    grid.Column("Detay", "Geldiği Yer"),

                    grid.Column("ID", "Sıra No")

                ))

 

    

</div>

 

 

}

 


 

Görüntü şekildeki gibi olacaktır.

Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip243.png

 

 

 

 

 

 

 

 

 

 

 

 

 

 

46) Üsteki grid tanımlamasını değiştirerek varsayılan olarak AD’a göre sıralayalı ve sayfalama yapalım.

@{

    var grid = new WebGrid(Model, defaultSort: "Ad", rowsPerPage: 2);

   

    <div>

    @grid.GetHtml(

    caption:"BİZİM MANAV",

   

       columns: grid.Columns(

                    grid.Column("Ad", "Ürün Adı"),

                    grid.Column("Detay", "Geldiği Yer"),

                    grid.Column("ID", "Sıra No")

                ))

 

 

</div>

}

 


 

Görüntü şekildeki gibi olacaktır.

Açıklama: C:\Users\sanane\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip157.jpg

 

 

 

 

 

 

 

47) Kodumuzu aşağıdaki hale getirerek sayfayı yükleyelim.

@{

    var grid = new WebGrid(Model, defaultSort: "Ad", rowsPerPage: 3);

   

    <div>

 

    @grid.GetHtml(tableStyle: "webGrid",

    caption:"BİZİM MANAV",mode: WebGridPagerModes.All,

   

       columns: grid.Columns(

       grid.Column("Ad", "Ürün Adı") ,

                    grid.Column("Detay", "Geldiği Yer"),

                    grid.Column("ID", "Sıra No")

                ))

       

      

 

</div>

   

  <style type="text/css">

    .webGrid { margin: 4px; border-collapse: collapse; width: 500pxbackground-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}

</style>

      

 

}

 

 

 

 

 

 

Görüntü şekildeki gibi olacaktır.

Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip244.png

 

 

 

 

 

 

 

 

 

 

 

 

 

48) Son olarak aşağıdaki formatı uygulayarak görüntüleyelim.

 

@{

    ViewBag.Title = "BenimGrid";

    Layout = "~/Views/Shared/_Layout.cshtml";

}

 

<h2>BenimGrid</h2>

 

 

<style type="text/css">

    .webgrid-table {

        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

        font-size: 1.2em;

        width: 100%;

        display: table;

        border-collapse: separate;

        border: solid 1px #98BF21;

        background-color: white;

    }

 

        .webgrid-table td, th {

            border: 1px solid #98BF21;

            padding: 3px 7px 2px;

        }

 

    .webgrid-header {

        background-color: #A7C942;

        color: #FFFFFF;

        padding-bottom: 4px;

        padding-top: 5px;

        text-align: left;

    }

 

    .webgrid-footer {

    }

 

    .webgrid-row-style {

        padding: 3px 7px 2px;

    }

 

    .webgrid-alternating-row {

        background-color: #EAF2D3;

        padding: 3px 7px 2px;

    }

</style>

 

<h2>Index</h2>

 

@{

    var grid = new WebGrid(Model);

}

 

<div id="gridContent" style=" padding:20px; ">

    @grid.GetHtml(

        tableStyle: "webgrid-table",

        headerStyle: "webgrid-header",

        footerStyle: "webgrid-footer",

        alternatingRowStyle: "webgrid-alternating-row",

        selectedRowStyle: "webgrid-selected-row",

        rowStyle: "webgrid-row-style",

        mode: WebGridPagerModes.All,

        columns:

            grid.Columns(

            grid.Column(columnName: "Id", header: "Ürün No", format: @<text>@item.Id</text>),

            grid.Column(columnName: "ad", header: "Ürün Ad", format: @<text>@item.ad</text> ),

            grid.Column(columnName: "detay", header: "Geldiği Yer", format: @<text>@item.detay</text>)

      ))

 

</div>

 

Not:ColumnName önemlidir. Tablo başlıkları ile aynı olsun yoksa sıralama yapmaz.

 

 

 

 

 

 

Görüntü  şekildeki gibi olacaktır.

Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip245.png

 

 

 

 

 

 

 

 

 

 

 

 

 

ÖNEMLİ NOT:Veri tabanının her ortamda kullanılabilmesi için Web.config içindeki yolu aşağıdaki hale getirmeniz gerekir.

attachdbfilename=|DataDirectory|\yuksel.mdf