11 Mart 2015 Çarşamba

Asp.Net MVC 3 Razor View Engine Kullanımı -3

Razor da Aspx gibi bir görüntüleme motorudur (view-engine). MVC3 den sonra (MVC3 ve MVC4) gelmiştir.
Web forms ile geliştirdiğiniz bir projeye bazı özellikler eklemem gerekti diye sürekli <% %> etiketleri eklemekten bıktıysanız razor yeni bir bakış açısı getiriyor.
Razor un avantajları:
  • Düzenli, etkileyici ve akışkan: Sayfadaki karakter sayısını en aza indirir, okunurlugu yuksek, duzenli ve kolay bir akıs saglar.
  • Öğrenmesi kolay: .net ve html kodlarını birbiri içerisinde zorlanmadan kullanmayı sağlar. .net kodlarına başlamadan sadece @ işaretini koyarsınız ve Razor kodları rahatlıkla ayrıştırır.
  • Yeni bir dil değildir: Yeni bir dil değil , bilinen bir dilin (C#, VB, Html) daha iyi ve anlaşılır olarak yazılmasını sağlar.
  • Çok iyi deyim tamamlama desteği (intellisense): Herhangibir kod editoru veya bir araç kullanmadan rahatlıkla geliştirilebilir olmasına ragmen, visual studio, tam bir deyim tamamlama(intellisense) destegi sunar.
  • Birim Test: Conroller ve ya web server gerektirmeden, birim test edilebilir özelligi vardır.
Sayfa Düzeni (Layout) Yapacağımız projelerde sayfanın düzenini basit ve dinamik bir şekilde kontrol etmek  için;
  • Html.RenderPartial bu methodla Shared yada ilgili kontrolün altında belirttiğiniz sayfayı, sayfanıza çağırmaya olanak sağlar. Bir nevi include file gibidir.
  • @{Html.RenderPartial(“_menu”);} Şeklinde kullanıyoruz, bu kodu yazdığımız yere Shared klasörü içerisinde ki yada ilgili kontrol klasörü içindeki _menu.cshtml sayfası çağrılır. Çağırırken uzantıyı yazmamıza gerek yoktur, otomatik olarak aspx, ascx, cshtml ve vbhtml uzantılarında ilgili sayfayı bulur.
  • RenderPage Yukarıda ki kontrolün aynısı gibi çalışır, tek fark çağırırken tam yolu vermemiz gerekir. Bu sebepden dolayı çağıracığımız dosyanın bulunduğu klasörün bir önemi yoktur, istediğimiz dosyadan istediğimiz sayfayı çağırabiliriz.
  • @RenderPage(“~/Views/Home/_test.cshtml”) şeklinde kullanıyoruz.
  • Yukarıda ki iki yöntemde de data yı ilgili sayfalara gönderebiliyor ve o sayfalarda işlem yapabiliyoruz.
    1
    2
    @{Html.RenderPartial("_menu",Model);}
    @RenderPage("~/Views/Home/_test.cshtml",ViewBag.dinamik)
  • RenderSection bu yöntem ile sayfa içinde ki kod bloğunu farklı bir yerde göstermek için kullanıyoruz. Yukarıdaki yöntemlerin aksine dışarıdan değil içeriden çağırma işlemini yapıyoruz.
  • @RenderSection(“menu”, false) diyoruz, burada ki false gerekliliği ifade ediyor. Sonrasında görüntülenecek section bloğunu yazıyoruz. @section menu{<h1>menu</h1>}
Razor Sözdimi (Syntax)
  • Razor view engine kodlarının başına @ işareti koyuyoruz. Fakat bir mail adresini elle yazmak istediğimizde sıkıntı oluyor. Bunu ortadan kaldırmak için 2 tane @@ ile yazıyoruz. test@@test.com gibi..
  • Dinamik kodlarla html kodlarını iç içe yazdığımız bu yapıda nokta(.) simgesi başımızı ağırta biliyor. Yani @degisken.yazdığımızda ToString(), ToLower() gibi methodların listelendiğini görürüz halbu ki biz sadece nokta koymak istiyoruz. Bunun için@(degisken). şeklinde değişkeni parantez içine almamız yeterlidir.
  • Bir if bloğu yada herhangi bir kod bloğu içinde direk metin yada html kodu yazmamız gerekebilir. Bunun için razor bize 2 farklı yöntem sunuyor. İlk yöntemde tek satırlık yazımlar için @:tek satırlık yazım ve çok satırlı yazımlar için <text>çok satırlı yazım</text>
    01
    02
    03
    04
    05
    06
    07
    08
    09
    10
    11
    @if (true)
    {
        @:Tek satır yazım.
            <text>
            çok
            satırlı
            yazım
           </text>
    }
ViewBag kullanımı Mvc 3 ile birlikte gelen en önemli özelliklerden bir tanesi ViewBag nesnesi. Mvc 3 öncesinde ViewData[“degisken”] şeklinde view katmanımıza veri gönderiyorduk, eğer gönderdiğimiz veri bizim modelimizse view tarafında  ViewData[“degisken”] nesnesini ilgili modele dönüşümünü sağlıyorduk, yani 2 türlü iş yapıyorduk. ViewBag ile bu durum ortadan kalkıyor, ViewBag var gibi çalışıyor, neyi verirseniz o türe dönüşüyor ve ekstra bir işlem yapmadan kullanabiliyoruz.
01
02
03
04
05
06
07
08
09
10
11
12
//control katmanımız
public ViewResult Index()
{
    ViewBag.dinamik = context.uruns;
    return View();
}
//view katmanımız
@foreach (var item in ViewBag.dinamik)
{
    @item.ozellikAdi
}
Helper Kullanımı Yardımımıza hızlıca koşan helper ları yazmak ve kullanmak için çok güzel bir mekanızma bulunuyor. App_Code içine .cshtml uzantılı bir sayfa ekliyoruz ve içine razor syntaxlarını kullanarak fonksiyonumuzu yazıyoruz ve tüm sayfalardan bu fonksyionlara sayfaAdi.fonksiyon adı şeklinde erişip kullanabiliyoruz.
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
  //App_Code klasörümüz içindeki myHelper.cshtml dosyamızın içi
 @helper stokDurumu(int stok){
     if (stok < 1)
     {
         @:Yok :(
     }
     else
     {
         var. @stok adet
     }
 }
//Herhangi bir sayfadan erişilip kullanılması
 @foreach (var item in Model) {
     @myHelper.stokDurumu(item.stok)
 }
Kaynak:
http://www.apostylee.com/razor-view-engine-puf-noktalari/ İlgili sayfada örnek var. İncelemek isteyenler için.
Örnek bir söz dizimi:

1
2
3
4
5
6
7
8
<div>
    @for(int i = 0; i < 10; i++)
    {
        <div class="class_@(i)">
            <span>sayı @(i)</span>
        </div>
    }
</div>
Yukarıdaki kodun html cıktısı:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<span style="font-family: Arial, Helvetica, sans-serif;"><div>
    <div class="class_0">
        <span>sayı 0</span>
    </div>
    <div class="class_1">
        <span>sayı 2</span>
    </div>
    ...
    ...
    ...
    <div class="class_9">
        <span>sayı 9</span>
    </div>
</div></span>
Aynı kodun Aspx deki soz dizimi
1
2
3
4
5
6
7
<span style="font-family: Arial, Helvetica, sans-serif;"><div>
    <% for(int i = 0; i < 10; i++) { %>
        <div class="class_<%: i %>">
            <span>sayı <%: i %></span>
        </div>
    <% } %>
</div></span>
Bir başka örnek;
Örnek Web Forms sözdizimi:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<%@ Page Language="C#" MasterPageFile="</Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<MvcMusicStore.ViewModels.StoreBrowseViewModel>" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Browse Albums
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <div class="genre">
        <h3><em><%: Model.Genre.Name %></em> Albums</h3>
        <ul id="album-list">
            <% foreach (var album in Model.Albums) { %>
                <li>
                    <a href="<%: Url.Action("Details", new { id = album.AlbumId }) %>">
                    <img alt="<%: album.Title %>" src="<%: album.AlbumArtUrl %>" />
                    <span><%: album.Title %></span>
                    </a>
                </li>
            <% } %>
        </ul>
    </div>
</asp:Content>
Razorun söz dizimi tamamen kod odaklı bir şablonu vardır. İlk bakıldığı anda HTML ve .Net kodları hemen anlaşılır, okunması ve anlaşılması çok kolaydır. Yukarıdaki kodun Razor ile yazılmış hali aşağıdaki gibidir:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@model MvcMusicStore.Models.Genre
@{ ViewBag.Title = "Browse Albums"; }
<div class="genre">
    <h3><em>@Model.Name</em> Albums</h3>
    <ul id="album-list">
        @foreach (var album in Model.Albums)
        {
            <li>
                <a href="@Url.Action("Details", new { id = album.AlbumId })">
                    <img alt="@album.Title" src="@album.AlbumArtUrl" />
                    <span>@album.Title</span>
                </a>
            </li>
        }
    </ul>
</div>
Kaynak:
Benim toparladıklarım bunlar ayrıca http://www.youtube.com/watch?v=Mh1ExbYkn-0 buradaki videoda güzel.
Gönderen zaman:

Hiç yorum yok :

Yorum Gönder

Kaydol: Kayıt Yorumları ( Atom )