Bagikan melalui

Menggunakan TemplateFields di DetailsView Control (C#)

oleh Scott Mitchell

Unduh PDF

Kemampuan TemplateFields yang sama yang tersedia dengan GridView juga tersedia dengan kontrol DetailsView. Dalam tutorial ini kita akan menampilkan satu produk pada satu waktu menggunakan DetailsView yang berisi TemplateFields.

Pendahuluan

TemplateField menawarkan tingkat fleksibilitas yang lebih tinggi dalam merender data daripada kontrol bidang data BoundField, CheckBoxField, HyperLinkField, dan bidang data lainnya. Dalam tutorial sebelumnya kita melihat menggunakan TemplateField dalam GridView untuk:

  • Tampilkan beberapa nilai bidang data dalam satu kolom. Secara khusus, bidang FirstName dan LastName digabungkan menjadi satu kolom GridView.
  • Gunakan kontrol Web alternatif untuk mengekspresikan nilai bidang data. Kami melihat cara menampilkan HiredDate nilai menggunakan kontrol Kalender.
  • Perlihatkan informasi status berdasarkan data yang mendasar. Employees Meskipun tabel tidak berisi kolom yang mengembalikan jumlah hari yang telah dilakukan karyawan, kami dapat menampilkan informasi tersebut dalam contoh GridView dalam tutorial sebelumnya dengan menggunakan TemplateField dan metode pemformatan.

Kemampuan TemplateFields yang sama yang tersedia dengan GridView juga tersedia dengan kontrol DetailsView. Dalam tutorial ini kita akan menampilkan satu produk pada satu waktu menggunakan DetailsView yang berisi dua TemplateFields. TemplateField pertama akan menggabungkan UnitPricebidang data , UnitsInStock, dan UnitsOnOrder menjadi satu baris DetailsView. TemplateField kedua akan menampilkan nilai Discontinued bidang , tetapi akan menggunakan metode pemformatan untuk menampilkan "YA" jika Discontinued adalah true, dan "TIDAK" jika tidak.

Dua TemplateFields Digunakan untuk Mengkustomisasi Tampilan

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

Mari kita mulai!

Langkah 1: Mengikat Data ke DetailsView

Seperti yang dibahas dalam tutorial sebelumnya, ketika bekerja dengan TemplateFields seringkali paling mudah untuk memulai dengan membuat kontrol DetailsView yang hanya berisi BoundFields dan kemudian menambahkan TemplateFields baru atau mengonversi BoundFields yang ada ke TemplateFields sesuai kebutuhan. Oleh karena itu, mulai tutorial ini dengan menambahkan DetailsView ke halaman melalui Perancang dan mengikatnya ke ObjectDataSource yang mengembalikan daftar produk. Langkah-langkah ini akan membuat DetailsView dengan BoundFields untuk setiap bidang nilai non-Boolean produk dan CheckBoxField untuk satu bidang nilai Boolean (Dihentikan).

DetailsViewTemplateField.aspx Buka halaman dan seret DetailsView dari Kotak Alat ke Perancang. Dari tag pintar DetailsView, pilih untuk menambahkan kontrol ObjectDataSource baru yang memanggil ProductsBLL metode kelas GetProducts() .

Tambahkan Kontrol ObjectDataSource Baru yang Memanggil Metode GetProducts()

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

Untuk laporan ini, hapus ProductID, SupplierID, CategoryID, dan ReorderLevel BoundFields. Selanjutnya, susun ulang BoundFields sehingga CategoryName dan SupplierName BoundFields muncul segera setelah ProductName BoundField. Jangan ragu untuk menyesuaikan HeaderText properti dan properti pemformatan untuk BoundFields sesuai keinginan Anda. Seperti halnya GridView, pengeditan tingkat BoundField ini dapat dilakukan melalui kotak dialog Bidang (dapat diakses dengan mengklik tautan Edit Bidang di tag pintar DetailsView) atau melalui sintaks deklaratif. Terakhir, hapus nilai DetailsView Height dan Width properti untuk memungkinkan kontrol DetailsView diperluas berdasarkan data yang ditampilkan dan centang kotak Aktifkan Halaman di tag pintar.

Setelah membuat perubahan ini, markup deklaratif kontrol DetailsView Anda akan terlihat mirip dengan yang berikut ini:

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

Luangkan waktu sejenak untuk melihat halaman melalui browser. Pada titik ini Anda akan melihat satu produk terdaftar (Chai) dengan baris yang menunjukkan nama produk, kategori, pemasok, harga, unit dalam stok, unit sesuai pesanan, dan statusnya yang dihentikan.

Detail Produk Ditampilkan Menggunakan Serangkaian BoundFields

Gambar 3: Detail Produk Ditampilkan Menggunakan Serangkaian BoundFields (Klik untuk melihat gambar ukuran penuh)

Langkah 2: Menggabungkan Harga, Unit Dalam Stok, dan Unit Sesuai Pesanan Ke Dalam Satu Baris

DetailsView memiliki baris untuk UnitPricebidang , UnitsInStock, dan UnitsOnOrder . Kita dapat menggabungkan bidang data ini menjadi satu baris dengan TemplateField baik dengan menambahkan TemplateField baru atau dengan mengonversi salah satu BoundFields , , UnitPricedan UnitsInStock yang ada UnitsOnOrdermenjadi TemplateField. Meskipun saya pribadi lebih suka mengonversi BoundFields yang ada, mari kita berlatih dengan menambahkan TemplateField baru.

Mulailah dengan mengklik tautan Edit Bidang di tag pintar DetailsView untuk memunculkan kotak dialog Bidang. Selanjutnya, tambahkan TemplateField baru dan atur propertinya HeaderText ke "Harga dan Inventori" dan pindahkan TemplateField baru sehingga diposisikan di atas UnitPrice BoundField.

Menambahkan TemplateField Baru ke Kontrol DetailsView

Gambar 4: Tambahkan TemplateField Baru ke DetailsView Control (Klik untuk melihat gambar ukuran penuh)

Karena TemplateField baru ini akan berisi nilai yang saat ini ditampilkan di UnitPrice, , UnitsInStockdan UnitsOnOrder BoundFields, mari kita hapus.

Tugas terakhir untuk langkah ini adalah menentukan ItemTemplate markup untuk Price and Inventory TemplateField, yang dapat dicapai baik melalui antarmuka pengeditan templat DetailsView di Perancang atau dengan tangan melalui sintaks deklaratif kontrol. Seperti halnya GridView, antarmuka pengeditan templat DetailsView dapat diakses dengan mengklik tautan Edit Templat di tag pintar. Dari sini Anda dapat memilih templat untuk diedit dari daftar drop-down lalu menambahkan kontrol Web apa pun dari Kotak Alat.

Untuk tutorial ini, mulailah dengan menambahkan kontrol Label ke Price and Inventory TemplateField.ItemTemplate Selanjutnya, klik tautan Edit DataBindings dari tag pintar kontrol Label Web dan ikat Text properti ke UnitPrice bidang .

Mengikat Properti Teks Label ke Bidang Data UnitPrice

Gambar 5: Ikat Properti Label Text ke UnitPrice Bidang Data (Klik untuk melihat gambar ukuran penuh)

Memformat Harga sebagai Mata Uang

Dengan penambahan ini, Label Web control Price dan Inventory TemplateField sekarang akan menampilkan hanya harga untuk produk yang dipilih. Gambar 6 menunjukkan cuplikan layar kemajuan kami sejauh ini ketika dilihat melalui browser.

TemplateField Harga dan Inventori Menunjukkan Harga

Gambar 6: Templat Harga dan Inventori Menampilkan Harga (Klik untuk melihat gambar berukuran penuh)

Perhatikan bahwa harga produk tidak diformat sebagai mata uang. Dengan BoundField, pemformatan dimungkinkan dengan mengatur HtmlEncode properti ke false dan DataFormatString properti ke {0:formatSpecifier}. Namun, untuk TemplateField, instruksi pemformatan apa pun harus ditentukan dalam sintaks pengikatan data atau melalui penggunaan metode pemformatan yang ditentukan di suatu tempat dalam kode aplikasi (seperti di kelas kode belakang halaman ASP.NET).

Untuk menentukan pemformatan untuk sintaks pengikatan data yang digunakan dalam kontrol Label Web, kembali ke kotak dialog DataBindings dengan mengklik tautan Edit DataBindings dari tag pintar Label. Anda dapat mengetik instruksi pemformatan langsung di daftar drop-down Format atau memilih salah satu string format yang ditentukan. Seperti properti BoundField DataFormatString , pemformatan ditentukan menggunakan {0:formatSpecifier}.

UnitPrice Untuk bidang, gunakan pemformatan mata uang yang ditentukan dengan memilih nilai daftar drop-down yang sesuai atau dengan mengetik {0:C} secara manual.

Memformat Harga sebagai Mata Uang

Gambar 7: Format Harga sebagai Mata Uang (Klik untuk melihat gambar ukuran penuh)

Secara deklaratif, spesifikasi pemformatan ditunjukkan sebagai parameter kedua ke Bind dalam metode atau Eval . Pengaturan yang baru saja dibuat melalui Desainer menghasilkan ekspresi pengikatan data berikut dalam markup deklaratif:

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

Menambahkan Bidang Data yang Tersisa ke Bidang Templat

Pada titik ini kami telah menampilkan dan memformat UnitPrice bidang data di Price and Inventory TemplateField, tetapi masih perlu menampilkan UnitsInStock bidang dan UnitsOnOrder . Mari kita tampilkan ini pada baris di bawah harga dan dalam tanda kurung. Dari antarmuka pengeditan templat di Perancang, markup tersebut dapat ditambahkan dengan memosisikan kursor Anda dalam templat dan cukup mengetik teks yang akan ditampilkan. Atau, markup ini dapat dimasukkan langsung dalam sintaks deklaratif.

Tambahkan markup statis, kontrol Web Label, dan sintaks pengikatan data sehingga Price and Inventory TemplateField menampilkan informasi harga dan inventori seperti:

Harga satuan
(Dalam Stok / On Order:UnitsInStock / UnitsOnOrder)

Setelah melakukan tugas ini, markup deklaratif DetailsView Anda akan terlihat mirip dengan yang berikut ini:

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

Dengan perubahan ini, kami telah mengonsolidasikan informasi harga dan inventori ke dalam satu baris DetailsView.

Informasi Harga dan Inventori Ditampilkan dalam Satu Baris

Gambar 8: Informasi Harga dan Inventori Ditampilkan dalam Satu Baris (Klik untuk melihat gambar ukuran penuh)

Langkah 3: Menyesuaikan Informasi Bidang yang Dihentikan

Kolom Products tabel Discontinued adalah nilai bit yang menunjukkan apakah produk telah dihentikan. Saat mengikat DetailsView (atau GridView) ke kontrol sumber data, bidang nilai Boolean, seperti Discontinued, diimplementasikan sebagai CheckBoxFields sedangkan bidang nilai non-Boolean, seperti ProductID, ProductName, dan sebagainya, diimplementasikan sebagai BoundFields. CheckBoxField dirender sebagai kotak centang yang dinonaktifkan yang dicentang jika nilai bidang data benar dan tidak dicentang sebaliknya.

Daripada menampilkan CheckBoxField, kita mungkin ingin menampilkan teks yang menunjukkan apakah produk dihentikan atau tidak. Untuk mencapai hal ini, kami dapat menghapus CheckBoxField dari DetailsView lalu menambahkan BoundField yang propertinya DataField diatur ke Discontinued. Luangkan waktu sejenak untuk melakukan ini. Setelah perubahan ini, DetailsView menunjukkan teks "True" untuk produk yang dihentikan dan "False" untuk produk yang masih aktif.

String Benar dan Salah Digunakan untuk Menampilkan Status Dihentikan

Gambar 9: String True dan False Digunakan untuk Menampilkan Status Dihentikan (Klik untuk melihat gambar ukuran penuh)

Bayangkan bahwa kita tidak ingin string "True" atau "False" digunakan, tetapi "YES" dan "NO", sebagai gantinya. Penyesuaian tersebut dapat dilakukan dengan bantuan TemplateField dan metode pemformatan. Metode pemformatan dapat mengambil sejumlah parameter input, tetapi harus mengembalikan HTML (sebagai string) untuk dimasukkan ke dalam templat.

Tambahkan metode pemformatan ke DetailsViewTemplateField.aspx kelas code-behind halaman bernama DisplayDiscontinuedAsYESorNO yang menerima Boolean sebagai parameter input dan mengembalikan string. Seperti yang dibahas dalam tutorial sebelumnya, metode ini harus ditandai sebagai protected atau public agar dapat diakses dari templat.

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

Metode ini memeriksa parameter input (discontinued) dan mengembalikan "YA" jika itu adalah true, "TIDAK" sebaliknya.

Catatan

Dalam metode pemformatan yang diperiksa dalam pemanggilan kembali tutorial sebelumnya bahwa kami melewati bidang data yang mungkin berisi NULL dan oleh karena itu perlu memeriksa apakah nilai properti karyawan HiredDate memiliki nilai database NULL sebelum mengakses EmployeesRowproperti 's HiredDate . Pemeriksaan seperti itu tidak diperlukan di sini karena Discontinued kolom tidak pernah dapat menetapkan nilai database NULL . Selain itu, inilah sebabnya mengapa metode dapat menerima parameter input Boolean daripada harus menerima ProductsRow instans atau parameter jenis object.

Dengan metode pemformatan ini selesai, semua yang tersisa adalah memanggilnya dari TemplateField ItemTemplate. Untuk membuat TemplateField, hapus Discontinued BoundField dan tambahkan TemplateField baru atau konversi Discontinued BoundField menjadi TemplateField. Kemudian, dari tampilan markup deklaratif, edit TemplateField sehingga hanya berisi ItemTemplate yang memanggil DisplayDiscontinuedAsYESorNO metode , meneruskan nilai properti instans ProductRow saat iniDiscontinued. Ini dapat diakses melalui Eval metode . Secara khusus, markup TemplateField akan terlihat seperti:

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

Ini akan menyebabkan DisplayDiscontinuedAsYESorNO metode dipanggil saat merender DetailsView, meneruskan ProductRow nilai instans Discontinued . Eval Karena metode mengembalikan nilai jenis object, tetapi DisplayDiscontinuedAsYESorNO metode mengharapkan parameter input jenis bool, kami melemparkan Eval nilai pengembalian metode ke bool. Metode kemudian DisplayDiscontinuedAsYESorNO akan mengembalikan "YA" atau "TIDAK" tergantung pada nilai yang diterimanya. Nilai yang dikembalikan adalah apa yang ditampilkan di baris DetailsView ini (lihat Gambar 10).

Nilai YA atau TIDAK kini ditampilkan di baris yang dihentikan

Gambar 10: Nilai YA atau TIDAK Sekarang Ditampilkan di Baris yang Dihentikan (Klik untuk melihat gambar ukuran penuh)

Ringkasan

TemplateField dalam kontrol DetailsView memungkinkan tingkat fleksibilitas yang lebih tinggi dalam menampilkan data daripada yang tersedia dengan kontrol bidang lainnya dan 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

Meskipun TemplateFields memungkinkan tingkat fleksibilitas yang lebih besar dalam penyajian data yang mendasar DetailsView, output DetailsView masih terasa sedikit kotak karena setiap bidang dirender sebagai baris dalam HTML <table>.

Kontrol FormView menawarkan tingkat fleksibilitas yang lebih besar dalam mengonfigurasi output yang dirender. FormView tidak berisi bidang melainkan hanya serangkaian templat (ItemTemplate, , EditItemTemplateHeaderTemplate, dan sebagainya). Kita akan melihat cara menggunakan FormView untuk mencapai lebih banyak kontrol tata letak yang dirender dalam tutorial berikutnya.

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.

Terima kasih khusus untuk

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