FormView Şablonlarını Kullanma (VB)

tarafından Scott Mitchell

PDF’yi İndir

DetailsView'un aksine, FormView alanlardan oluşmaz. Bunun yerine, FormView şablonlar kullanılarak işlenir. Bu öğreticide, verilerin daha az katı bir görüntüsünü sunmak için FormView denetimini kullanmayı inceleyeceğiz.

Giriş

Son iki öğreticide TemplateFields kullanarak GridView ve DetailsView denetimlerinin çıkışlarını özelleştirmeyi gördük. TemplateFields, belirli bir alanın içeriğinin yüksek oranda özelleştirilmesine olanak sağlar, ancak sonunda hem GridView hem de DetailsView oldukça kutucuklu, kılavuz benzeri bir görünüme sahiptir. Kılavuz benzeri bir düzenin ideal olduğu birçok senaryo için idealdir, ancak bazen daha akıcı, daha az sert bir ekran gerekir. Tek bir kayıt görüntülenirken, FormView denetimi kullanılarak böyle bir akıcı düzen mümkündür.

DetailsView'un aksine, FormView alanlardan oluşmaz. FormView'a BoundField veya TemplateField ekleyemezsiniz. Bunun yerine, FormView şablonlar kullanılarak işlenir. FormView'ı tek bir TemplateField içeren detailsView denetimi olarak düşünün. FormView aşağıdaki şablonları destekler:

• ItemTemplate FormView'da görüntülenen belirli bir kaydı işlemek için kullanılır
• HeaderTemplate isteğe bağlı üst bilgi satırı belirtmek için kullanılır
• FooterTemplate isteğe bağlı alt bilgi satırı belirtmek için kullanılır
• EmptyDataTemplate FormView'larda DataSource herhangi bir kayıt olmadığında, EmptyDataTemplate denetimin işaretlemesini ItemTemplate işlemek için yerine kullanılır
• PagerTemplate disk belleği etkinleştirilmiş FormViews için disk belleği arabirimini özelleştirmek için kullanılabilir
• EditItemTemplate / InsertItemTemplate bu tür işlevleri destekleyen FormViews için düzenleme arabirimini veya ekleme arabirimini özelleştirmek için kullanılır

Bu öğreticide, ürünlerin daha az katı bir görüntüsünü sunmak için FormView denetimini kullanmayı inceleyeceğiz. FormView'lar ItemTemplate ad, kategori, sağlayıcı vb. için alanlara sahip olmak yerine, üst bilgi öğesi ve <table> bir birleşimini kullanarak bu değerleri gösterir (bkz. Şekil 1).

Şekil 1: FormView, DetailsView'da Görülen Grid-Like Düzeninin Dışına Çıkıyor (Tam boyutlu görüntüyü görüntülemek için tıklayın)

1. Adım: Verileri FormView'a Bağlama

Sayfayı FormView.aspx açın ve Araç Kutusu'ndan bir FormView'ı Tasarım Aracı sürükleyin. FormView'u ilk kez eklerken gri bir kutu olarak görünür ve bunun gerekli olduğunu ItemTemplate bize bildirin.

Şekil 2: FormView, Sağlanana Kadar ItemTemplate Tasarım Aracı İşlenemez (Tam boyutlu görüntüyü görüntülemek için tıklayın)

ItemTemplate el ile oluşturulabilir (bildirim temelli söz dizimi aracılığıyla) veya FormView'ı Tasarım Aracı aracılığıyla bir veri kaynağı denetimine bağlayarak otomatik olarak oluşturulabilir. Bu otomatik oluşturulan ItemTemplate , her alanın adını listeleyen HTML'yi ve özelliği alanın değerine bağlı olan Text bir Etiket denetimini içerir. Bu yaklaşım ayrıca, her ikisi de veri kaynağı denetimi tarafından döndürülen veri alanlarının her biri için giriş denetimleriyle doldurulan bir InsertItemTemplate ve EditItemTemplateöğesini de otomatik olarak oluşturur.

Şablonu otomatik olarak oluşturmak istiyorsanız, FormView'un akıllı etiketinden sınıfın GetProducts() yöntemini çağıran ProductsBLL yeni bir ObjectDataSource denetimi ekleyin. Bu, , InsertItemTemplateve EditItemTemplateile bir ItemTemplateFormView oluşturur. Kaynak görünümünde, düzenlemeyi InsertItemTemplate veya eklemeyi destekleyen bir FormView oluşturmakla ilgilenmediğimiz için ve EditItemTemplate öğesini kaldırın. Ardından, üzerinde çalışacağımız temiz bir sayfa olması için içindeki ItemTemplate işaretlemeyi temizleyin.

el ile oluşturmayı ItemTemplate tercih ederseniz, ObjectDataSource'u Araç Kutusu'ndan Tasarım Aracı sürükleyerek ekleyebilir ve yapılandırabilirsiniz. Ancak FormView'un veri kaynağını Tasarım Aracı ayarlamayın. Bunun yerine, Kaynak görünümüne gidin ve FormView özelliğini DataSourceIDID ObjectDataSource değerine el ile ayarlayın. Ardından, öğesini el ile ekleyin ItemTemplate.

Hangi yaklaşımı benimsemeye karar verdiyseniz alın, bu noktada FormView'unuzun bildirim temelli işaretlemesi şöyle görünmelidir:

<asp:FormView ID="FormView1" runat="server" DataSourceID="ObjectDataSource1">
    <ItemTemplate>

    </ItemTemplate>
</asp:FormView>

FormView'un akıllı etiketinde Disk Belleğini Etkinleştir onay kutusunu işaretlemek için biraz zaman ayırın; bu, Özniteliği FormView'un bildirim temelli söz dizimine ekler AllowPaging="True" . Ayrıca özelliğini False olarak ayarlayın EnableViewState .

2. Adım: İşaretlemeyiItemTemplate Tanımlama

FormView ObjectDataSource denetimine bağlı ve disk belleğini destekleyecek şekilde yapılandırıldığında, için ItemTemplateiçeriği belirtmeye hazırız. Bu öğretici için, bir başlıkta <h3> ürünün adını görüntüleyelim. Bundan sonra, kalan ürün özelliklerini ilk ve üçüncü sütunların özellik adlarını, ikinci ve dördüncü sütunların da değerlerini listelediği dört sütunlu bir tabloda görüntülemek için bir HTML <table> kullanalım.

Bu işaretleme, Tasarım Aracı FormView'un şablon düzenleme arabirimi aracılığıyla girilebilir veya bildirim temelli söz dizimi aracılığıyla el ile girilebilir. Şablonlarla çalışırken genellikle bildirim temelli söz dizimi ile doğrudan çalışmayı daha hızlı buluyorum, ancak en rahat ettiğiniz tekniği kullanmaktan çekinmeyin.

Aşağıdaki işaretleme, yapısı tamamlandıktan sonra FormView bildirim temelli işaretlemesini ItemTemplategösterir:

<asp:FormView ID="FormView1" runat="server" DataSourceID="ObjectDataSource1"
    AllowPaging="True" EnableViewState="False">
    <ItemTemplate>
        <hr />
        <h3><%# Eval("ProductName") %></h3>
        <table border="0">
            <tr>
                <td class="ProductPropertyLabel">Category:</td>
                <td class="ProductPropertyValue">
                  <%# Eval("CategoryName") %></td>
                <td class="ProductPropertyLabel">Supplier:</td>
                <td class="ProductPropertyValue">
                  <%# Eval("SupplierName")%></td>
            </tr>
            <tr>
                <td class="ProductPropertyLabel">Price:</td>
                <td class="ProductPropertyValue"><%# Eval("UnitPrice",
                  "{0:C}") %></td>
                <td class="ProductPropertyLabel">Units In Stock:</td>
                <td class="ProductPropertyValue">
                  <%# Eval("UnitsInStock")%></td>
            </tr>
            <tr>
                <td class="ProductPropertyLabel">Units On Order:</td>
                <td class="ProductPropertyValue">
                  <%# Eval("UnitsOnOrder") %></td>
                <td class="ProductPropertyLabel">Reorder Level:</td>
                <td class="ProductPropertyValue">
                  <%# Eval("ReorderLevel")%></td>
            </tr>
            <tr>
                <td class="ProductPropertyLabel">Qty/Unit</td>
                <td class="ProductPropertyValue">
                  <%# Eval("QuantityPerUnit") %></td>
                <td class="ProductPropertyLabel">Discontinued:</td>
                <td class="ProductPropertyValue">
                    <asp:CheckBox runat="server" Enabled="false"
                      Checked='<%# Eval("Discontinued") %>' />
                </td>
            </tr>
        </table>
        <hr />
    </ItemTemplate>
</asp:FormView>

Örneğin, veri bağlama söz diziminin <%# Eval("ProductName") %>doğrudan şablonun çıkışına eklendiğine dikkat edin. Başka bir ifadeyle, bir Etiket denetiminin Text özelliğine atanması gerekmez. Örneğin, ürün Chai'sinin ProductName olarak <h3>Chai</h3>işleneceği öğesini kullanan <h3><%# Eval("ProductName") %></h3>bir <h3> öğesinde görüntülenen değerimiz vardır.

ProductPropertyLabel ve ProductPropertyValue CSS sınıfları, içindeki ürün özellik adlarının ve değerlerinin <table>stilini belirtmek için kullanılır. Bu CSS sınıfları içinde Styles.css tanımlanır ve özellik adlarının kalın ve sağa hizalı olmasına neden olur ve özellik değerlerine doğru doldurma ekler.

FormView ile kullanılabilir CheckBoxField olmadığından, değeri onay kutusu olarak göstermek Discontinued için kendi CheckBox denetimimizi eklemeliyiz. Enabled özelliği False olarak ayarlanır ve salt okunur hale gelir ve CheckBox'ın Checked özelliği veri alanının değerine Discontinued bağlıdır.

Tamamlandıktan ItemTemplate sonra ürün bilgileri çok daha akıcı bir şekilde görüntülenir. Son öğreticideki DetailsView çıkışını (Şekil 3) bu öğreticideki FormView tarafından oluşturulan çıkışla karşılaştırın (Şekil 4).

Şekil 3: Katı DetailsView Çıkışı (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Şekil 4: Fluid FormView Çıkışı (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Özet

GridView ve DetailsView denetimlerinin çıktıları TemplateFields kullanılarak özelleştirilebilir, ancak her ikisi de verilerini kılavuz benzeri, kutu biçiminde sunmaya devam eder. Tek bir kaydın daha az katı bir düzen kullanılarak gösterilmesi gereken durumlarda FormView ideal bir seçimdir. DetailsView gibi FormView da kendi DataSourceiçinden tek bir kayıt oluşturur, ancak DetailsView'dan farklı olarak yalnızca şablonlardan oluşur ve alanları desteklemez.

Bu öğreticide gördüğümüz gibi, FormView tek bir kaydı görüntülerken daha esnek bir düzen sağlar. Sonraki öğreticilerde, FormsView ile aynı düzeyde esneklik sağlayan ancak birden çok kayıt görüntüleyebilen (GridView gibi) DataList ve Repeater denetimlerini inceleyeceğiz.

Mutlu Programlama!

Yazar hakkında

Yedi ASP/ASP.NET kitabının yazarı ve 4GuysFromRolla.com kurucusu Scott Mitchell, 1998'den beri Microsoft Web teknolojileriyle çalışmaktadır. Scott bağımsız bir danışman, eğitmen ve yazar olarak çalışmaktadır. Son kitabı Sams Teach Yourself ASP.NET 24 Hours 2.0'dır. Adresine adresinden veya adresinden ulaşabileceğiniz http://ScottOnWriting.NETblogu aracılığıyla ulaşabilirsinizmitchell@4GuysFromRolla.com.

Özel Teşekkürler

Bu öğretici serisi birçok yararlı gözden geçiren tarafından gözden geçirildi. Bu öğreticinin baş gözden geçireni E.R. Gilmore idi. Yaklaşan MSDN makalelerimi gözden geçirmek istiyor musunuz? Öyleyse, bana adresinden bir satır mitchell@4GuysFromRolla.combırakın.

ÖncekiSonraki