DetailsView Denetiminde TemplateField Kullanma (C#)

Makale
07/13/2023

GridView ile kullanılabilen aynı TemplateFields özellikleri DetailsView denetimiyle de kullanılabilir. Bu öğreticide, TemplateFields içeren bir DetailsView kullanarak bir kerede bir ürün görüntüleyeceğiz.

Giriş

TemplateField verileri işlemede BoundField, CheckBoxField, HyperLinkField ve diğer veri alanı denetimlerinden daha yüksek esneklik sunar. Önceki öğreticide, GridView'da TemplateField kullanarak şunları yaptık:

Bir sütunda birden çok veri alanı değeri görüntüleme. Özellikle, hem ve FirstNameLastName alanları tek bir GridView sütununda birleştirildi.
Veri alanı değerini ifade etmek için alternatif bir Web denetimi kullanın. Takvim denetimi kullanarak değerin nasıl göstereceğini HiredDate gördük.
Temel alınan verileri temel alan durum bilgilerini gösterin. Tabloda bir çalışanın Employees işte olduğu gün sayısını döndüren bir sütun olmasa da, önceki öğreticide TemplateField ve biçimlendirme yöntemi kullanılarak GridView örneğinde bu tür bilgileri görüntüleyebildik.

GridView ile kullanılabilen aynı TemplateFields özellikleri DetailsView denetimiyle de kullanılabilir. Bu öğreticide, iki TemplateField içeren bir DetailsView kullanarak bir kerede bir ürün görüntüleyeceğiz. İlk TemplateField, , UnitsInStockve UnitsOnOrder veri alanlarını tek bir DetailsView satırında birleştirirUnitPrice. İkinci TemplateField alanın değerini Discontinued görüntüler, ancak ise "EVET" ve aksi takdirde Discontinuedtrue"HAYIR" değerini görüntülemek için bir biçimlendirme yöntemi kullanır.

Şekil 1: Ekranı Özelleştirmek için İki TemplateField Kullanıldı (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Haydi başlayalım!

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

Önceki öğreticide açıklandığı gibi, TemplateFields ile çalışırken yalnızca BoundFields içeren DetailsView denetimini oluşturup yeni TemplateField'ler ekleyerek veya mevcut BoundField'leri gerektiği gibi TemplateFields'e dönüştürerek başlamak genellikle en kolayıdır. Bu nedenle, sayfaya Tasarım Aracı aracılığıyla bir DetailsView ekleyerek ve bunu ürün listesini döndüren bir ObjectDataSource'a bağlayarak bu öğreticiyi başlatın. Bu adımlar, ürünün Boole olmayan değer alanlarının her biri için BoundFields ile bir DetailsView ve bir Boole değeri alanı için bir CheckBoxField (Sonlandırıldı) oluşturur.

Sayfayı DetailsViewTemplateField.aspx açın ve Araç Kutusu'ndan bir DetailsView öğesini Tasarım Aracı sürükleyin. DetailsView'un akıllı etiketinden, sınıfın GetProducts() yöntemini çağıran ProductsBLL yeni bir ObjectDataSource denetimi eklemeyi seçin.

Şekil 2: Yöntemi Çağıran GetProducts() Yeni Bir ObjectDataSource Denetimi Ekleme (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Bu rapor için , SupplierID, CategoryIDve ReorderLevel BoundFields değerlerini kaldırınProductID. Ardından, ve SupplierName BoundField'lerin BoundField'in CategoryName hemen ardından görünmesi için BoundFields'i ProductName yeniden sırala. BoundFields'in HeaderText özelliklerini ve biçimlendirme özelliklerini uygun gördüğünüz şekilde ayarlayabilirsiniz. GridView'da olduğu gibi, bu BoundField düzeyindeki düzenlemeler Alanlar iletişim kutusu aracılığıyla (DetailsView'un akıllı etiketindeki Alanları Düzenle bağlantısına tıklayarak erişilebilir) veya bildirim temelli söz dizimi aracılığıyla gerçekleştirilebilir. Son olarak, DetailsView denetiminin görüntülenen verilere göre genişletilmesine izin vermek için DetailsView'ın Height ve Width özellik değerlerini temizleyin ve akıllı etikette Sayfalandırmayı Etkinleştir onay kutusunu işaretleyin.

Bu değişiklikleri yaptıktan sonra DetailsView denetiminizin bildirim temelli işaretlemesi aşağıdakine benzer olmalıdır:

<asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateRows="False"
    DataKeyNames="ProductID" DataSourceID="ObjectDataSource1" AllowPaging="True"
    EnableViewState="False">
    <Fields>
        <asp:BoundField DataField="ProductName" HeaderText="Product"
          SortExpression="ProductName" />
        <asp:BoundField DataField="CategoryName" HeaderText="Category"
          ReadOnly="True" SortExpression="CategoryName" />
        <asp:BoundField DataField="SupplierName" HeaderText="Supplier"
          ReadOnly="True" SortExpression="SupplierName" />
        <asp:BoundField DataField="QuantityPerUnit"
          HeaderText="Qty/Unit" SortExpression="QuantityPerUnit" />
        <asp:BoundField DataField="UnitPrice" HeaderText="Price"
          SortExpression="UnitPrice" />
        <asp:BoundField DataField="UnitsInStock"
          HeaderText="Units In Stock" SortExpression="UnitsInStock" />
        <asp:BoundField DataField="UnitsOnOrder"
          HeaderText="Units On Order" SortExpression="UnitsOnOrder" />
        <asp:CheckBoxField DataField="Discontinued"
          HeaderText="Discontinued" SortExpression="Discontinued" />
    </Fields>
</asp:DetailsView>

Sayfayı bir tarayıcı üzerinden görüntülemek için biraz zaman ayırın. Bu noktada, ürünün adını, kategorisini, tedarikçisini, fiyatını, stoktaki birimleri, siparişteki birimleri ve durdurulan durumunu gösteren satırları içeren tek bir ürün (Chai) görmeniz gerekir.

Şekil 3: Ürünün Ayrıntıları SınırAlanları Serisi Kullanılarak Gösteriliyor (Tam boyutlu görüntüyü görüntülemek için tıklayın)

2. Adım: Fiyatı, Stoktaki Birimleri ve SiparişTeki Birimleri Tek Satırda Birleştirme

DetailsView'da , UnitsInStockve UnitsOnOrder alanları için UnitPricebir satır vardır. Yeni bir TemplateField ekleyerek veya varolan UnitPrice, UnitsInStockve UnitsOnOrder BoundField'lerden birini TemplateField'e dönüştürerek bu veri alanlarını TemplateField ile tek bir satırda birleştirebiliriz. Şahsen var olan BoundField'leri dönüştürmeyi tercih etsem de, yeni bir TemplateField ekleyerek alıştırma yapalım.

Alanlar iletişim kutusunu açmak için DetailsView'un akıllı etiketindeki Alanları Düzenle bağlantısına tıklayarak başlayın. Ardından, yeni bir TemplateField ekleyin ve özelliğini "Price and Inventory" olarak ayarlayın HeaderText ve yeni TemplateField'i BoundField'in üzerine UnitPrice yerleştirecek şekilde taşıyın.

Şekil 4: DetailsView Denetimine Yeni TemplateField Ekleme (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Bu yeni TemplateField şu anda , UnitsInStockve UnitsOnOrder BoundField'lerde UnitPricegörüntülenen değerleri içerecek olduğundan, bunları kaldıralım.

Bu adımın son görevi Price ve Inventory TemplateField için işaretlemeyi tanımlamaktırItemTemplate. Bu işaretleme, Tasarım Aracı DetailsView şablonu düzenleme arabirimi aracılığıyla veya denetimin bildirim temelli söz dizimi aracılığıyla gerçekleştirilebilir. GridView'da olduğu gibi DetailsView şablonu düzenleme arabirimine akıllı etiketteki Şablonları Düzenle bağlantısına tıklayarak erişebilirsiniz. Buradan, açılan listeden düzenlemek üzere şablonu seçebilir ve ardından Araç Kutusu'ndan herhangi bir Web denetimi ekleyebilirsiniz.

Bu öğretici için, Price ve Inventory TemplateField'in ItemTemplateöğesine bir Etiket denetimi ekleyerek başlayın. Ardından, Etiket Web denetiminin akıllı etiketinden Veri Bağlamalarını Düzenle bağlantısına tıklayın ve özelliği UnitPrice alana bağlayınText.

Şekil 5: Etiketin Text Özelliğini UnitPrice Veri Alanına Bağlama (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Fiyatı Para Birimi Olarak Biçimlendirme

Bu eklemeyle, Etiket Web denetimi Price ve Inventory TemplateField artık yalnızca seçili ürünün fiyatını görüntüler. Şekil 6'da, tarayıcı üzerinden görüntülendiğinde ilerleme durumumuzun ekran görüntüsü gösterilmektedir.

Şekil 6: Fiyat ve Stok ŞablonuAlan, Fiyatı Gösterir (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Ürünün fiyatının para birimi olarak biçimlendirilmediğini unutmayın. BoundField ile, özelliğini ve DataFormatString{0:formatSpecifier}özelliğini false olarak ayarlayarak HtmlEncode biçimlendirme yapılabilir. Ancak templateField için, tüm biçimlendirme yönergelerinin veri bağlama söz diziminde veya uygulamanın kodunda (örneğin, ASP.NET sayfasının arka kod arkası sınıfında) tanımlanmış bir biçimlendirme yöntemi kullanılarak belirtilmesi gerekir.

Etiket Web denetiminde kullanılan veri bağlama söz diziminin biçimlendirmesini belirtmek için, Etiketin akıllı etiketindeki Veri Bağlamalarını Düzenle bağlantısına tıklayarak DataBindings iletişim kutusuna dönün. Biçimlendirme yönergelerini doğrudan Biçim açılan listesine yazabilir veya tanımlı biçim dizelerinden birini seçebilirsiniz. BoundField'in DataFormatString özelliğinde olduğu gibi, biçimlendirme kullanılarak {0:formatSpecifier}belirtilir.

UnitPrice Alan için, uygun açılan liste değerini seçerek veya el ile yazarak {0:C} belirtilen para birimi biçimlendirmesini kullanın.

Şekil 7: Fiyatı Para Birimi olarak biçimlendirme (Tam boyutlu resmi görüntülemek için tıklayın)

Bildirim temelli olarak, biçimlendirme belirtimi veya Eval yöntemlerine Bind ikinci bir parametre olarak gösterilir. Tasarım Aracı üzerinden yapılan ayarlar bildirim temelli işaretlemede aşağıdaki veri bağlama ifadesine neden olur:

<asp:Label ID="Label1" runat="server" Text='<%# Eval("UnitPrice", "{0:C}") %>'/>

Kalan Veri Alanlarını TemplateField'e Ekleme

Bu noktada, Price ve Inventory TemplateField içinde veri alanını görüntüledik ve biçimlendirdikUnitPrice, ancak yine de ve UnitsOnOrder alanlarını görüntülememiz UnitsInStock gerekiyor. Şimdi bunları fiyatın altında ve parantez içinde bir satırda görüntüleyelim. Tasarım Aracı şablon düzenleme arabiriminden, imlecinizi şablonun içine yerleştirerek ve görüntülenecek metni yazarak bu tür işaretlemeler eklenebilir. Alternatif olarak, bu işaretleme doğrudan bildirim temelli söz dizimine girilebilir.

Price ve Inventory TemplateField değerinin fiyat ve stok bilgilerini görüntülemesi için statik işaretlemeyi, Etiket Web denetimlerini ve veri bağlama söz dizimini ekleyin:

UnitPrice
(Stokta / SiparişTe:UnitsInStock / UnitsOnOrder)

Bu görevi gerçekleştirdikten sonra DetailsView'unuzun bildirim temelli işaretlemesi aşağıdakine benzer görünmelidir:

<asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateRows="False"
    DataKeyNames="ProductID" DataSourceID="ObjectDataSource1" AllowPaging="True"
    EnableViewState="False">
    <Fields>
        <asp:BoundField DataField="ProductName"
          HeaderText="Product" SortExpression="ProductName" />
        <asp:BoundField DataField="CategoryName" HeaderText="Category"
          ReadOnly="True" SortExpression="CategoryName" />
        <asp:BoundField DataField="SupplierName"
          HeaderText="Supplier" ReadOnly="True"
          SortExpression="SupplierName" />
        <asp:BoundField DataField="QuantityPerUnit"
          HeaderText="Qty/Unit" SortExpression="QuantityPerUnit" />
        <asp:TemplateField HeaderText="Price and Inventory">
            <ItemTemplate>
                <asp:Label ID="Label1" runat="server"
                  Text='<%# Eval("UnitPrice", "{0:C}") %>'></asp:Label>
                <br />
                <strong>
                (In Stock / On Order: </strong>
                <asp:Label ID="Label2" runat="server"
                  Text='<%# Eval("UnitsInStock") %>'></asp:Label>
                <strong>/</strong>
                <asp:Label ID="Label3" runat="server"
                  Text='<%# Eval("UnitsOnOrder") %>'>
                </asp:Label><strong>)</strong>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:CheckBoxField DataField="Discontinued"
           HeaderText="Discontinued" SortExpression="Discontinued" />
    </Fields>
</asp:DetailsView>

Bu değişikliklerle fiyat ve envanter bilgilerini tek bir DetailsView satırında birleştirdik.

Şekil 8: Fiyat ve Stok Bilgileri Tek Satırda Görüntülenir (Tam boyutlu görüntüyü görüntülemek için tıklayın)

3. Adım: Sonlandırılan Alan Bilgilerini Özelleştirme

Tablonun ProductsDiscontinued sütunu, ürünün kullanımdan kaldırılıp kaldırılmadığını gösteren bir bit değeridir. DetailsView (veya GridView) veri kaynağı denetimine bağlanırken, gibi DiscontinuedBoole değer alanları CheckBoxFields olarak uygulanırken, , ProductNameve gibi ProductIDBoole olmayan değer alanları BoundFields olarak uygulanır. CheckBoxField, veri alanının değeri True ise ve aksi halde işaretlenmemişse denetlenen devre dışı bir onay kutusu olarak işlenir.

CheckBoxField'i görüntülemek yerine ürünün sonlandırılıp sonlandırılmadığını belirten bir metin görüntülemek isteyebiliriz. Bunu yapmak için CheckBoxField'i DetailsView'dan kaldırabilir ve ardından özelliği olarak Discontinuedayarlanmış bir BoundField DataField ekleyebiliriz. Bunu yapmak için biraz bekleyin. Bu değişiklik sonrasında DetailsView, devam eden ürünler için "True" ve hala etkin olan ürünler için "False" metnini gösterir.

Şekil 9: Sona Erdirilen Durumu Görüntülemek için Doğru ve Yanlış Dizeleri Kullanılır (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Bunun yerine "True" veya "False" dizelerinin değil, "EVET" ve "HAYIR" dizelerinin kullanılmasını istediğimizi düşünün. Bu tür özelleştirmeler TemplateField ve biçimlendirme yöntemi yardımıyla gerçekleştirilebilir. Biçimlendirme yöntemi herhangi bir sayıda giriş parametresi alabilir, ancak şablona eklemek için HTML'yi (dize olarak) döndürmesi gerekir.

Sayfanın giriş parametresi olarak Boole değerini kabul eden ve dize döndüren adlı DisplayDiscontinuedAsYESorNO arka kod sınıfına bir biçimlendirme yöntemi DetailsViewTemplateField.aspx ekleyin. Önceki öğreticide açıklandığı gibi, şablondan erişilebilir olması için bu yöntemin olarak veya public olarak protected işaretlenmesi gerekir.

protected string DisplayDiscontinuedAsYESorNO(bool discontinued)
{
    if (discontinued)
        return "YES";
    else
        return "NO";
}

Bu yöntem giriş parametresini (discontinued) denetler ve aksi takdirde " HAYIR" ise true"EVET" döndürür.

Not

Önceki öğreticide incelenen biçimlendirme yönteminde, öğesini içerebilen NULL bir veri alanına geçtiğimizi ve bu nedenle çalışanın özelliğine erişmeden EmployeesRowHiredDate önce çalışanın HiredDate özellik değerinin veritabanı NULL değerine sahip olup olmadığını denetlememiz gerektiğini hatırlayın. Sütunda hiçbir zaman veritabanı NULL değerleri atanamayacağından Discontinued burada böyle bir denetime gerek yoktur. Ayrıca, bu nedenle yöntemi bir örneği veya türünde objectbir parametreyi kabul etmek zorunda kalmak yerine boole ProductsRow giriş parametresini kabul edebilir.

Bu biçimlendirme yöntemi tamamlandıktan sonra kalan tek şey TemplateField'ın ItemTemplateiçinden çağırmaktır. TemplateField oluşturmak için BoundField'i Discontinued kaldırın ve yeni bir TemplateField ekleyin veya BoundField'i Discontinued TemplateField'e dönüştürün. Ardından, bildirim temelli işaretleme görünümünde TemplateField'ı düzenleyerek yalnızca yöntemini çağıran bir ItemTemplate içermesini DisplayDiscontinuedAsYESorNO sağlayın ve geçerli ProductRow örneğin Discontinued özelliğinin değerini geçirin. Buna yöntemiyle Eval erişilebilir. Özellikle TemplateField'in işaretlemesi şöyle görünmelidir:

<asp:TemplateField HeaderText="Discontinued" SortExpression="Discontinued">
    <ItemTemplate>
        <%# DisplayDiscontinuedAsYESorNO((bool)
          Eval("Discontinued")) %>
    </ItemTemplate>
</asp:TemplateField>

Bu, örneğin Discontinued değerini geçirerek DetailsView işlenirken yönteminin ProductRow çağrılmasına neden olurDisplayDiscontinuedAsYESorNO. Eval yöntemi türünde objectbir değer döndürdüğünden ancak DisplayDiscontinuedAsYESorNO yöntemi türünde bir giriş parametresi boolbeklediğinden, yöntem dönüş değerini olarak boolatarızEval. Yöntem DisplayDiscontinuedAsYESorNO daha sonra aldığı değere bağlı olarak "EVET" veya "HAYIR" döndürür. Döndürülen değer, bu DetailsView satırında görüntülenen değerdir (bkz. Şekil 10).

Şekil 10: EVET veya HAYIR Değerleri Artık Devam Eden Satırda Gösteriliyor (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Özet

DetailsView denetimindeki TemplateField, verileri görüntülemede diğer alan denetimleriyle sağlanandan daha yüksek esneklik sağlar ve aşağıdaki durumlar için idealdir:

Bir GridView sütununda birden çok veri alanının görüntülenmesi gerekir
Veriler en iyi düz metin yerine Web denetimi kullanılarak ifade edilir
Çıktı, meta verileri görüntüleme veya verileri yeniden biçimlendirme gibi temel alınan verilere bağlıdır

TemplateFields, DetailsView'un temel alınan verilerinin işlenmesinde daha fazla esneklik sağlarken, her alan bir HTML <table>içinde satır olarak işlendiğinden DetailsView çıktısı yine de biraz karmaşıktır.

FormView denetimi, işlenen çıkışı yapılandırma konusunda daha fazla esneklik sunar. FormView alanları içermez, yalnızca bir dizi şablon (ItemTemplate, EditItemTemplate, HeaderTemplatevb.) içerir. Bir sonraki öğreticimizde işlenmiş düzende daha da fazla denetim elde etmek için FormView'un nasıl kullanılacağını göreceğ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 Dan Jagers oldu. Yaklaşan MSDN makalelerimi gözden geçirmek istiyor musunuz? Öyleyse, bana adresinden bir satır mitchell@4GuysFromRolla.combırakın.

Önceki Sonraki