DreamwaverMX dan ASP.NET(2)

2. Gunakan komponen ASP.NET DataGrid untuk menampilkan data

Pengenalan konten terkait:

ASP.NET hadir dengan banyak komponen web untuk mempercepat proses pengeditan halaman web. Mari kita gunakan contoh global, tutorial yang disertakan dengan Dreamwaver MX, untuk mendemonstrasikan cara menggunakan komponen ini untuk menampilkan data dalam database.

1. Tautan database dan tampilkan data dengan DataGrid

Ada database global.mdb contoh ini di aset di direktori halaman web. Tujuan kami adalah untuk menampilkan data berbagai wilayah berdasarkan nilai Region_id di tabel lokasi di database ini. (Anda dapat menggunakan Access untuk membuka database ini)

Kita dapat mengganti nama file location3.htm menjadi location3.aspx (akhiran file jendela web ASP.NET adalah aspx) dan kemudian mengeditnya.



[Gambar 2-1 Halaman yang perlu diubah]

Mari kita hapus bagian statis sederhana di tengah dan gunakan DataGrid ASP.NET untuk mengimplementasikan fungsinya.



[Gambar 2-2 Hapus bagian statis halaman]
Langkah selanjutnya adalah menghubungkan ke database. Klik panel Aplikasi di sebelah kanan, pilih Database, dan klik tanda +.

Pilih koneksi OLE DB.



[Gambar 2-3 Panel aplikasi]

Kemudian masuk ke kotak dialog Koneksi OLE DB. Di sini Anda dapat menulis tangan kode database tautan, atau membuat kode secara otomatis. Beri nama lokasi Nama Koneksi, klik Bangun, dan kode akan dibuat secara otomatis melalui wizard.



[Gambar 2-4 kotak dialog Koneksi OLE DB]

Setelah masuk ke halaman Data Link Properties, pilih Provider untuk mengatur mesin database.

Yang menakjubkan di bawah ini adalah ia mendukung 21 metode koneksi database termasuk SQL server, Oracle, dll.



[Gambar 2-5 Halaman yang disediakan mesin database]

Ini adalah salah satu keunggulan .NET, mendukung banyak database. Ini menggunakan ADO.NET. Setelah beberapa saat, string koneksi yang kami hasilkan menggunakan wizard ini ditulis sesuai dengan ADO.NET.

Karena database yang akan kita tautkan adalah database Access2000, kita pilih Penyedia Microsoft Jet 4.0 OLE DB dan klik Berikutnya.

Klik tombol di sebelah 1.Pilih atau masukkan nama database untuk memilih database yang ingin Anda tautkan.

Batalkan Nama pengguna dan Kata Sandi di 2.Masukkan informasi untuk masuk ke database



[Gambar 2-6 Tautan pengaturan]

Atur izin baca di Tingkat Lanjut. Pilih Baca, BacaTulis,Tulis dan klik OK.



[Gambar 2-7 Mengatur izin]

Tambahkan nama Koneksi dan klik Uji untuk menguji tautan basis data. Jika tautan basis data berhasil, klik OK. Selamat,

Anda telah menautkan database ke situs Anda. Langkah selanjutnya adalah menampilkannya menggunakan DataGrid

Juga di panel Aplikasi, pilih Perilaku Server.

Selesaikan pengaturan terlebih dahulu, klik terapkan, dan program akan secara otomatis menyebarkan situs dan menyalin folder DreamweaverCtrls.dll, web.config dan _mmServerScripts ke direktori situs, yang merupakan file yang diperlukan untuk menggunakan Dreamweaver MX untuk membuat halaman web ASP.net.



[Gambar 2-8 Situs Penerapan]
Pada saat yang sama, Anda harus terlebih dahulu membuat folder bin di direktori root situs web dan menyalin file DreamweaverCtrls.dll ke folder ini.

Klik tanda + untuk membuat DataSet baru terlebih dahulu.



[Gambar 2-9 Tambahkan Kumpulan Data]

Koneksi untuk memilih sumber data, Tabel untuk memilih tabel, Kolom untuk memilih item, dan Filter digunakan untuk memfilter data. Karena halaman ini menampilkan data dari Eropa, Nilai yang Dimasukkan = 3 diatur. Pada Kegagalan, Go To digunakan untuk menangani halaman yang melompat ke ketika terjadi kesalahan dalam membaca data.



[Gambar 2-10 Membuat kumpulan data]

Setelah berhasil membuat DataSet, Anda dapat membuat DataGrid. Klik tanda + dan pilih DataGrid



[Gambar 2-11 Tambahkan DataGrid]

Pilih kumpulan rekaman yang diperlukan di Kumpulan Data, atur apakah akan menggunakan tampilan paging dan jumlah rekaman per halaman yang ditampilkan di paging, atur metode bilah navigasi di Navigasi, dan tambahkan atau hapus item yang ditampilkan di Kolom.



[Gambar 2-12 Mengatur DataGrid]

Klik Edit untuk mengatur judul header. Setelah memasukkan judul, klik OK untuk konfirmasi.



[Gambar 2-13 Judul pengaturan]

Klik OK untuk menambahkan DataGrid.



[Gambar 2-14 Halaman pratinjau]

Di halaman pratinjau Anda dapat melihat area di mana DataGrid telah ditambahkan. Tekan F12 untuk melihat halaman tersebut.

Di bawah ini adalah halaman setelah dijalankan.



[Gambar 2-15 Halaman setelah dijalankan]
2.Ubah properti DataGrid

Pengenalan konten terkait:

Melihat komponen ini, apakah menurut Anda warnanya kurang cantik? Kalau begitu, mari kita ubah. Komponen DataGrid memiliki banyak properti yang dapat digunakan untuk mengubah gaya DataGrid.

Analisis kode