AngularJ2 Data Binding ve Data Display

Merhaba, bir önceki makalemde nasıl yeni bir angularJs2 projesi oluşturacağımdan bahsetmiştim. Bu makalemde ise angularjs2’de data binding ve data display’den bahsedeceğim.

Önceki makalemde oluşturduğum app klasörünün altına data_binding_main.ts doyasını ekliyorum.


import {bootstrap} from 'angular2/platform/browser';           //importing bootstrap function
import {AppComponent} from "./data_binding_app.component";     //importing component function

bootstrap(AppComponent);

Şimdi de data_binding_app.component.ts isminde içinde component barındıran bir TypeScript dosyası ekleyelim


import {Component, View} from "angular2/core";

@Component({
   selector: 'my-app'
})

@View({
  template: `


<h3>İsim : {{name}}</h3>



<h3>Soyisim : {{surname}}</h3>



<h3>Şehir : {{City}}</h3>



<h2>Showing data using array property with NgFor</h2>



<h3>My favorite is: {{myfavorite}}</h3>


List of Favorites:


<ul>


<li *ngFor="#favorite of favorites" (click)="onItemClicked(favorite)">
          {{ favorite }}
       </li>

    </ul>

    <input type="text" [(ngModel)]="clickedItem">
    `
})

export class AppComponent {
   name: 'Mustafa';
   surname:'Alkan';

City: string;
constructor() {
   this.City = 'İzmir';
}

favorites = ['Sport', 'Music', 'Sinema', 'Swimming'];
   myfavorite = this.favorites[1];

   public clickedItem = "";
     onItemClicked(Item) {
        this.clickedItem = Item;
     }
}

Yukarıda yaptığımız işleri kısaca özetlemek istersek, AppComponent ismiyle yarattığımız component içerisinde name, surname ve City olarak 3 değişken oluşturup, bunlara değer atadık. Önceki makalemde anlattığım üzere, AngularJS2’de scopelar kaldırılmıştı ve artık bu gibi değişkenleri componentler içerisinde tanımladığımızı söylemiştik. Böylece component içerisinde oluşturduğumuz dataları son kullanıcıya view içinde göstermiş olduk.

Favorites isminde bir array nesnesi oluşturduk ve array içerisindeki her bir itemi view içerisindeki templatede *ng-for directive ile bind ettik. Listemizdeki herhangi bir nesneye tıkladığımızda, gidip aşağıdaki text inputta görünmesini istiyorsak bunu da aşağıda gördüğümüz click eventi ile gerçekleştirebiliriz.

(click)="onItemClicked(favorite)"

onItemClicked fonksiyonu ise, AppComponent içerisinde tanımlanmış bir fonksiyondur ve görevi clickedItem değişkenine, fonksiyon içerisinde gelen parametreyi set etmektir.

public clickedItem = "";
     onItemClicked(Item) {
        this.clickedItem = Item;
     }
<input type="text" [(ngModel)]="clickedItem">

Şimdi databinding.html dosyasımızı oluşturalım.


<html>
   <head>
      <title>Data Binding</title>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
      <script src="https://code.angularjs.org/2.0.0-beta.6/angular2-polyfills.js"></script>
      <script src="https://code.angularjs.org/tools/system.js"></script>
      <script src="https://code.angularjs.org/tools/typescript.js"></script>
      <script src="https://code.angularjs.org/2.0.0-beta.6/Rx.js"></script>
      <script src="https://code.angularjs.org/2.0.0-beta.6/angular2.dev.js"></script>
      <script>
         System.config({
           transpiler: 'typescript',
           typescriptOptions: { emitDecoratorMetadata: true },
           packages: {'app': {defaultExtension: 'ts'}},
           map: { 'app': './app' }
         });
         System.import('app/data_binding_main')
               .then(null, console.error.bind(console));
      </script>
   </head>
   <body>
      <my-app>Loading...</my-app>
   </body>
</html>

NodeJS command promptan databinding.html dosyasını içeren klasöre gidelim ve projemizi npm start komutuyla çalıştıralım.

1

Reklamlar

Asp.net Mvc Bir Sayfada Partial View Render Etme

Merhabalar. Bu yazımda mvc projemizde herhangi bir cshtml view sayfamızdan partial view çağırmayı ve bu sayfada nasıl render edildiğini anlatacağım.

Görüntülemek istediğimiz bir view sayfasında partial viewlar kullanmak isteyebiliriz. Sayfada görüntülemek istediğimiz her şeyi tek bir controller actionda yüklemek yerine küçük partial sayfalara ayırmak işimizi daha kolaylaştırır ve de daha sadeleştirip, okunurluğu artırabiliriz. Bunun için bir PartialViewResult methodu oluşturalım.

public PartialViewResult Partial()
{
    return PartialView("Partial");
}

Daha sonra bu methodumuzun üzerine gelip sağ tıklayıp Add View ekranında viewa bir isim verdikten sonra View Options kısmında Create as a partial view seçip bir view ekleyelim. Eğer methodumuzun return olan PartialView() methodu içerisinde bir Partial view ismi yazıyorsa, o viewi yükler. Eğer return olan partialview() methodunun içerisi boş ise, yani hiç bir view sayfasını yüklemek istemiyorsak yukarıdaki oluşturduğumuz ve kendi belirlediğimiz isimdeki partial view’i yükler.

Şimdi ise sırada herhangi bir view sayfasının içerisinden yukarıda oluşturduğumuz Partial isimli methodu çağırma işlemi var. Bu methodu çağırdığımızda partial view render edilmiş olacak.

@Html.Action("Partial", "Home")

Böylece Html helper yardımı ile sayfamızda partial view render etmiş olduk.

View Tanımlama

Bu yazımda da View dosyaları nasıl tanımlanır ve nasıl kullanılır, bu konular üzerinde duracağım.

Yeni bir proje oluşturduğumuzda projenin dizininde Views klasörü vardır. Dizin yapısını incelersek her Controller sınıfı için Views klasörünün altında o Controller adında bir klasör daha vardır.

Ayrıca her Controller sınıfı için tanımlanan Views klasörünün altında ise, Controller sınıfı içerisindeki her metod için bir .cshtml veya .vbhtml uzantılı Razor sayfaları vardır. Bu razor sayfaları dinamik yapıdadır.

solution explorer

Controller classları ile view razor sayfaları ilişkilidir. Yeni bir proje oluşturulduğunda default olarak razorlar oluşturulmuş halde gelir. Ama yeni bir controller classı oluşturup, içinde herhangi bir method tanımladığımızda herhangi bir razor sayfası kendiliğinden oluşturulmaz. Bunun için sağ tıklayıp Add View deyip bir razor oluşturabiliriz.

AddView

 

Add View tıkladıktan sonra şöyle bir ekran karşımıza çıkacak.

AddViewOptionBu sayfa oluşturucağımız razorun optionlarının seçildiği sayfadır. View Engine olarak Razor veya Asp.net C# veya VB belirleyebiliriz. Ama MVC ile gelen Razor View Engine işlerimizi daha da basitleştirmektedir. Onun için genellikle Razor kullanılır. Hemen altında Create a strongly-typed view seçeneği vardır. Strongly-typed Views’a daha sonradan tekrar değineceğim. Onun altında da Create as partial view seçeneği vardır. Partial View’in Asp.net Web Forms’taki karşılığı User Controller’dir. Herhangi masterpage kullanmazlar. Bundan dolayı da sayfada css, js dosyaları sayfada tutulmaz. Ama Use a Layout or Masterpage seçeneğini tıklarsak herhangi bir Layout sayfası seçmemizi ister. Layout seçtikten sonra oluşan Razor sayfasının içeriği şu şekildedir

@{
ViewBag.Title = “Example”;
Layout = “~/Views/Shared/_LayoutDark.cshtml”;
}

<h2>Example</h2>

Böylece yeni bir View sayfası oluşturma işlemini tamamlamış olduk.

 

ASP.net MVC NEDİR?

“ASP.NET HTML, CSS, JavaScript ve sunucu taraflı programlama ile web sayfaları ve web siteleri yapmaya yarayan bir geliştirme yapısıdır.
ASP.NET 3 farklı geliştirme modeli sunar: Web pages, MVC (Model View Controller) ve Web Forms.”

“w3school”


MVC, uygulamanın kullanıcı arayüzünü 3 temel yapıya ayırır:

Model: Verinin nasıl değişeceğini ve nasıl yönetileceğini belirleyen iş kurallarını (Business Rules) içeren sınıfların tamamının bulunduğu katmandır. Genelde bunlar veritabanını temsil eden sınıflarlar veya domaini temsil eden nesnelerdir. EntityFramework, NHibernate gibi, entity-data-model ler de, model katmanında yer alabilir. Yani uygulamamızda kullanacağımız nesneler bu katmandadır.

View: Kullanıcı arabiriminin (User Interface – UI) gösterileceği katman. Dinamik olarak üretilen HTML şablonu bu katmandadır. Kısaca veri gösterim katmanı diyebiliriz.

Controller: Tüm sistem akışının, kullanıcı ile olan etkileşimi kontrol eden ve olayları yöneten sınıfların tamamı. View ve Model katmanları arasındaki ilişkiyi yönetir. Kullanıcıdan girdi alır, modelle iletişime geçer ve ne gösterileceğine karar verir.

ASP.NET MVC 1

13 MART 2009 da resmi olarak kodlar ve birim testlerle MVC mimarisi yayınlanmıştır. MVC mimarisinin bugün kullanılan bir çok özelliği aslında MVC 2 de gelecektir.

ASP.NET MVC 2

MVC 2 ilkinden 1 yıl sonra yayınlanmıştır (MART 2010). MVC 2 de olan bazı ana özellikler şunlardır:

  • Otomatik olarak oluşturulan kullanıcı arabirimi yardımcıları (UI Helpers) ve özelleştirilebilir şablonlar.
  • Hem server, hem de istemci taraflı, nitelik tabanlı (attribute-based) bir model doğrulama (model-validation) yapısı.
  • Strongly typed HTML Helpers
  • Geliştirilen Visual Studio araçları.


ASP.NET MVC 3

MVC 3, MVC 2 den 10 ay sonra yayınlanmıştır. Eklenen ana başlıklar:

  • Razor görüntüleme motoru (Razor View Engine).
  • .NET 4 dataannotation desteği.
  • Gelişmiş model doğrulama (model validation).
  • Unobtrusive JavaScript, jQuery Validation, ve JSON için daha iyi bir JavaScript desteği.
  • Yazılım ve platforma bağlı güncellemeler ve yönetim için NuGet kullanımı.

Razor View Engine

MVC 1 den itibaren bugüne kadar yapılan en büyük HTML görüntüleme güncellemesi Razor olmuştur. MVC 1 ve MVC 2 de genel olarak kullanılan görüntüleme motoru Web Forms görüntüleme motoru ile aynı sözdizimini ve dosya uzantısındadır. (ASPX/ASCX/MASTER)

Örnek Web Forms sözdizimi:

 
<%@ 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:

@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>