FormView Şablonlarını Kullanma (VB)

2025-04-30

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 kutucuk, kılavuz benzeri bir görünüme sahiptir. Grid benzeri bir düzen birçok senaryo için idealdir, ancak bazen daha esnek, daha az katı bir tasarıma ihtiyaç duyulur. 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'un DataSource kaydı olmadığında, denetimin işaretlemesini işlemek için EmptyDataTemplate yerine ItemTemplate kullanılır
PagerTemplate sayfalama etkinleştirilmiş FormView'lar için sayfalama arabirimini özelleştirmek amacıyla kullanılabilir
EditItemTemplate / InsertItemTemplate bu tür işlevleri destekleyen FormView'lar 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ünümünü sunmak için FormView denetimini kullanmayı inceleyeceğiz. FormView'lar ItemTemplate ad, kategori, sağlayıcı vb. için alanlara sahip olmak yerine bu değerleri bir üst bilgi öğesi ile <table> bir birleşimini kullanarak 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 Tasarımcı'ya bir FormView sürükleyin. FormView'ı ilk kez eklediğimizde gri bir kutu olarak görünür ve bu da ItemTemplate'nin gerekli olduğunu bize bildirir.

Şekil 2: FormView, Sağlanana Kadar ItemTemplate Tasarımcıda İş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ımcı 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 ve özelliği alanın değerine bağlı olan Text bir Etiket denetimi 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 ProductsBLL yöntemini çağıran GetProducts() yeni bir ObjectDataSource denetimi ekleyin. Bu, ItemTemplate, InsertItemTemplate ve EditItemTemplate ile bir FormView oluşturur. Kaynak görünümünde, düzenleme veya eklemeyi destekleyen bir FormView oluşturmakla henüz ilgilenmediğimiz için InsertItemTemplate ve EditItemTemplate öğelerini 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'ı Araç Kutusu'ndan Tasarımcı'ya sürükleyerek ekleyebilir ve yapılandırabilirsiniz. Ancak, FormView'un veri kaynağını Tasarımcı'dan 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, ItemTemplate öğesini manuel olarak ekleyin.

Hangi yaklaşımı benimsediğinize bakılmaksızı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 Sayfalandırmayı Etkinleştir onay kutusunu işaretlemek için bir an duraklayın; bu, FormView'un bildirimsel söz dizimine AllowPaging="True" özniteliği ekler. Ayrıca özelliğini False olarak ayarlayın EnableViewState .

2. Adım: Markasyonu`ItemTemplate` Tanımlama

FormView, ObjectDataSource denetimine bağlı ve sayfalamayı destekleyecek şekilde yapılandırıldığında, ItemTemplate içeriğini belirtmeye hazırız. Bu öğreticide, ürünün adının bir <h3> başlıkta görüntülenmesini sağlayın. Bundan sonra, kalan ürün özelliklerini birinci 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ımcı'daki 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 kullandığınız tekniği kullanmaktan çekinmeyin.

Aşağıdaki işaretleme, ItemTemplate yapısı tamamlandıktan sonra FormView'ın bildirim temelli işaretlemesini gö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 eklenebildiğine dikkat edin. Başka bir ifadeyle, bir Etiket denetiminin Text özelliğine atanması gerekmez. Örneğin, ProductName kullanılarak bir <h3> öğesinde görüntülenen <h3><%# Eval("ProductName") %></h3> değeri, ürün Chai için <h3>Chai</h3> olarak işlenecektir.

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ı Styles.css içinde tanımlanır ve özellik adlarının kalın ve sağa hizalı olmasına, ayrıca özellik değerlerine sağ dolgu eklenmesine neden olur.

FormView ile kullanılabilir CheckBoxField olmadığından, Discontinued değerini onay kutusu olarak göstermek 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 öğreticide 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 zamanlar için FormView ideal bir seçimdir. DetailsView gibi, FormView kendi içinden DataSourcetek bir kayıt işler, ancak DetailsView'dan farklı olarak yalnızca şablonlardan oluşur ve alanları desteklemez.

Bu öğreticide gördüğümüz gibi, FormView tek bir kayıt 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ışır. Son kitabı Sams Teach Yourself ASP.NET 24 Hours 2.0'dır. Ona adresinden mitchell@4GuysFromRolla.comulaşabilirsiniz.

Özel Teşekkürler

Bu eğitim serisi, birçok yararlı kişi tarafından incelendi. Bu öğreticinin baş gözden geçireni E.R. Gilmore oldu. Yaklaşan MSDN makalelerimi gözden geçirmek istiyor musunuz? Öyleyse, mitchell@4GuysFromRolla.com'a bir mesaj bırakın.

Önceki Sonraki

Aracılığıyla paylaş