Menggunakan TemplateFields di Kontrol GridView (VB)

2023-07-13

Untuk memberikan fleksibilitas, GridView menawarkan TemplateField, yang merender menggunakan templat. Templat dapat menyertakan campuran HTML statis, kontrol Web, dan sintaks pengikatan data. Dalam tutorial ini kita akan memeriksa cara menggunakan TemplateField untuk mencapai tingkat penyesuaian yang lebih besar dengan kontrol GridView.

Pendahuluan

GridView terdiri dari sekumpulan bidang yang menunjukkan properti mana dari DataSource yang harus disertakan dalam output yang dirender, serta bagaimana data tersebut akan ditampilkan. Jenis bidang yang paling sederhana adalah BoundField, yang menampilkan nilai data sebagai teks. Jenis bidang lain menampilkan data menggunakan elemen HTML alternatif. CheckBoxField, misalnya, dirender sebagai kotak centang yang statusnya dicentang tergantung pada nilai bidang data tertentu; ImageField merender gambar yang sumber gambarnya didasarkan pada bidang data tertentu. Hyperlink dan tombol yang statusnya bergantung pada nilai bidang data yang mendasar dapat dirender menggunakan jenis bidang HyperLinkField dan ButtonField.

Sementara jenis bidang CheckBoxField, ImageField, HyperLinkField, dan ButtonField memungkinkan tampilan alternatif data, mereka masih cukup terbatas sehubungan dengan pemformatan. CheckBoxField hanya dapat menampilkan satu kotak centang, sedangkan ImageField hanya dapat menampilkan satu gambar. Bagaimana jika bidang tertentu perlu menampilkan beberapa teks, kotak centang, dan gambar, semuanya berdasarkan nilai bidang data yang berbeda? Atau bagaimana jika kita ingin menampilkan data menggunakan kontrol Web selain Kotak Centang, Gambar, HyperLink, atau Tombol? Selain itu, BoundField membatasi tampilannya ke satu bidang data. Bagaimana jika kita ingin menampilkan dua atau beberapa nilai bidang data dalam satu kolom GridView?

Untuk mengakomodasi tingkat fleksibilitas ini, GridView menawarkan TemplateField, yang merender menggunakan templat. Templat dapat menyertakan campuran HTML statis, kontrol Web, dan sintaks pengikatan data. Selain itu, TemplateField memiliki berbagai templat yang dapat digunakan untuk menyesuaikan penyajian untuk situasi yang berbeda. Misalnya, ItemTemplate digunakan secara default untuk merender sel untuk setiap baris, tetapi EditItemTemplate templat dapat digunakan untuk menyesuaikan antarmuka saat mengedit data.

Dalam tutorial ini kita akan memeriksa cara menggunakan TemplateField untuk mencapai tingkat penyesuaian yang lebih besar dengan kontrol GridView. Dalam tutorial sebelumnya kami melihat cara menyesuaikan pemformatan berdasarkan data yang mendasarinya menggunakan DataBound penanganan aktivitas dan RowDataBound . Cara lain untuk mengkustomisasi pemformatan berdasarkan data yang mendasar adalah dengan memanggil metode pemformatan dari dalam templat. Kita akan melihat teknik ini dalam tutorial ini juga.

Untuk tutorial ini, kami akan menggunakan TemplateFields untuk menyesuaikan tampilan daftar karyawan. Secara khusus, kami akan mencantumkan semua karyawan, tetapi akan menampilkan nama depan dan belakang karyawan dalam satu kolom, tanggal sewa mereka dalam kontrol Kalender, dan kolom status yang menunjukkan berapa hari mereka telah dipekerjakan di perusahaan.

Gambar 1: Tiga TemplateFields Digunakan untuk Menyesuaikan Tampilan (Klik untuk melihat gambar ukuran penuh)

Langkah 1: Mengikat Data ke GridView

Dalam skenario pelaporan di mana Anda perlu menggunakan TemplateFields untuk menyesuaikan tampilan, saya merasa paling mudah untuk memulai dengan membuat kontrol GridView yang hanya berisi BoundFields terlebih dahulu dan kemudian untuk menambahkan TemplateFields baru atau mengonversi BoundFields yang ada ke TemplateFields sesuai kebutuhan. Oleh karena itu, mari kita mulai tutorial ini dengan menambahkan GridView ke halaman melalui Perancang dan mengikatnya ke ObjectDataSource yang mengembalikan daftar karyawan. Langkah-langkah ini akan membuat GridView dengan BoundFields untuk setiap kolom karyawan.

Buka halaman GridViewTemplateField.aspx dan seret GridView dari Kotak Alat ke Perancang. Dari tag pintar GridView, pilih untuk menambahkan kontrol ObjectDataSource baru yang memanggil metode EmployeesBLL dari kelas GetEmployees().

Gambar 2: Tambahkan Kontrol ObjectDataSource Baru yang Memanggil GetEmployees() Metode (Klik untuk melihat gambar ukuran penuh)

Mengikat GridView dengan cara ini akan secara otomatis menambahkan BoundField untuk setiap properti karyawan: EmployeeID, LastName, FirstName, Title, HireDate, ReportsTo, dan Country. Untuk laporan ini, jangan menampilkan properti EmployeeID, ReportsTo, atau Country. Untuk menghapus BoundFields ini, Anda dapat:

Gunakan kotak dialog Bidang klik tautan Edit Kolom dari tag pintar GridView untuk memunculkan kotak dialog ini. Selanjutnya, pilih BoundFields dari daftar kiri bawah dan klik tombol X merah untuk menghapus BoundField.
Edit sintaks deklaratif GridView secara manual dari tampilan Sumber, hapus <asp:BoundField> elemen untuk BoundField yang ingin Anda hapus.

Setelah Anda menghapus EmployeeID, , ReportsTodan Country BoundFields, markup GridView Anda akan terlihat seperti:

<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>

Luangkan waktu sejenak untuk melihat kemajuan kami di browser. Pada titik ini Anda akan melihat tabel dengan catatan untuk setiap karyawan dan empat kolom: satu untuk nama belakang karyawan, satu untuk nama depan mereka, satu untuk judul mereka, dan satu untuk tanggal sewa mereka.

Gambar 3: LastName, FirstName, Title, dan HireDate Kolom Ditampilkan untuk Setiap Karyawan (Klik untuk melihat gambar ukuran penuh)

Langkah 2: Menampilkan Nama Depan dan Belakang dalam Kolom Tunggal

Saat ini, nama depan dan belakang setiap karyawan ditampilkan dalam kolom terpisah. Mungkin menyenangkan untuk menggabungkannya menjadi satu kolom sebagai gantinya. Untuk mencapai hal ini, kita perlu menggunakan TemplateField. Kita dapat menambahkan TemplateField baru, menambahkan ke dalamnya markup dan sintaks pengikatan data yang diperlukan, lalu menghapus FirstName dan LastName BoundFields, atau kita dapat mengonversi FirstName BoundField menjadi TemplateField, mengedit TemplateField untuk menyertakan LastName nilai, lalu menghapus LastName BoundField.

Kedua pendekatan menjaring hasil yang sama, tetapi secara pribadi saya suka mengonversi BoundFields ke TemplateFields jika memungkinkan karena konversi secara otomatis menambahkan ItemTemplate dan EditItemTemplate dengan kontrol Web dan sintaks pengikatan data untuk meniru tampilan dan fungsionalitas BoundField. Manfaatnya adalah bahwa kita harus melakukan lebih sedikit pekerjaan dengan TemplateField karena proses konversi akan melakukan beberapa pekerjaan untuk kita.

Untuk mengonversi BoundField yang ada menjadi TemplateField, klik tautan Edit Kolom dari tag cerdas GridView, yang akan menampilkan kotak dialog Bidang. Pilih BoundField untuk dikonversi dari daftar di sudut kiri bawah lalu klik tautan "Konversi bidang ini menjadi TemplateField" di sudut kanan bawah.

Gambar 4: Mengonversi BoundField Menjadi Bidang Templat dari Kotak Dialog Bidang (Klik untuk melihat gambar ukuran penuh)

Silakan ubah FirstName BoundField menjadi TemplateField. Setelah perubahan ini, tidak ada perbedaan perseptif dalam Perancang. Ini karena mengonversi BoundField menjadi TemplateField membuat TemplateField yang mempertahankan tampilan dan nuansa BoundField. Meskipun tidak ada perbedaan visual pada saat ini di Perancang, proses konversi ini telah mengganti sintaks deklaratif BoundField - - <asp:BoundField DataField="FirstName" HeaderText="FirstName" SortExpression="FirstName" /> dengan sintaks TemplateField berikut:

<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>

Seperti yang Anda lihat, TemplateField terdiri dari dua templat ItemTemplate yang memiliki Label yang propertinya Text diatur ke nilai FirstName bidang data, dan EditItemTemplate dengan kontrol TextBox yang propertinya Text juga diatur ke FirstName bidang data. Sintaks pengikatan data - - <%# Bind("fieldName") %> menunjukkan bahwa bidang fieldName data terikat ke properti kontrol Web yang ditentukan.

Untuk menambahkan LastName nilai bidang data ke TemplateField ini, kita perlu menambahkan kontrol Web Label lain di ItemTemplate dan mengikat propertinya Text ke LastName. Ini dapat dicapai baik dengan tangan atau melalui Perancang. Untuk melakukannya dengan tangan, cukup tambahkan sintaks deklaratif yang sesuai ke ItemTemplate:

<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>

Untuk menambahkannya melalui Perancang, klik tautan Edit Templat dari tag pintar GridView. Ini akan menampilkan antarmuka pengeditan templat GridView. Tag cerdas pada antarmuka ini berisi daftar templat di GridView. Karena kami hanya memiliki satu TemplateField pada saat ini, satu-satunya templat yang tercantum dalam daftar drop-down adalah templat tersebut FirstName untuk TemplateField bersama dengan EmptyDataTemplate dan PagerTemplate. <&c0&> Template, bila ditentukan, digunakan untuk merender output GridView saat tidak ada hasil dalam data yang terikat ke GridView; <&c1&>, bila ditentukan, digunakan untuk merender antarmuka pemutaran halaman untuk GridView yang mendukung pengenalan halaman.

Gambar 5: Templat GridView Dapat Diedit Melalui Perancang (Klik untuk melihat gambar ukuran penuh)

Untuk juga menampilkan LastName di FirstName TemplateField seret kontrol Label dari Kotak Alat ke FirstName TemplateField ItemTemplate di antarmuka pengeditan templat GridView.

Gambar 6: Tambahkan Kontrol Web Label ke FirstName ItemTemplate TemplateField (Klik untuk melihat gambar ukuran penuh)

Saat ini, kontrol Web Label yang ditambahkan ke TemplateField memiliki properti Text diatur menjadi "Label". Kita perlu mengubah ini sehingga properti ini terikat ke nilai LastName bidang data sebagai gantinya. Untuk mencapai hal ini, klik pada tag pintar kontrol Label dan pilih opsi Edit DataBindings.

Gambar 7: Pilih Opsi Edit DataBindings dari Tag Pintar Label (Klik untuk melihat gambar ukuran penuh)

Ini akan memunculkan kotak dialog DataBindings. Dari sini Anda dapat memilih properti untuk berpartisipasi dalam pengikatan basis data dari daftar di sebelah kiri dan memilih kolom untuk mengaitkan data dari daftar drop-down di sebelah kanan. Text Pilih properti dari kiri dan LastName bidang dari kanan dan klik OK.

Gambar 8: Ikat Text Properti ke LastName Bidang Data (Klik untuk melihat gambar ukuran penuh)

Nota

Kotak dialog DataBindings memungkinkan Anda untuk menunjukkan apakah akan melakukan pengikatan data dua arah. Jika Anda membiarkan ini tidak dicentang, sintaks <%# Eval("LastName")%> pengikatan data akan digunakan alih-alih <%# Bind("LastName")%>. Salah satu pendekatan baik-baik saja untuk tutorial ini. Pengikatan data dua arah menjadi penting saat menyisipkan dan mengedit data. Namun, untuk hanya menampilkan data, salah satu pendekatan akan bekerja dengan sama baiknya. Kita akan membahas pengikatan data dua arah secara rinci dalam tutorial mendatang.

Luangkan waktu sejenak untuk melihat halaman ini melalui browser. Seperti yang Anda lihat, GridView masih menyertakan empat kolom; namun, kolom FirstName sekarang mencantumkan nilai bidang data dan FirstName.

Gambar 9: Nilai FirstName dan LastName Ditampilkan dalam Satu Kolom (Klik untuk melihat gambar ukuran penuh)

Untuk menyelesaikan langkah pertama ini, hapus LastName BoundField dan ganti nama FirstName properti TemplateField HeaderText menjadi "Name". Setelah perubahan ini, markup deklaratif GridView akan terlihat seperti berikut ini:

<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>

Gambar 10: Nama Depan dan Belakang Setiap Karyawan Ditampilkan dalam Satu Kolom (Klik untuk melihat gambar ukuran penuh)

Langkah 3: Menggunakan Kontrol Kalender untuk Menampilkan`HiredDate`Bidang

Menampilkan nilai bidang data sebagai teks dalam GridView semudah menggunakan BoundField. Namun, untuk skenario tertentu, data paling baik diekspresikan menggunakan kontrol Web tertentu alih-alih hanya teks. Penyesuaian tampilan data semacam itu dimungkinkan dengan TemplateFields. Misalnya, daripada menampilkan tanggal sewa karyawan sebagai teks, kami dapat menampilkan kalender (menggunakan kontrol Kalender) dengan tanggal sewa mereka disorot.

Untuk mencapai hal ini, mulailah dengan mengonversi HiredDate BoundField menjadi TemplateField. Cukup buka tag pintar GridView dan klik tautan Edit Kolom, memunculkan kotak dialog Bidang. HiredDate Pilih BoundField dan klik "Konversi bidang ini menjadi Bidang Templat."

Gambar 11: Mengonversi HiredDate BoundField Menjadi TemplateField (Klik untuk melihat gambar ukuran penuh)

Seperti yang kita lihat di Langkah 2, ini akan mengganti BoundField dengan TemplateField yang berisi ItemTemplate dan EditItemTemplate dengan Label dan TextBox yang propertinya Text terikat ke nilai HiredDate menggunakan sintaks <%# Bind("HiredDate")%> pengikatan data.

Untuk mengganti teks dengan kontrol Kalender, edit templat dengan menghapus Label dan menambahkan kontrol Kalender. Dari Desainer, pilih Edit Template dari tag pintar GridView dan pilih HireDate TemplateField dari ItemTemplate daftar drop-down. Selanjutnya, hapus kontrol Label dan seret kontrol Kalender dari Kotak Alat ke antarmuka pengeditan templat.

Gambar 12: Tambahkan Kontrol Kalender ke HireDate Bidang ItemTemplate Templat (Klik untuk melihat gambar ukuran penuh)

Pada titik ini setiap baris di GridView akan berisi kontrol Kalender di TemplateField-nya HiredDate . Namun, nilai aktual HiredDate karyawan tidak diatur di bagian mana pun dalam kontrol Kalender, menyebabkan setiap kontrol Kalender default menampilkan bulan dan tanggal saat ini. Untuk memperbaiki hal ini, kita perlu menetapkan informasi karyawan HiredDate ke properti SelectedDate dan VisibleDate yang ada pada kontrol Kalender.

Dari tag pintar Kontrol Kalender, pilih Edit DataBindings. Selanjutnya, ikat properti SelectedDate dan VisibleDate ke HiredDate bidang data.

Gambar 13: Mengaitkan SelectedDate dan VisibleDate Properti ke HiredDate Lapangan Data (Klik untuk melihat gambar ukuran penuh)

Nota

Pilihan tanggal pada kontrol kalender tidak harus terlihat. Misalnya, Kalender mungkin memiliki^{tanggal 1} Agustus 1999 sebagai tanggal yang dipilih, tetapi menampilkan bulan dan tahun saat ini. Tanggal yang dipilih dan tanggal yang terlihat ditentukan oleh properti kontrol kalender SelectedDate dan VisibleDate. Karena kita ingin memilih properti karyawan HiredDate dan memastikan bahwa hal tersebut ditampilkan, kita perlu mengaitkan kedua properti ini dengan bidang data HireDate.

Saat melihat halaman di browser, kalender sekarang menampilkan bulan dari tanggal mulai bekerja karyawan dan memilih tanggal tersebut.

Gambar 14: Karyawan HiredDate Ditampilkan di Kontrol Kalender (Klik untuk melihat gambar ukuran penuh)

Nota

Berbeda dengan semua contoh yang telah kita lihat sejauh ini, untuk tutorial ini kami tidak menetapkan EnableViewState properti ke False untuk GridView ini. Alasan keputusan ini karena ketika mengklik tanggal kontrol Kalender menyebabkan postback, mengubah tanggal Kalender yang dipilih ke tanggal yang baru diklik. Namun, jika status tampilan GridView dinonaktifkan, pada setiap postback, data GridView dikaitkan kembali ke sumber data yang mendasarinya, yang menyebabkan tanggal Kalender yang dipilih diatur kembali ke tanggal milik karyawan HireDate, menimpa tanggal yang dipilih oleh pengguna.

Untuk tutorial ini, pembahasan ini menjadi tidak relevan karena pengguna tidak dapat memperbarui HireDate karyawan. Mungkin yang terbaik adalah mengonfigurasi kontrol Kalender sehingga tanggalnya tidak dapat dipilih. Terlepas dari itu, tutorial ini menunjukkan bahwa dalam beberapa keadaan, status tampilan harus diaktifkan untuk menyediakan fungsionalitas tertentu.

Langkah 4: Menunjukkan Jumlah Hari Karyawan Telah Bekerja untuk Perusahaan

Sejauh ini kita telah melihat dua aplikasi TemplateFields:

Menggabungkan dua atau beberapa nilai bidang data ke dalam satu kolom, dan
Mengekspresikan nilai bidang data menggunakan kontrol Web alih-alih teks

Penggunaan ketiga TemplateFields adalah dalam menampilkan metadata tentang data dasar GridView. Selain menunjukkan tanggal sewa karyawan, misalnya, kami mungkin juga ingin memiliki kolom yang menampilkan berapa hari total mereka dalam pekerjaan tersebut.

Namun penggunaan lain dari TemplateFields muncul dalam skenario ketika data yang mendasarinya perlu ditampilkan secara berbeda dalam laporan halaman web daripada dalam format yang disimpan dalam database. Bayangkan bahwa Employees tabel memiliki Gender bidang yang menyimpan karakter M atau F untuk menunjukkan jenis kelamin karyawan. Saat menampilkan informasi ini di halaman web, kita mungkin ingin menampilkan jenis kelamin sebagai "Laki-laki" atau "Perempuan", bukan hanya "M" atau "F".

Kedua skenario ini dapat ditangani dengan membuat metode pemformatan di kelas code-behind halaman ASP.NET (atau di pustaka kelas terpisah, diimplementasikan sebagai Shared metode) yang dipanggil dari templat. Metode pemformatan seperti itu dipanggil dari templat menggunakan sintaks pengikatan data yang sama yang terlihat sebelumnya. Metode pemformatan dapat mengambil sejumlah parameter, tetapi harus mengembalikan string. String yang dikembalikan ini adalah HTML yang disuntikkan ke dalam templat.

Untuk mengilustrasikan konsep ini, mari kita pertambahkan tutorial kita untuk menampilkan kolom yang mencantumkan jumlah total hari yang telah dikerjakan karyawan. Metode pemformatan ini akan menerima objek Northwind.EmployeesRow dan mengembalikan jumlah hari karyawan telah dipekerjakan sebagai string. Metode ini dapat ditambahkan ke kelas code-behind halaman ASP.NET, tetapi harus ditandai sebagai Protected atau Public agar dapat diakses dari templat.

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 Karena bidang dapat berisi NULL nilai database, kita harus terlebih dahulu memastikan bahwa nilainya tidak NULL sebelum melanjutkan penghitungan. HiredDate Jika nilainya adalah NULL, kami hanya mengembalikan string "Tidak Diketahui"; jika tidak NULL, kami menghitung perbedaan antara waktu saat ini dan HiredDate nilai dan mengembalikan jumlah hari.

Untuk menggunakan metode ini, kita perlu memanggilnya dari TemplateField di GridView menggunakan sintaks pengikatan data. Mulailah dengan menambahkan TemplateField baru ke GridView dengan mengklik tautan Edit Kolom di tag pintar GridView dan menambahkan TemplateField baru.

Gambar 15: Tambahkan TemplateField Baru ke GridView (Klik untuk melihat gambar ukuran penuh)

Atur properti TemplateField HeaderText baru ini ke "Days on the Job" dan propertinya ItemStyleHorizontalAlign ke Center. Untuk memanggil DisplayDaysOnJob metode dari templat, tambahkan ItemTemplate dan gunakan sintaks pengikatan data berikut:

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

Container.DataItem mengembalikan objek yang DataRowView sesuai dengan rekaman yang DataSource terikat ke GridViewRow. Propertinya Row mengembalikan jenis data yang kuat Northwind.EmployeesRow, yang diteruskan ke metode DisplayDaysOnJob. Sintaks pengikatan data ini dapat muncul langsung pada ItemTemplate seperti yang ditunjukkan dalam sintaks deklaratif di bawah ini, atau dapat ditetapkan ke properti Text dari kontrol Label Web.

Nota

Atau, alih-alih meneruskan dalam EmployeesRow instans, kita hanya bisa meneruskan HireDate nilai menggunakan <%# DisplayDaysOnJob(Eval("HireDate")) %>. Namun, metode Eval mengembalikan nilai berbentuk Object, jadi kita harus mengubah tanda tangan metode DisplayDaysOnJob agar dapat menerima parameter input dengan jenis Object sebagai gantinya. Kami tidak dapat secara membabi buta mengubah Eval("HireDate") panggilan menjadi DateTime karena kolom HireDate dalam tabel Employees dapat berisi nilai NULL. Oleh karena itu, kita perlu menerima Object sebagai parameter input untuk metode DisplayDaysOnJob, memeriksa apakah memiliki nilai database NULL (yang dapat dicapai menggunakan Convert.IsDBNull(objectToCheck)), dan kemudian melanjutkan dengan langkah yang sesuai.

Karena perincian halus ini, saya telah memilih untuk meneruskan seluruh EmployeesRow instans. Dalam tutorial berikutnya kita akan melihat contoh yang lebih pas untuk menggunakan Eval("columnName") sintaks untuk meneruskan parameter input ke dalam metode pemformatan.

Berikut ini menunjukkan sintaks deklaratif untuk GridView kami setelah TemplateField ditambahkan dan metode DisplayDaysOnJob dipanggil dari ItemTemplate.

<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>

Gambar 16 menunjukkan tutorial yang telah selesai, saat dilihat melalui browser.

Gambar 16: Jumlah Hari Karyawan Telah Berada di Pekerjaan Ditampilkan (Klik untuk melihat gambar ukuran penuh)

Ringkasan

TemplateField dalam kontrol GridView memungkinkan tingkat fleksibilitas yang lebih tinggi dalam menampilkan data daripada yang tersedia dengan kontrol bidang lainnya. TemplateFields sangat ideal untuk situasi di mana:

Beberapa bidang data perlu ditampilkan dalam satu kolom GridView
Data paling baik diekspresikan menggunakan kontrol Web daripada teks biasa
Output tergantung pada data yang mendasar, seperti menampilkan metadata atau dalam memformat ulang data

Selain menyesuaikan tampilan data, TemplateFields juga digunakan untuk menyesuaikan antarmuka pengguna yang digunakan untuk mengedit dan menyisipkan data, seperti yang akan kita lihat di tutorial mendatang.

Dua tutorial berikutnya terus menjelajahi templat, dimulai dengan melihat menggunakan TemplateFields dalam DetailsView. Setelah itu, kita akan beralih ke FormView, yang menggunakan templat sebagai pengganti bidang untuk memberikan fleksibilitas yang lebih besar dalam tata letak dan struktur data.

Selamat Pemrograman!

Tentang Penulis

Scott Mitchell, penulis tujuh buku ASP/ASP.NET dan pendiri 4GuysFromRolla.com, telah bekerja sama dengan teknologi Microsoft Web sejak 1998. Scott bekerja sebagai konsultan, pelatih, dan penulis independen. Buku terbarunya adalah Sams Teach Yourself ASP.NET 2.0 dalam 24 Jam. Dia dapat dijangkau di mitchell@4GuysFromRolla.com.

Ucapan terima kasih khusus kepada

Seri tutorial ini ditinjau oleh banyak peninjau yang bermanfaat. Peninjau prospek untuk tutorial ini adalah Dan Jagers. Tertarik untuk meninjau artikel MSDN saya yang akan datang? Jika demikian, hubungi saya di mitchell@4GuysFromRolla.com.

Berikutnya Sebelumnya

Bagikan melalui

Menggunakan TemplateFields di Kontrol GridView (VB)

Pendahuluan

Langkah 1: Mengikat Data ke GridView

Langkah 2: Menampilkan Nama Depan dan Belakang dalam Kolom Tunggal

Langkah 3: Menggunakan Kontrol Kalender untuk MenampilkanHiredDateBidang

Langkah 4: Menunjukkan Jumlah Hari Karyawan Telah Bekerja untuk Perusahaan

Ringkasan

Tentang Penulis

Ucapan terima kasih khusus kepada

Saran dan Komentar

Sumber Daya Tambahan:

Langkah 3: Menggunakan Kontrol Kalender untuk Menampilkan`HiredDate`Bidang