Takip Edin

ASP.NET MVC

ASP.NET MVC’de View Oluşturma

ASP.NET MVC'de View Oluşturma

Bu yazıda, ASP.NET MVC uygulamasında bir view’in nasıl oluşturulduğu ve bu view içerisindeki model sınıfının kullanımı ele alınacaktır.

Bir view, model sınıf nesnesini kullanarak veriyi görüntülemek için kullanılır. ASP.NET MVC uygulamasında tüm view dosyaları, Views klasörü içerisinde bulunur.

Bir controller, bir ya da daha fazla action metoduna sahip olabilir ve her action metodu, farklı bir view döndürebilir. Kısacası bir controller, bir ya da daha fazla view oluşturabilir. Bu nedenle, kolay bakım amacıyla MVC çerçevesi, her controller için Views klasörü altında controller ile aynı ismi taşıyan ayrı bir alt klasör ister.

Örneğin, HomeController‘dan oluşturulan tüm view’ler Views klasöründe bulunan Home klasöründe yer alacaktır. Aynı şekilde ProductController‘dan oluşturulan view’ler aşağıda gösterildiği gibi Views klasöründe bulunan Product klasöründe yer alır.

productcontroller'dan oluşturulan view'ler, Views klasörü altındaki Product klasörü içerisinde yer alır.
Şekil 1: Controller'lar için view klasörleri
Not: Shared klasörü, birden fazla controller arasında paylaşılan view’leri, layout view’leri ve partial view’leri içerir.

Razor View Engine

Microsoft, view’i sunucu tarafındaki kodlar ve HTML etiketlerinin karışımıyla derlemek için razor view engine’ı tanıttı. Razor view için özel söz dizimi, bir view yazarken gereken tuş vuruşları ve karakter sayısını en aza indirgeyerek kod yazma hızını maksimuma çıkarır.

Razor view, sunucu tarafındaki kodu dahil etmek için ASP’nin klasik <% %> karakteri yerine @ karakterini kullanır. Sunucu tarafı kodu, razor view içerisinde yazmak için C# ya da Visual Basic söz dizimini kullanabilirsiniz.

ASP.NET MVC, aşağıdaki razor view dosya tiplerini desteklemektedir:

.cshtmlC# razor view. HTML etiketleri ile C# kodunu destekler.
.vbhtmlVisual Basic razor view. HTML etiketleri ile Visual Basic kodunu destekler.
.aspxASP.NET Web Form
.ascxASP.NET Web Control

Bir View Oluşturma

Bir action metodun içerisine sağ tıklayıp Add View’i seçerek o action metodu için bir view oluşturabilirsiniz.

Aşağıdaki resimde ProductController‘ın Index() action metodundan bir view oluşturulması gösterilmektedir:

product controller index action metoduna sağ tıklayıp add view'i seçtik
Şekil 2: Action metodundan view oluşturma

Ürünlerin listesini view’de liste halinde göstermek istediğimiz için açılan Add View penceresinde Template’i List olarak seçelim:

add view penceresinde template'i list olarak belirledik.
Şekil 3: List Template

Daha sonra Models klasöründe bulunan tüm sınıfların listesini otomatik olarak listeleyen Model class açılır listesinden önceki yazıda oluşturduğumuz model sınıfı olan Product‘ı seçelim:

model class açılır menüsünden produc'ı seçtik
Şekil 4: Product model class

“Use a layout page” onay kutusunu işaretleyip bu view için varsayılan _Layout.cshtml sayfasını seçelim, ardından Add butonunu tıklayalım:

_layout.cshtml i layout page olarak seçtikten sonra add butonunu tıkladık.
Şekil 5: Use a layout page(_Layout.cshtml)

Aşağıda gösterildiği gibi Views klasörü içerisindeki Product klasörü altında Index view’i oluşacaktır:

solution explorer penceresindeki product klasörü altında index.cshtml dosyası oluşturuldu.
Şekil 6: Views => Product => Index.cshtml

Aşağıdaki kod parçacığı, yukarıda oluşturulan bir Index.cshtml’i gösterir:

@model IEnumerable<WebApplication1.Models.Product>

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.ProductName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Price)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
<tr>
    <td>
        @Html.DisplayFor(modelItem => item.ProductName)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.Price)
    </td>
    <td>
        @Html.ActionLink("Edit", "Edit", new { id=item.ProductId })|
        @Html.ActionLink("Details", "Details", new { id = item.ProductId })|
        @Html.ActionLink("Delete", "Delete", new { id = item.ProductId })
    </td>
</tr>
}

</table>

Yukarıda gördünüz gibi Index view’i, hem HTML hem de razor kodları içermektedir. Satır içi razor ifadesi @ sembolü ile başlar. @Html, HTML kontrolleri oluşturan yardımcı bir sınıftır. Razor söz dizimi ve HTML helper’ları, ilerleyen bölümlerde anlatılacaktır.

Not: ASP.NET MVC’deki her view, System.Web.Mvc namespace’inde bulunan WebViewPage sınıfından türetilir.

Verileri view üzerinde görüntülemek için model nesnesini view’e geçirmemiz gerekir. Bir sonraki yazıda, bir model, view ve controller’ın nasıl entegre edileceği gösterilecektir.

Devamını oku

Popüler

error: Content is protected !!