GridView Denetiminde TemplateField Kullanma (VB)

tarafından Scott Mitchell

PDF'i indirin

Esneklik sağlamak için GridView, bir şablon kullanarak işleyen TemplateField'ı sunar. Bir şablon, statik HTML, Web denetimleri ve veri bağlama sözdiziminin bir karışımını içerebilir. Bu öğreticide, GridView denetimiyle daha fazla özelleştirme elde etmek için TemplateField'ın nasıl kullanılacağını inceleyeceğiz.

Giriş

GridView, verilerin nasıl görüntüleneceğinin yanı sıra işlenen çıktıya hangi özelliklerin DataSource dahil edileceğini gösteren bir dizi alandan oluşur. En basit alan türü, bir veri değerini metin olarak görüntüleyen BoundField'dır. Diğer alan türleri, verileri alternatif HTML öğeleri kullanarak görüntüler. Örneğin CheckBoxField, işaretli durumu belirtilen veri alanının değerine bağlı olan bir onay kutusu olarak işlenir; ImageField, görüntü kaynağı belirli bir veri alanını temel alan bir görüntüyü oluşturur. Durumu temel alınan bir veri alanı değerine bağlı olan köprüler ve düğmeler, HyperLinkField ve ButtonField alan türleri kullanılarak oluşturulabilir.

CheckBoxField, ImageField, HyperLinkField ve ButtonField alan türleri verilerin alternatif bir görünümüne izin verse de, biçimlendirme açısından oldukça sınırlıdır. CheckBoxField yalnızca tek bir onay kutusunu görüntüleyebilirken, ImageField yalnızca tek bir görüntü görüntüleyebilir. Belirli bir alanın, tümü farklı veri alanı değerlerine dayalı olarak bir metin, bir onay kutusu ve bir resim görüntülemesi gerekiyorsa ne olur? Ya da verileri CheckBox, Image, HyperLink veya Button dışında bir Web denetimi kullanarak görüntülemek istersek ne olur? Ayrıca, BoundField görüntüsünü tek bir veri alanıyla sınırlar. Tek bir GridView sütununda iki veya daha fazla veri alanı değeri göstermek istersek ne olur?

Bu esneklik düzeyine uyum sağlamak için GridView, bir şablon kullanarak işleyen TemplateField'ı sunar. Bir şablon, statik HTML, Web denetimleri ve veri bağlama sözdiziminin bir karışımını içerebilir. Ayrıca, TemplateField, farklı durumlar için oluşturmayı özelleştirmek için kullanılabilecek çeşitli şablonlara sahiptir. Örneğin, ItemTemplate her satırın hücresini oluşturmak için varsayılan olarak kullanılır, ancak EditItemTemplate şablon, verileri düzenlerken arabirimi özelleştirmek için kullanılabilir.

Bu öğreticide, GridView denetimiyle daha fazla özelleştirme elde etmek için TemplateField'ın nasıl kullanılacağını inceleyeceğiz. Önceki öğreticide, ve DataBound olay işleyicilerini kullanarak temel alınan verilere göre biçimlendirmenin RowDataBound nasıl özelleştirileceğini gördük. Biçimlendirmeyi temel alınan verilere göre özelleştirmenin başka bir yolu da biçimlendirme yöntemlerini bir şablonun içinden çağırmaktır. Bu eğitimde de bu tekniğe bakacağız.

Bu öğretici için, bir çalışan listesinin görünümünü özelleştirmek için TemplateFields'ı kullanacağız. Özellikle, tüm çalışanları listeleyeceğiz, ancak çalışanın adını ve soyadını bir sütunda, işe alınma tarihini bir Takvim denetiminde ve şirkette kaç gündür çalıştıklarını gösteren bir durum sütununda görüntüleyeceğiz.

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

Adım 1: Verileri GridView'a bağlama

Görünümü özelleştirmek için TemplateFields kullanmanız gereken raporlama senaryolarında, önce yalnızca BoundFields içeren bir GridView denetimi oluşturarak başlamanın ve ardından yeni TemplateFields eklemenin veya mevcut BoundFields'ı gerektiği gibi TemplateFields'a dönüştürmenin en kolay olduğunu düşünüyorum. Bu nedenle, Tasarımcı aracılığıyla sayfaya bir GridView ekleyerek ve bunu çalışanların listesini döndüren bir ObjectDataSource'a bağlayarak bu öğreticiye başlayalım. Bu adımlar, çalışan alanlarının her biri için BoundFields ile bir GridView oluşturur.

GridViewTemplateField.aspx Sayfayı açın ve Araç Kutusu'ndan bir GridView'ı Tasarımcı'ya sürükleyin. GridView'ın akıllı etiketinden, sınıfın EmployeesBLL yöntemini çağıran GetEmployees() yeni bir ObjectDataSource denetimi eklemeyi seçin.

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

GridView'ı bu şekilde bağlamak, çalışan özelliklerinin her biri için otomatik olarak bir BoundField ekler: EmployeeID, LastName, FirstNameTitleHireDateReportsTo, ve .Country Bu rapor için , EmployeeID, veya ReportsTo özelliklerini görüntülemekle Countryuğraşmayalım. Bu BoundFields'ı kaldırmak için şunları yapabilirsiniz:

• Alanlar iletişim kutusunu kullanın, bu iletişim kutusunu açmak için GridView'ın akıllı etiketinden Sütunları Düzenle bağlantısını tıklayın. Ardından, sol alttaki listeden BoundFields'ı seçin ve BoundField'ı kaldırmak için kırmızı X düğmesine tıklayın.
• GridView'ın bildirim temelli sözdizimini Kaynak görünümünden el ile düzenleyin, kaldırmak istediğiniz BoundField öğesini silin <asp:BoundField> .

, EmployeeIDve ReportsTo BoundFields'ı Countrykaldırdıktan sonra, GridView'ınızın işaretlemesi şöyle görünmelidir:

<asp:GridView ID="GridView1" runat="server"
    AutoGenerateColumns="False" DataKeyNames="EmployeeID"
    DataSourceID="ObjectDataSource1">
    <Columns>
        <asp:BoundField DataField="LastName" HeaderText="LastName"
          SortExpression="LastName" />
        <asp:BoundField DataField="FirstName" HeaderText="FirstName"
          SortExpression="FirstName" />
        <asp:BoundField DataField="Title" HeaderText="Title"
          SortExpression="Title" />
        <asp:BoundField DataField="HireDate" HeaderText="HireDate"
          SortExpression="HireDate" />
    </Columns>
</asp:GridView>

İlerleme durumumuzu tarayıcıda görüntülemek için biraz zaman ayırın. Bu noktada, her çalışan için bir kayıt ve dört sütun içeren bir tablo görmelisiniz: biri çalışanın soyadı, biri adı, biri unvanı ve biri de işe alma tarihi için.

Şekil 3: LastName, FirstName, Titleve HireDate Alanları Her Çalışan İçin Görüntülenir (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Adım 2: Adı ve Soyadı Tek Bir Sütunda Görüntüleme

Şu anda, her çalışanın adı ve soyadı ayrı bir sütunda görüntülenmektedir. Bunun yerine bunları tek bir sütunda birleştirmek iyi olabilir. Bunu başarmak için bir TemplateField kullanmamız gerekiyor. Yeni bir TemplateField ekleyebilir, gerekli işaretlemeyi ve veri bağlama sözdizimini ekleyebilir ve ardından ve BoundFields'ı FirstName silebilir veya BoundField'ı LastName bir TemplateField'a dönüştürebilir, TemplateField'ı FirstName değeri içerecek şekilde düzenleyebilir ve ardından BoundField'ı LastName kaldırabiliriz.LastName

Her iki yaklaşım da aynı sonucu verir, ancak kişisel olarak mümkün olduğunda BoundFields'ı TemplateFields'a dönüştürmeyi seviyorum çünkü dönüştürme, BoundField'ın görünümünü ve işlevselliğini taklit etmek için otomatik olarak bir ItemTemplate ve EditItemTemplate ile Web denetimleri ve veri bağlama sözdizimi ekler. Bunun yararı, dönüştürme işlemi bizim için işin bir kısmını gerçekleştirmiş olacağından, TemplateField ile daha az iş yapmamız gerekmesidir.

Mevcut bir BoundField'ı TemplateField'a dönüştürmek için, GridView'ın akıllı etiketinden Sütunları Düzenle bağlantısına tıklayın ve Alanlar iletişim kutusunu açın. Sol alt köşedeki listeden dönüştürülecek BoundField'ı seçin ve ardından sağ alt köşedeki "Bu alanı TemplateField'a dönüştür" bağlantısını tıklayın.

Şekil 4: Alanlar İletişim Kutusundan BoundField'ı TemplateField'a Dönüştürme (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Devam edin ve BoundField'ı FirstName bir TemplateField'a dönüştürün. Bu değişiklikten sonra Tasarımcı'da algısal bir fark yoktur. Bunun nedeni, BoundField'ı TemplateField'a dönüştürmenin, BoundField'ın görünümünü ve hissini koruyan bir TemplateField oluşturmasıdır. Tasarımcı'da bu noktada görsel bir fark olmamasına rağmen, bu dönüştürme işlemi BoundField'ın bildirim temelli sözdizimini - <asp:BoundField DataField="FirstName" HeaderText="FirstName" SortExpression="FirstName" /> - aşağıdaki TemplateField sözdizimiyle değiştirmiştir:

<asp:TemplateField HeaderText="FirstName" SortExpression="FirstName">
    <EditItemTemplate>
        <asp:TextBox ID="TextBox1" runat="server"
            Text='<%# Bind("FirstName") %>'></asp:TextBox>
    </EditItemTemplate>
    <ItemTemplate>
        <asp:Label ID="Label1" runat="server"
            Text='<%# Bind("FirstName") %>'></asp:Label>
    </ItemTemplate>
</asp:TemplateField>

Gördüğünüz gibi, TemplateField, özelliği veri alanının değerine ItemTemplate ayarlanmış bir Label ve özelliği de veri alanına ayarlanmış bir TextBox Text denetimine FirstName sahip iki EditItemTemplate şablondan TextFirstName oluşur. Veri bağlama sözdizimi - <%# Bind("fieldName") %> - veri alanının fieldName belirtilen Web denetimi özelliğine bağlı olduğunu gösterir.

Bu TemplateField'a veri alanı değerini eklemek LastName için içine ItemTemplate başka bir Label Web denetimi eklememiz ve özelliğini öğesine Textbağlamamız LastName gerekir. Bu, elle veya Tasarımcı aracılığıyla gerçekleştirilebilir. Bunu elle yapmak için, aşağıdakilere ItemTemplateuygun bildirimsel sözdizimini eklemeniz yeterlidir:

<asp:TemplateField HeaderText="FirstName" SortExpression="FirstName">
    <EditItemTemplate>
        <asp:TextBox ID="TextBox1" runat="server"
            Text='<%# Bind("FirstName") %>'></asp:TextBox>
    </EditItemTemplate>
    <ItemTemplate>
        <asp:Label ID="Label1" runat="server"
            Text='<%# Bind("FirstName") %>'></asp:Label>
        <asp:Label ID="Label2" runat="server"
            Text='<%# Bind("LastName") %>'></asp:Label>
    </ItemTemplate>
</asp:TemplateField>

Tasarımcı aracılığıyla eklemek için GridView'ın akıllı etiketinden Şablonları Düzenle bağlantısına tıklayın. Bu, GridView'ın şablon düzenleme arayüzünü görüntüler. Bu arayüzün akıllı etiketi, GridView'daki şablonların bir listesidir. Bu noktada yalnızca bir TemplateField'a sahip olduğumuzdan, açılır listede listelenen şablonlar yalnızca ve FirstNameile birlikte EmptyDataTemplate TemplateField için PagerTemplate olan şablonlardır. Şablon EmptyDataTemplate , belirtilirse, GridView'a bağlı verilerde sonuç yoksa GridView'ın çıktısını işlemek için kullanılır; , PagerTemplatebelirtilirse, sayfalamayı destekleyen bir GridView için disk belleği arabirimini işlemek için kullanılır.

Şekil 5: GridView'ın Şablonları Tasarımcı Aracılığıyla Düzenlenebilir (Tam boyutlu görüntüyü görüntülemek için tıklayın)

TemplateField'da LastName da görüntülemek için, FirstName Etiket denetimini Araç Kutusu'ndan FirstName GridView'ın şablon düzenleme arabirimindeki TemplateField'ın ItemTemplate denetimine sürükleyin.

Şekil 6: TemplateField'ın FirstName ItemTemplate'ine bir Etiket Web Denetimi ekleyin (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Bu noktada, TemplateField'a eklenen Etiket Web denetiminin özelliği "Etiket" olarak ayarlanmıştır Text . Bunu, bu özelliğin bunun yerine veri alanının değerine bağlı olması için değiştirmemiz LastName gerekir. Bunu gerçekleştirmek için Etiket denetiminin akıllı etiketine tıklayın ve Veri Bağlamalarını Düzenle seçeneğini belirleyin.

Şekil 7: Etiketin Akıllı Etiketinden Veri Bağlamalarını Düzenle Seçeneğini belirleyin (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Bu, DataBindings iletişim kutusunu getirir. Buradan, soldaki listeden veri bağlamaya katılacak özelliği seçebilir ve sağdaki açılır listeden verilerin bağlanacağı alanı seçebilirsiniz. Text Soldan özelliği ve LastName sağdan alanı seçin ve Tamam'a tıklayın.

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

Uyarı

DataBindings iletişim kutusu, iki yönlü veri bağlama gerçekleştirilip gerçekleştirilmeyeceğini belirtmenize olanak tanır. Bunu işaretlemeden bırakırsanız, yerine <%# Eval("LastName")%>veri bağlama sözdizimi <%# Bind("LastName")%> kullanılır. Bu öğretici için her iki yaklaşım da uygundur. Veri eklerken ve düzenlerken iki yönlü veri bağlama önemli hale gelir. Bununla birlikte, verileri basitçe görüntülemek için her iki yaklaşım da eşit derecede iyi çalışacaktır. Gelecekteki öğreticilerde iki yönlü veri bağlamayı ayrıntılı olarak tartışacağız.

Bu sayfayı bir tarayıcı üzerinden görüntülemek için biraz zaman ayırın. Gördüğünüz gibi, GridView hala dört sütun içeriyor; Ancak, FirstName sütun artık hem HEMFirstName de LastName veri alanı değerlerini listeler.

Şekil 9: Hem FirstName ve LastName Değerleri Tek Bir Sütunda Gösterilir (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Bu ilk adımı tamamlamak için BoundField'ı LastName kaldırın ve TemplateField'ın özelliğini "Name" olarak yeniden adlandırın FirstNameHeaderText . Bu değişikliklerden sonra, GridView'ın bildirim temelli işaretlemesi aşağıdaki gibi görünmelidir:

<asp:GridView ID="GridView1" runat="server"
    AutoGenerateColumns="False" DataKeyNames="EmployeeID"
    DataSourceID="ObjectDataSource1">
    <Columns>
        <asp:TemplateField HeaderText="Name" SortExpression="FirstName">
            <EditItemTemplate>
                <asp:TextBox ID="TextBox1" runat="server"
                    Text='<%# Bind("FirstName") %>'></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="Label1" runat="server"
                    Text='<%# Bind("FirstName") %>'></asp:Label>
                <asp:Label ID="Label2" runat="server"
                    Text='<%# Eval("LastName") %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="Title" HeaderText="Title"
            SortExpression="" Title" />
        <asp:BoundField DataField="HireDate" HeaderText="
            HireDate" SortExpression="" HireDate" />
    </Columns>
</asp:GridView>

Şekil 10: Her Çalışanın Adı ve Soyadı Tek Bir Sütunda Görüntüleniyor (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Adım 3: Alanı Görüntülemek için Takvim DenetiminiHiredDateKullanma

Bir veri alanı değerini GridView'da metin olarak görüntülemek, BoundField kullanmak kadar basittir. Bununla birlikte, belirli senaryolarda, veriler en iyi şekilde yalnızca metin yerine belirli bir Web denetimi kullanılarak ifade edilir. Verilerin görüntülenmesinin bu şekilde özelleştirilmesi TemplateFields ile mümkündür. Örneğin, çalışanın işe alma tarihini metin olarak görüntülemek yerine, işe alma tarihinin vurgulandığı bir takvim ( Takvim denetimini kullanarak) gösterebiliriz.

Bunu gerçekleştirmek için, BoundField'ı HiredDate bir TemplateField'a dönüştürerek başlayın. GridView'ın akıllı etiketine gidin ve Sütunları Düzenle bağlantısını tıklayarak Alanlar iletişim kutusunu açın. BoundField'ı HiredDate seçin ve "Bu alanı TemplateField'a dönüştür"ü tıklayın.

Şekil 11: BoundField'ı TemplateField'a HiredDate Dönüştürme (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Adım 2'de gördüğümüz gibi, bu, BoundField'ı bir ve içeren bir TemplateField ItemTemplate ile değiştirir ve EditItemTemplate özellikleri veri bağlama sözdizimi Textkullanılarak değere bağlı HiredDate olan <%# Bind("HiredDate")%> bir Label ve TextBox ile.

Metni bir Takvim denetimiyle değiştirmek için, Etiketi kaldırarak ve bir Takvim denetimi ekleyerek şablonu düzenleyin. Tasarımcıdan, GridView'ın akıllı etiketinden Şablonları Düzenle'yi seçin ve açılır listeden TemplateField's'ı HireDate seçinItemTemplate. Ardından, Etiket denetimini silin ve Araç Kutusu'ndan bir Takvim denetimini şablon düzenleme arabirimine sürükleyin.

Şekil 12: TemplateField'lara HireDateItemTemplate bir Takvim Denetimi ekleyin (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Bu noktada, GridView'daki her satır, TemplateField'ında HiredDate bir Calendar denetimi içerir. Ancak, çalışanın gerçek HiredDate değeri Takvim denetiminin herhangi bir yerinde ayarlanmamıştır ve bu da her Takvim denetiminin varsayılan olarak geçerli ay ve tarihi göstermesine neden olur. Bunu düzeltmek için, her çalışanın HiredDate Calendar denetiminin SelectedDate ve VisibleDate özelliklerine atamamız gerekir.

Takvim denetiminin akıllı etiketinden Veri Bağlamalarını Düzenle'yi seçin. Ardından, hem özellikleri hem de SelectedDateVisibleDate özelliklerini HiredDate veri alanına bağlayın.

Şekil 13: ve SelectedDate Özelliklerini Veri Alanına Bağlayın VisibleDateHiredDate (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Uyarı

Takvim denetiminin seçilen tarihinin görünür olması gerekmez. Örneğin, bir Takvimde seçilen tarih olarak 1 Ağustos 1999 olabilir, ancak geçerli ay ve yıl gösteriliyor olabilir. Seçilen tarih ve görünür tarih, Takvim denetimlerinin SelectedDate ve VisibleDate özelliklerinin belirttiği yerdir. Hem çalışanın özelliğini HiredDate seçmek hem de gösterildiğinden emin olmak istediğimizden, bu özelliklerin her ikisini de veri alanına bağlamamız HireDate gerekir.

Sayfayı bir tarayıcıda görüntülerken, takvim artık çalışanın işe alındığı tarihin ayını gösterir ve söz konusu tarihi seçer.

Şekil 14: Çalışanın HiredDate Takvim Kontrolünde Gösterilmesi (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Uyarı

Şimdiye kadar gördüğümüz tüm örneklerin aksine, bu öğretici için bu GridView için özelliği EnableViewStateFalse. Bu kararın nedeni, Takvim denetiminin tarihlerine tıklamanın bir geri göndermeye neden olması ve Takvim'in seçili tarihini az önce tıklanan tarihe ayarlamasıdır. Bununla birlikte, GridView'ın görünüm durumu devre dışı bırakılırsa, her geri göndermede GridView'ın verileri temel alınan veri kaynağına geri döner ve bu da Takvim'in seçilen tarihinin çalışanın tarihine HireDate ayarlanmasına neden olur , kullanıcı tarafından seçilen tarihin üzerine yazılır.

Bu eğitim için, kullanıcı çalışanın HireDate. Takvim denetimini, tarihleri seçilemeyecek şekilde yapılandırmak büyük olasılıkla en iyisidir. Ne olursa olsun, bu öğretici bazı durumlarda belirli işlevleri sağlamak için görünüm durumunun etkinleştirilmesi gerektiğini gösterir.

Adım 4: Çalışanın şirket için çalıştığı gün sayısını gösterme

Şimdiye kadar TemplateFields'ın iki uygulamasını gördük:

• İki veya daha fazla veri alanı değerini tek bir sütunda birleştirme ve
• Bir veri alanı değerini metin yerine Web denetimi kullanarak ifade etme

TemplateFields'ın üçüncü bir kullanımı, GridView'ın temel verileriyle ilgili meta verileri görüntülemektir. Örneğin, çalışanların işe alım tarihlerini göstermenin yanı sıra, işte toplam kaç gün geçirdiklerini gösteren bir sütuna da sahip olmak isteyebiliriz.

TemplateFields'ın başka bir kullanımı, temel alınan verilerin web sayfası raporunda veritabanında depolandığı biçimden farklı bir şekilde görüntülenmesi gereken senaryolarda ortaya çıkar. Tablonun Employees karakteri Gender saklayan veya M çalışanın cinsiyetini belirten bir F alanı olduğunu hayal edin. Bu bilgileri bir web sayfasında görüntülerken, cinsiyeti yalnızca "M" veya "F" yerine "Erkek" veya "Kadın" olarak göstermek isteyebiliriz.

Bu senaryoların her ikisi de şablondan çağrılan ASP.NET sayfasının arka plan kod sınıfında (veya yöntem olarak uygulanan ayrı bir sınıf kitaplığında) bir Shared oluşturularak işlenebilir. Bu tür bir biçimlendirme yöntemi, daha önce görülen aynı veri bağlama sözdizimi kullanılarak şablondan çağrılır. Biçimlendirme yöntemi herhangi bir sayıda parametre alabilir, ancak bir dize döndürmesi gerekir. Döndürülen bu dize, şablona eklenen HTML'dir.

Bu kavramı açıklamak için, bir çalışanın işte bulunduğu toplam gün sayısını listeleyen bir sütunu göstermek için öğreticimizi genişletelim. Bu biçimlendirme yöntemi bir Northwind.EmployeesRow nesneyi alır ve çalışanın çalıştığı gün sayısını bir dize olarak döndürür. Bu yöntem ASP.NET sayfasının arka plan kod sınıfına eklenebilir, ancak şablondan erişilebilir olması için veya olarak işaretlenmesi ProtectedPublic.

Protected Function DisplayDaysOnJob(employee As Northwind.EmployeesRow) As String
    ' Make sure HiredDate is not NULL... if so, return "Unknown"
    If employee.IsHireDateNull() Then
        Return "Unknown"
    Else
        ' Returns the number of days between the current
        ' date/time and HireDate
        Dim ts As TimeSpan = DateTime.Now.Subtract(employee.HireDate)
        Return ts.Days.ToString("#,##0")
    End If
End Function

HiredDate Alan veritabanı değerlerini içerebileceğindenNULL, hesaplamaya devam etmeden önce değerin içermediğinden NULL emin olmalıyız. HiredDate Değer NULLise, basitçe "Bilinmeyen" dizesini döndürürüz; değilseNULL, geçerli saat HiredDate ile değer arasındaki farkı hesaplar ve gün sayısını döndürürüz.

Bu yöntemi kullanmak için, veri bağlama sözdizimini kullanarak GridView'daki bir TemplateField'dan çağırmamız gerekir. GridView'ın akıllı etiketindeki Edit Columns (Sütunları Düzenle) bağlantısına tıklayarak ve yeni bir TemplateField ekleyerek GridView'a yeni bir TemplateField ekleyerek başlayın.

Şekil 15: GridView'a Yeni Bir TemplateField Ekleyin (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Bu yeni TemplateField'ın HeaderText özelliğini "Days on the Job" ItemStyleve 'özelliğini .HorizontalAlignCenter Şablondan yöntemi çağırmak DisplayDaysOnJob için bir ItemTemplate ekleyin ve aşağıdaki veri bağlama sözdizimini kullanın:

<%# DisplayDaysOnJob(CType(CType(Container.DataItem, DataRowView).Row,
    Northwind.EmployeesRow)) %>

Container.DataItemöğesine bağlı kayda DataRowView karşılık gelen bir DataSource nesne döndürür.GridViewRow özelliğiRow, yönteme Northwind.EmployeesRow geçirilen kesin olarak yazılmış DisplayDaysOnJob'ı döndürür. Bu veri bağlama sözdizimi doğrudan ( ItemTemplate aşağıdaki bildirim temelli sözdiziminde gösterildiği gibi) görünebilir veya bir Label Web denetiminin özelliğine atanabilir Text .

Uyarı

Alternatif olarak, bir EmployeesRow örneği iletmek yerine, kullanarak değeri HireDateiledebiliriz<%# DisplayDaysOnJob(Eval("HireDate")) %>. Ancak, Eval yöntem bir Objectdöndürür, bu nedenle yöntem imzamızı bunun yerine türünde bir giriş parametresini DisplayDaysOnJobkabul edecek şekilde değiştirmemiz Object gerekir, . Tablodaki sütun Eval("HireDate") değerler içerebileceğindenDateTime, çağrıyı HireDate körü körüne a'ya EmployeesNULL atamayız. Bu nedenle, yöntem için Object giriş parametresi olarak bir DisplayDaysOnJob kabul etmemiz, bir veritabanı NULL değerine sahip olup olmadığını kontrol etmemiz gerekir ( kullanılarak gerçekleştirilebilirConvert.IsDBNull(objectToCheck)) ve ardından buna göre devam edin.

Bu incelikler nedeniyle, tüm EmployeesRow örneği geçmeyi seçtim. Sonraki öğreticide, bir giriş parametresini Eval("columnName") biçimlendirme yöntemine geçirmek için söz dizimini kullanmak için daha uygun bir örnek göreceğiz.

Aşağıda, TemplateField eklendikten sonra GridView'ımız için bildirim temelli sözdizimi ve şuradan DisplayDaysOnJobçağrılan ItemTemplate yöntem gösterilmektedir:

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
    DataKeyNames="EmployeeID" DataSourceID="ObjectDataSource1">
    <Columns>
        <asp:TemplateField HeaderText="Name"
          SortExpression="FirstName">
            <EditItemTemplate>
                <asp:TextBox ID="TextBox1" runat="server"
                    Text='<%# Bind("FirstName") %>'></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="Label1" runat="server"
                    Text='<%# Bind("FirstName") %>'></asp:Label>
                <asp:Label ID="Label2" runat="server"
                    Text='<%# Eval("LastName") %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="Title" HeaderText="" Title"
            SortExpression="Title" />
        <asp:TemplateField HeaderText="HireDate" SortExpression="
            HireDate">
            <EditItemTemplate>
                <asp:TextBox ID="TextBox2" runat="server"
                    Text='<%# Bind("HireDate") %>'></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Calendar ID="Calendar1" runat="server"
                    SelectedDate='<%# Bind("HireDate") %>'
                    VisibleDate='<%# Eval("HireDate") %>'>
                </asp:Calendar>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Days On The Job">
            <ItemTemplate>
                <%# DisplayDaysOnJob(CType(CType(Container.DataItem, DataRowView).Row,
                    Northwind.EmployeesRow)) %>
            </ItemTemplate>
            <ItemStyle HorizontalAlign="Center" />
        </asp:TemplateField>
    </Columns>
</asp:GridView>

Şekil 16'da, bir tarayıcı aracılığıyla görüntülendiğinde tamamlanan öğretici gösterilmektedir.

Şekil 16: Çalışanın İşyerinde Bulunduğu Gün Sayısı Görüntüleniyor (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Özet

GridView denetimindeki TemplateField, verilerin görüntülenmesinde diğer alan denetimlerinde olduğundan daha yüksek bir esneklik derecesi sağlar. TemplateFields şu durumlar için idealdir:

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

TemplateFields, verilerin görüntülenmesini özelleştirmenin yanı sıra, gelecekteki öğreticilerde göreceğimiz gibi, verileri düzenlemek ve eklemek için kullanılan kullanıcı arayüzlerini özelleştirmek için de kullanılır.

Sonraki iki öğretici, DetailsView'da TemplateFields'ı kullanmaya göz atarak şablonları keşfetmeye devam ediyor. Bunu takiben, verilerin düzeninde ve yapısında daha fazla esneklik sağlamak için alanlar yerine şablonlar kullanan FormView'a döneceğ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 Dan Jagers'dı. Yaklaşan MSDN makalelerimi gözden geçirmek istiyor musunuz? Öyleyse, mitchell@4GuysFromRolla.com'a bir mesaj bırakın.

ÖncekiSonraki