Günümüzde artık mobil uygulamalar hayatımızın tüm kademesinde karşımıza çıkmaktadır. Tabiki biz asp.net mvc web yazılım geliştirenlerin üzerinede düşen ise, bu kadar yaygınlaşmış olan mobil cihazlar için web yazılımlarımızın (user interface) kullanıcı arayüzlerini küçük ve kısıtlı ekran boyutlarına göre ayarlamamız gerekli. Tabiki her zaman ki gibi imdatımıza microsoft yetişmiş diyebilirim :)

Küçük bir kod aracılıyla dinamik olarak asp.net mvc ile yazlımış olan projemizde master page veya yeni adıyla asp.net mvc ile dinamik olarak layout değiştirmesi yapabiliriz.

Kullanışlı olacağını düşündüğüm bir örnek ile bu konuyu açıklamaya çalışacağım. Bilindiği üzere bazı mobil cihazlar halan flash ve jquery desteği bulunmamaktadır. Geneli için çoğu web sitelerin tasarımında, web tasarımı daha görsel yapabilmek için çoğu web tasarımcı arkadaşımız sitenin belirli yerlerinde flash slide show ve benzeri görsel nesneler kullanmaktadır. Fakat bu siteleri mobil cihazlarda açmak istediğimizde, sitenin tasarımının bozulduğunu görmekteyiz. Yapmak istediğim konuyu ne kadarda açıklamaya çalışsamda bira zor olcak o yüzden, yapmak istediklerimi şekil-1 ve şekil-2 daha kolay anlıyacağınızı umuyorum

Şekil-1

Şekil-1 de görüldüğü üzere web sitemizin tasarımında içerik ( Mor Renkli alan) kısmının içerisinde gri alanda bir flash eklemek istiyoruz fakat bu flash nesnesini mobil cihazlarda gözükmesini istemiyoruz.

Şekil-2

Şekil-2 görüldüğü üzere gri olan ( flash banner alanı ) alanımız mobil cihazda gözükmemektedir. Bunu yapabilmek bu projemizde iki adet asp.net mvc layout tanımladık fakat başka yoldanda çözüm şansımız var fakat bu yazımda dinamik olarak asp.net mvc layout değişimini göstermek istiyorum.

Request.Browser.IsMobileDevice Kodu aracılıyla dinamik olarak asp.net mvc layout seçimi yapmamız daha kolay olacak

_ViewStart.cshtml kod sayfasının içerisine inline karar kısmı konularak kolayca hangi asp.net mvc layout sayfasını, hangi platformda çalışacağının kararını verdirebiliriz.

@{
Layout = Request.Browser.IsMobileDevice ? "~/Views/Shared/_LayoutMobile.cshtml"
: "~/Views/Shared/_Layout.cshtml";
}

Şekil-3

Şekil-3 de gösterildiği üzere dinamik olarak asp.net mvc masterpage veya diğer adıyla asp.net mvc dinamik layout seçimi yapıldı. Aşağıdan kod indir kısmında çalışır proje kodunu indirebilirsiniz.

Makalemizle ilgili soru ve önerileriniz için yorum yazmayı unutmayınız.
iyi çalışmalar dileriz.

Kod indir : DersMasterPage