Çoklu Görünüm (Multiview) ve Görünüm (View) Kontrolleri

Eyl 06, 2013

Multiview kontrolü, birbiri ile ilişkili birden çok sayfa ile gerçekleştirilmeye çalışılan işi, oluşturulan tek bir WebForm üzerinden aynı işlevsellikle yapılmasını sağlayan veASP.NET 2.0 sürümü ile birlikte ortaya çıkmış olan kontroldür. Bu kontrolün tek başına kullanımı mevcut değildir ve kullanımı için View kontrolüne ihtiyaç duyulur. Multiview içerisinde gösterilecek olan tasarımlar, View kontrolleri içerisine gömülerek görüntülenir. View kontrolü; "Button", "Label", "Textbox" gibi yavru(child) kontrollerin yerleştirildiği taşıyıcı bir hazne olarak nitelendirilebilir. Örneğin; Querystring ile alınan kullanıcı tarafına ait bilgiye göre bazı kontrollerin görünürlüğünün yönetilmesi istenebilir. Böyle bir durumda View kontrolleri, ilgili kontroller bazında düzenlenir ve görünüm durumları ayarlanarak sadece istenen kontrollerin sayfada görünmesi sağlanmış olur. Her View, kod ile aktif hale getirildiği zaman Web sayfasının ilgili bölümü dinamik olarak değişir. 

Visual Studio 2008’de “Toolbox” aracının altında Multiview ve View kontrollerinin bulunduğu yer aşağıdaki gibidir.



Kullanıcı tarafında aynı anda bir Multiview penceresi içerisinde sadece bir tane View görüntülenmesine izin verilmektedir. Kullanıcı tarafında görüntülenmeyen View kontrolleri Web tarayıcısına yüklenmediği için herhangi bir performans kaybına sebep olmazlar. 

Multiview ve View kontrolleri HTML kodu olarak oluşturulurken sahip oldukları elementlerin tümünü HTML olarak yaratmazlar. Çünkü bu elementler aslında sunucu tabanlı kontroller olup yavru kontrollerin görünüp görünmeme durumunu (visibility) yönetirler. HTML tarafında Multiview elementi <asp:MultiView> şeklinde, View  elementi <asp:View> şeklinde görünmektedir. Bu elementler “Control“ sınıfından türetilirler.

Multiview ve View kontrollerinin hiyerarşisi aşağıdaki UML diyagramı ile gösterilmektedir.



MultiView kontrolünün bir defada yalnızca bir View görüntüleyebilme durumu “ActiveViewIndex” özelliği (property) veya “SetActiveView” methodu aracılığı ile yönetilir. ActiveViewIndex “-1” değerine eşitlenirse hiçbir View görüntülenmez. SetActiveView methoduna parametre olarak geçersiz bir View değeri atanırsa veya boş (null) olarak bırakılırsa HttpException hatası ile karşılaşılır.

Multiview kontrolü içerisinde View kontrolleri arasında geçiş yapabilmek için Navigation Düğmeleri (Button) bulunmaktadır. Navigation düğmeleri yaratmak için birButton kontrolü (Button, LinkButton veya ImageButton) istenen bir View kontrolü altına sürüklenir. Eklenen Button kontrolünün CommandName veCommandArgument özelliklerine, seçilecek View kontrolüne ait değerler atanır. Böylece bir View kontrolünden bir diğerine geçiş sağlanmış olur. Aşağıdaki tabloda belirlenen "CommandName" değerlerine karşılık gelen "CommandArgument" değerleri listelenmektedir.

 CommandName değeri                 CommandArgument değeri                                
 NextView (Değer yok)
 PrevView (Değer yok)
 SwitchViewByID Seçilen View kontrolünün ID bilgisi
 SwitchViewByIndex Seçilen View kontrolünün dizin (index) numarası

Multiview kontrolü, taşınabilir (mobile) alanda da kullanılabilir. Bu kontrol, ASP.NET 1.1'de bulunan MobileForm ile aynı işlevselliğe sahiptir. Örneğin; telefon modeline göre ekran boyutları ve desteklenen özellikler değişkenlik göstermektedir. Bu değişkenlik, Multiview içerisinde değişik View kontrolleri tanımlanarak ve telefon modeline göre View kontrollerinin görünümleri yönetilerek yapılır.

Örnek olarak aylık, haftalık ve günlük etkinlik takvimi uygulaması geliştirilebilir. Öncelikle WebForm sayfasına bir Menu kontrolü yerleştirilir ve içerisine yerleştirilen ilkMenuItem kontrolünün değerine “0” atanır. Eklenen her MenuItem kontrolünde bu değer bir artırılarak atama yapılır.


*.aspx sayfasına "Menu" kontrolünün yerleştirilmesi:

<div class="tab"> 
        <asp:Menu ID="menuTab" runat="server" Orientation="Horizontal" OnMenuItemClick="menuTab_MenuItemClick"> 
            <Items> 
                <asp:MenuItem Text="Aylık Etkinlik Takvimi" Value="0"></asp:MenuItem> 
                <asp:MenuItem Text="Haftalık Etkinlik Takvimi" Value="1"></asp:MenuItem> 
                <asp:MenuItem Text="Günlük Etkinlik Takvimi" Value="2"></asp:MenuItem> 
            </Items> 
            <StaticMenuItemStyle BackColor="#cccccc" ForeColor="#333333" /> 
            <StaticSelectedStyle BackColor="#999999" ForeColor="White" /> 
        </asp:Menu> 
        <div style="border-top: 3px solid #999; margin-top: -2px;"> 
        </div> 
</div>


*.aspx sayfasına Multiview kontrolü ile View kontrollerinin yerleştirilmesi: 


<div class="multiview"> 
        <asp:MultiView ID="mvTab" runat="server" ActiveViewIndex="0"> 
            <asp:View ID="vAylikTakvim" runat="server"> 
            <br /> 
            Birinci View kontrolü ile oluşturulan "Tab" öğesi tıklandığında "Aylık Etkinlik Takvimi" içeriğine ulaşılabilir.
           </asp:View> 
            <asp:View ID="vHaftalikTakvim" runat="server"> 
            <br /> 
            İkinci View kontrolü ile oluşturulan "Tab" öğesi tıklandığında "Haftalık Etkinlik Takvimi" içeriğine ulaşılabilir. 
            </asp:View> 
            <asp:View ID="vGunlukTakvim" runat="server"> 
            <br /> 
            Üçüncü View kontrolü ile oluşturulan "Tab" öğesi tıklandığında "Günlük Etkinlik Takvimi" içeriğine ulaşılabilir. 
           </asp:View> 
            </asp:MultiView> 
<br /> 
</div>


WebForm uygulamasının arka planda çalışan *.cs sayfasında Multiview kontrolünün ActiveViewIndex değerine, MenuItem kontrollerinde bulunan ve dinamik olarak seçtirilen değerlerin atanması aşağıdaki gibidir.

 protected void menuTab_MenuItemClick(object sender, MenuEventArgs e)
{
mvTab.ActiveViewIndex = Convert.ToInt32(e.Item.Value);
    }

 

Web tarayıcısi üzerinde sayfa görüntülendiğinde üzerine tıklanan “Tab” kontrolünün içeriği sayfada görüntülenir. Burada bir seferde yalnızca bir View görüntülenebildiğine dikkat edilmelidir.