Menggunakan Templat FormView (VB)

2025-04-30

Tidak seperti DetailsView, FormView tidak terdiri dari bidang. Sebagai gantinya, FormView dirender menggunakan templat. Dalam tutorial ini kita akan memeriksa menggunakan kontrol FormView untuk menyajikan tampilan data yang kurang kaku.

Pendahuluan

Dalam dua tutorial terakhir kita melihat cara menyesuaikan output kontrol GridView dan DetailsView menggunakan TemplateFields. TemplateFields memungkinkan konten untuk bidang tertentu disesuaikan dengan sangat baik, tetapi pada akhirnya baik GridView dan DetailsView memiliki tampilan yang agak kotak, menyerupai kisi. Untuk banyak skenario, tata letak bergaya kisi sangat ideal, tetapi terkadang diperlukan tampilan yang lebih mengalir dan kurang kaku. Saat menampilkan satu rekaman, tata letak fluida seperti itu dimungkinkan menggunakan kontrol FormView.

Tidak seperti DetailsView, FormView tidak terdiri dari bidang. Anda tidak dapat menambahkan BoundField atau TemplateField ke FormView. Sebagai gantinya, FormView dirender menggunakan templat. Anggap formView sebagai kontrol DetailsView yang berisi satu TemplateField. FormView mendukung templat berikut:

ItemTemplate digunakan untuk merender rekaman tertentu yang ditampilkan di FormView
HeaderTemplate digunakan untuk menentukan baris header opsional
FooterTemplate digunakan untuk menentukan baris footer opsional
EmptyDataTemplate ketika FormView DataSource tidak memiliki rekaman apa pun, EmptyDataTemplate digunakan sebagai pengganti ItemTemplate untuk merender markup kontrol
PagerTemplate dapat digunakan untuk menyesuaikan antarmuka penghalamanan untuk FormViews yang mengaktifkan pembagian halaman
EditItemTemplate / InsertItemTemplate digunakan untuk menyesuaikan antarmuka pengeditan atau menyisipkan antarmuka untuk FormViews yang mendukung fungsionalitas tersebut

Dalam tutorial ini kita akan memeriksa menggunakan kontrol FormView untuk menyajikan tampilan produk yang kurang kaku. Daripada memiliki bidang untuk nama, kategori, pemasok, dan sebagainya, FormView ItemTemplate akan menampilkan nilai-nilai ini menggunakan kombinasi elemen header dan <table> (lihat Gambar 1).

Gambar 1: FormView Memecah Keluar dari Tata Letak Grid-Like Terlihat di DetailsView (Klik untuk melihat gambar ukuran penuh)

Langkah 1: Mengikat Data ke FormView

FormView.aspx Buka halaman dan seret FormView dari Kotak Alat ke Perancang. Saat pertama kali menambahkan FormView, itu muncul sebagai kotak abu-abu, menginstruksikan kepada kami bahwa ItemTemplate diperlukan.

Gambar 2: FormView Tidak Dapat Dirender di Perancang Hingga ItemTemplate Disediakan (Klik untuk melihat gambar ukuran penuh)

ItemTemplate dapat dibuat dengan tangan (melalui sintaks deklaratif) atau dapat dibuat secara otomatis dengan mengikat FormView ke kontrol sumber data melalui Perancang. Pembuatan otomatis ItemTemplate ini berisi HTML yang mencantumkan nama setiap bidang dan kontrol Label yang propertinya Text terikat ke nilai bidang. Pendekatan ini juga secara otomatis membuat InsertItemTemplate dan EditItemTemplate, yang keduanya diisi dengan kontrol input untuk setiap bidang data yang dikembalikan oleh kontrol sumber data.

Jika Anda ingin membuat templat secara otomatis, tambahkan kontrol ObjectDataSource baru dari tag pintar FormView yang memanggil metode ProductsBLL dari kelas GetProducts(). Ini akan membuat FormView dengan ItemTemplate, , InsertItemTemplatedan EditItemTemplate. Dari tampilan Sumber, hapus InsertItemTemplate dan EditItemTemplate karena kami belum tertarik untuk membuat FormView yang mendukung pengeditan atau penyisipan. Selanjutnya, bersihkan markup dalam ItemTemplate sehingga kita memiliki awal yang bersih untuk bekerja.

Jika Anda lebih suka membangun ItemTemplate secara manual, Anda dapat menambahkan dan mengonfigurasi ObjectDataSource dengan menyeretnya dari Kotak Alat ke Perancang. Namun, jangan atur sumber data FormView dari Perancang. Sebagai gantinya, buka tampilan Sumber dan atur properti FormView DataSourceID secara manual ke ID nilai ObjectDataSource. Selanjutnya, tambahkan ItemTemplatesecara manual .

Terlepas dari pendekatan apa yang Anda putuskan untuk diambil, pada titik ini markup deklaratif FormView Anda akan terlihat seperti:

<asp:FormView ID="FormView1" runat="server" DataSourceID="ObjectDataSource1">
    <ItemTemplate>

    </ItemTemplate>
</asp:FormView>

Luangkan waktu sejenak untuk memeriksa kotak centang Aktifkan Halaman di tag pintar FormView; ini akan menambahkan AllowPaging="True" atribut ke sintaks deklaratif FormView. Selain itu, atur properti EnableViewState ke False.

Langkah 2: Menentukan`ItemTemplate` Markup

Dengan FormView terikat ke kontrol ObjectDataSource dan dikonfigurasi untuk mendukung penomoran halaman, kita siap untuk menentukan konten untuk ItemTemplate. Untuk tutorial ini, mari tampilkan nama produk dalam tajuk <h3>. Setelah itu, mari kita gunakan HTML <table> untuk menampilkan properti produk yang tersisa dalam tabel empat kolom di mana kolom pertama dan ketiga mencantumkan nama properti dan daftar kedua dan keempat nilainya.

Markup ini dapat dimasukkan melalui antarmuka pengeditan templat FormView di Perancang atau dimasukkan secara manual melalui sintaks deklaratif. Saat bekerja dengan templat, saya biasanya merasa lebih cepat untuk bekerja langsung dengan sintaks deklaratif, tetapi jangan ragu untuk menggunakan teknik apa pun yang paling nyaman bagi Anda.

Markup berikut menunjukkan markup deklaratif dari FormView setelah struktur ItemTemplate selesai:

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

Perhatikan bahwa sintaks pengikatan data - <%# Eval("ProductName") %>, misalnya dapat disuntikkan langsung ke output templat. Artinya, tidak perlu ditetapkan ke properti Text dari kontrol Label. Misalnya, kita memiliki nilai yang ditampilkan dalam sebuah elemen menggunakan ProductName, yang untuk produk Chai akan tampil sebagai <h3>.

Kelas ProductPropertyLabel dan ProductPropertyValue CSS digunakan untuk menentukan gaya nama dan nilai properti produk di <table>. Kelas CSS ini didefinisikan dalam Styles.css dan menyebabkan nama properti ditebalkan dan diratakan ke kanan serta menambahkan padding ke nilai properti.

Karena tidak ada CheckBoxFields yang tersedia dengan FormView, untuk menampilkan Discontinued nilai sebagai kotak centang, kita harus menambahkan kontrol CheckBox kita sendiri. Properti Enabled diatur ke False, menjadikannya baca-saja, dan properti CheckBox Checked terikat ke nilai Discontinued bidang data.

Dengan lengkapnya ItemTemplate, informasi produk ditampilkan dengan cara yang jauh lebih lancar. Bandingkan output DetailsView dari tutorial terakhir (Gambar 3) dengan output yang dihasilkan oleh FormView dalam tutorial ini (Gambar 4).

Gambar 3: Output Gambar Detail Kaku (Klik untuk melihat gambar ukuran penuh)

Gambar 4: Output dari Fluid FormView (Klik untuk melihat gambar ukuran penuh)

Ringkasan

Meskipun kontrol GridView dan DetailsView dapat menyesuaikan output mereka menggunakan TemplateFields, keduanya masih menyajikan data mereka dalam format yang mirip dengan grid atau kisi. Untuk saat-saat ketika satu rekaman perlu ditampilkan menggunakan tata letak yang kurang kaku, FormView adalah pilihan yang ideal. Seperti DetailsView, FormView merender satu rekaman dari komponennya DataSource, tetapi tidak seperti DetailsView, FormView hanya terdiri dari templat dan tidak mendukung bidang.

Seperti yang kita lihat dalam tutorial ini, FormView memungkinkan tata letak yang lebih fleksibel saat menampilkan satu rekaman. Dalam tutorial mendatang, kita akan memeriksa kontrol DataList dan Repeater, yang memberikan tingkat fleksibilitas yang sama dengan FormsView, tetapi dapat menampilkan beberapa rekaman (seperti GridView).

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 utama untuk tutorial ini adalah E.R. Gilmore. Tertarik untuk meninjau artikel MSDN saya yang akan datang? Jika demikian, hubungi saya di mitchell@4GuysFromRolla.com.

Sebelumnya Berikutnya

Bagikan melalui