Memperkenalkan Halaman Web ASP.NET - Menampilkan Data

oleh Tom FitzMacken

Tutorial ini menunjukkan kepada Anda cara membuat database di WebMatrix dan cara menampilkan data database di halaman saat Anda menggunakan halaman Web ASP.NET (Razor). Ini mengasumsikan Anda telah menyelesaikan seri melalui Pengantar ASP.NET Pemrograman Halaman Web.

Yang akan Anda pelajari:

• Cara menggunakan alat WebMatrix untuk membuat database dan tabel database.
• Cara menggunakan alat WebMatrix untuk menambahkan data ke database.
• Cara menampilkan data dari database di halaman.
• Cara menjalankan perintah SQL di Halaman Web ASP.NET.
• Cara mengkustomisasi pembantu WebGrid untuk mengubah tampilan data dan menambahkan penomoran dan pengurutan.

Fitur/teknologi yang dibahas:

• Alat database WebMatrix.
• WebGrid Penolong.

Apa yang akan Anda Bangun

Dalam tutorial sebelumnya, Anda diperkenalkan ke ASP.NET Web Pages (file.cshtml ), ke dasar-dasar sintaks Razor, dan kepada pembantu. Dalam tutorial ini, Anda akan mulai membuat aplikasi web aktual yang akan Anda gunakan untuk sisa seri. Aplikasi ini adalah aplikasi film sederhana yang memungkinkan Anda melihat, menambahkan, mengubah, dan menghapus informasi tentang film.

Setelah selesai dengan tutorial ini, Anda akan dapat melihat daftar film yang terlihat seperti halaman ini:

Tetapi untuk memulai, Anda harus membuat database.

Pengantar Database yang Sangat Singkat

Tutorial ini hanya akan memberikan pengenalan singkat ke database. Jika Anda memiliki pengalaman database, Anda bisa melewati bagian singkat ini.

Database berisi satu atau beberapa tabel yang berisi informasi — misalnya, tabel untuk pelanggan, pesanan, dan vendor, atau untuk siswa, guru, kelas, dan nilai. Secara struktural, tabel database seperti spreadsheet. Bayangkan buku alamat khas. Untuk setiap entri dalam buku alamat (yaitu, untuk setiap orang) Anda memiliki beberapa informasi seperti nama depan, nama belakang, alamat, alamat email, dan nomor telepon.

(Baris terkadang disebut sebagai rekaman, dan kolom terkadang disebut sebagai bidang.)

Untuk sebagian besar tabel database, tabel harus memiliki kolom yang berisi nilai unik, seperti nomor pelanggan, nomor akun, dan sebagainya. Nilai ini dikenal sebagai kunci primer tabel, dan Anda menggunakannya untuk mengidentifikasi setiap baris dalam tabel. Dalam contoh, kolom ID adalah kunci utama untuk buku alamat yang ditampilkan dalam contoh sebelumnya.

Sebagian besar pekerjaan yang Anda lakukan dalam aplikasi web terdiri dari membaca informasi dari database dan menampilkannya di halaman. Anda juga akan sering mengumpulkan informasi dari pengguna dan menambahkannya ke database, atau Anda akan mengubah rekaman yang sudah ada di database. (Kami akan membahas semua operasi ini dalam rangkaian tutorial ini.)

Pekerjaan database dapat sangat kompleks dan dapat membutuhkan pengetahuan khusus. Namun, untuk set tutorial ini, Anda hanya harus memahami konsep dasar, yang semuanya akan dijelaskan saat Anda pergi.

Membuat Database

WebMatrix menyertakan alat yang memudahkan untuk membuat database dan membuat tabel dalam database. (Struktur database disebut sebagai skema database.) Untuk set tutorial ini, Anda akan membuat database yang hanya memiliki satu tabel di dalamnya — Film.

Buka WebMatrix jika Anda belum melakukannya, dan buka situs WebPagesMovies yang Anda buat di tutorial sebelumnya.

Di panel kiri, klik ruang kerja Database .

Pita berubah untuk memperlihatkan tugas terkait database. Di pita, klik Database Baru.

WebMatrix membuat database CE SQL Server (file .sdf) yang memiliki nama yang sama dengan situs Anda — WebPagesMovies.sdf. (Anda tidak akan melakukan ini di sini, tetapi Anda dapat mengganti nama file menjadi apa pun yang Anda suka, selama memiliki ekstensi .sdf .)

Membuat Tabel

Di pita, klik Tabel Baru. WebMatrix membuka perancang tabel di tab baru. (Jika opsi Tabel Baru tidak tersedia, pastikan database baru dipilih dalam tampilan pohon di sebelah kiri.)

Dalam kotak teks di bagian atas (di mana marka air berbujuk "Masukkan nama tabel"), masukkan "Film".

Panel di bawah nama tabel adalah tempat Anda menentukan kolom individual. Untuk tabel Film dalam tutorial ini, Anda hanya akan membuat beberapa kolom: ID, Judul, Genre, dan Tahun.

Dalam kotak Nama , masukkan "ID". Memasukkan nilai di sini mengaktifkan semua kontrol untuk kolom baru.

Tab ke daftar Tipe Data dan pilih int. Nilai ini menentukan bahwa kolom ID akan berisi data bilangan bulat (angka).

Catatan

Kami tidak akan menyebutnya lagi di sini (banyak), tetapi Anda dapat menggunakan gerakan keyboard Windows standar untuk menavigasi dalam kisi ini. Misalnya, Anda dapat melakukan tab di antara bidang, Anda bisa mulai mengetik untuk memilih item dalam daftar, dan sebagainya.

Tab melewati kotak Nilai Default (yaitu, biarkan kosong). Tab ke kotak centang Adalah Kunci Primer dan pilih. Opsi ini memberi tahu database bahwa kolom ID akan berisi data yang mengidentifikasi baris individual. (Artinya, setiap baris akan memiliki nilai unik di kolom ID yang dapat Anda gunakan untuk menemukan baris tersebut.)

Pilih opsi Adalah Identitas . Opsi ini memberi tahu database bahwa database harus secara otomatis menghasilkan nomor berurutan berikutnya untuk setiap baris baru. (Opsi Is Identity hanya berfungsi jika Anda juga telah memilih opsi Adalah Kunci Primer .)

Klik di baris kisi berikutnya, atau tekan Tab dua kali untuk menyelesaikan baris saat ini. Salah satu gerakan menyimpan baris saat ini dan memulai yang berikutnya. Perhatikan bahwa kolom Nilai Default sekarang mengatakan Null. (Null adalah nilai default untuk nilai default, jadi untuk diucapkan.)

Setelah Anda selesai menentukan kolom ID baru, perancang akan terlihat seperti ilustrasi ini:

Untuk membuat kolom berikutnya, klik dalam kotak di kolom Nama . Masukkan "Judul" untuk kolom lalu pilih nvarchar untuk nilai Jenis Data . Bagian "var" dari nvarchar memberi tahu database bahwa data untuk kolom ini akan menjadi string yang ukurannya mungkin bervariasi dari rekaman ke rekaman. (Awalan "n" mewakili "nasional," yang menunjukkan bahwa bidang dapat menyimpan data karakter untuk alfabet atau sistem penulisan apa pun — yaitu, bidang menyimpan data Unicode.)

Saat Anda memilih nvarchar, kotak lain muncul di mana Anda bisa memasukkan panjang maksimum untuk bidang tersebut. Masukkan 50, dengan asumsi bahwa tidak ada judul film yang akan Anda kerjakan dalam tutorial ini akan lebih panjang dari 50 karakter.

Lewati Nilai Default dan kosongkan opsi Izinkan Null . Anda tidak ingin database memperbolehkan film dimasukkan ke dalam database yang tidak memiliki judul.

Setelah selesai dan berpindah ke baris berikutnya, perancang terlihat seperti ilustrasi ini:

Ulangi langkah-langkah ini untuk membuat kolom bernama "Genre", kecuali panjangnya, atur ke hanya 30.

Buat kolom lain bernama "Tahun." Untuk jenis data, pilih nchar (bukan nvarchar) dan atur panjangnya ke 4. Untuk tahun ini, Anda akan menggunakan angka 4 digit seperti "1995" atau "2010", sehingga Anda tidak memerlukan kolom berukuran variabel.

Seperti inilah desain jadinya:

Tekan Ctrl+S atau klik tombol Simpan di toolbar Akses Cepat. Tutup perancang database dengan menutup tab.

Menambahkan beberapa contoh data

Nantinya dalam seri tutorial ini Anda akan membuat halaman di mana Anda dapat memasukkan film baru dalam formulir. Namun, untuk saat ini, Anda dapat menambahkan beberapa contoh data yang kemudian dapat Anda tampilkan di halaman.

Di ruang kerja Database di WebMatrix, perhatikan bahwa ada pohon yang memperlihatkan file .sdf yang Anda buat sebelumnya. Buka simpul untuk file .sdf baru Anda, lalu buka simpul Tabel .

Klik kanan simpul Film lalu pilih Data. WebMatrix membuka kisi tempat Anda bisa memasukkan data untuk tabel Film :

Klik kolom Judul dan masukkan "When Harry Met Sally". Pindah ke kolom Genre (Anda dapat menggunakan tombol Tab) dan masukkan "Romantic Comedy". Pindah ke kolom Tahun dan masukkan "1989":

Tekan Enter, dan WebMatrix menyimpan film baru. Perhatikan bahwa kolom ID telah diisi.

Masukkan film lain (misalnya, "Gone with the Wind", "Drama", "1939"). Kolom ID diisi lagi:

Masukkan film ketiga (misalnya, "Ghostbusters", "Comedy"). Sebagai eksperimen, biarkan kolom Tahun kosong lalu tekan Enter. Karena Anda tidak memilih opsi Izinkan Null, database memperlihatkan kesalahan:

Klik OK untuk kembali dan memperbaiki entri (tahun untuk "Ghostbusters" adalah 1984), lalu tekan Enter.

Isi beberapa film hingga Anda memiliki 8 atau lebih. (Memasukkan 8 memudahkan untuk bekerja dengan halaman nanti. Tetapi jika itu terlalu banyak, masukkan hanya beberapa untuk saat ini.) Data aktual tidak masalah.

Jika Anda memasukkan semua film tanpa kesalahan, nilai ID berurutan. Jika Anda mencoba menyimpan rekaman film yang tidak lengkap, nomor ID mungkin tidak berurutan. Jika demikian, tidak apa-apa. Angka-angka tidak memiliki arti yang melekat, dan satu-satunya hal yang penting adalah bahwa angka tersebut unik dalam tabel Film .

Tutup tab yang berisi perancang database.

Sekarang Anda dapat beralih untuk menampilkan data ini pada halaman web.

Menampilkan Data di Halaman dengan Menggunakan Pembantu WebGrid

Untuk menampilkan data di halaman, Anda akan menggunakan pembantu WebGrid . Pembantu ini menghasilkan tampilan dalam kisi atau tabel (baris dan kolom). Seperti yang akan Anda lihat, Anda akan dapat memperbaiki kisi dengan pemformatan dan fitur lainnya.

Untuk menjalankan kisi, Anda harus menulis beberapa baris kode. Beberapa baris ini akan berfungsi sebagai semacam pola untuk hampir semua akses data yang Anda lakukan dalam tutorial ini.

Catatan

Anda sebenarnya memiliki banyak opsi untuk menampilkan data di halaman; pembantunya WebGrid hanya satu. Kami memilihnya untuk tutorial ini karena ini adalah cara termampu untuk menampilkan data dan karena cukup fleksibel. Dalam set tutorial berikutnya, Anda akan melihat cara menggunakan cara yang lebih "manual" untuk bekerja dengan data di halaman, yang memberi Anda lebih banyak kontrol langsung tentang cara menampilkan data.

Di panel kiri di WebMatrix, klik ruang kerja File .

Database baru yang Anda buat ada di folder App_Data . Jika folder belum ada, WebMatrix membuatnya untuk database baru Anda. (Folder mungkin sudah ada jika Anda sebelumnya menginstal pembantu.)

Dalam tampilan pohon, pilih akar situs web. Anda harus memilih akar situs web; jika tidak, file baru mungkin ditambahkan ke folder App_Data.

Di pita, klik Baru. Dalam kotak Pilih Jenis File , pilih CSHTML.

Dalam kotak Nama , beri nama halaman baru "Movies.cshtml":

Klik tombol Ok. WebMatrix membuka file baru dengan beberapa elemen kerangka di dalamnya. Pertama, Anda akan menulis beberapa kode untuk mendapatkan data dari database. Kemudian Anda akan menambahkan markup ke halaman untuk benar-benar menampilkan data.

Menulis Kode Kueri Data

Di bagian atas halaman, di antara @{ karakter dan } , masukkan kode berikut. (Pastikan Anda memasukkan kode ini antara kurung kurawal buka dan tutup.)

var db = Database.Open("WebPagesMovies");
var selectedData = db.Query("SELECT * FROM Movies");
var grid = new WebGrid(source: selectedData);

Baris pertama membuka database yang Anda buat sebelumnya, yang selalu merupakan langkah pertama sebelum melakukan sesuatu dengan database. Anda memberi tahu Database.Open nama metode database untuk dibuka. Perhatikan bahwa Anda tidak menyertakan .sdf dalam nama. Metode ini Open mengasumsikan bahwa ia mencari file .sdf (yaitu, WebPagesMovies.sdf) dan bahwa file .sdf berada di folder App_Data . (Sebelumnya kami mencatat bahwa folder App_Data dicadangkan; skenario ini adalah salah satu tempat di mana ASP.NET membuat asumsi tentang nama itu.)

Ketika database dibuka, referensi ke dalamnya dimasukkan ke dalam variabel bernama db. (Yang bisa dinamai apa pun.) Variabelnya db adalah bagaimana Anda akhirnya berinteraksi dengan database.

Baris kedua benar-benar mengambil data database dengan menggunakan Query metode . Perhatikan cara kerja kode ini: db variabel memiliki referensi ke database yang dibuka, dan Anda memanggil Query metode dengan menggunakan db variabel (db.Query).

Kueri itu sendiri adalah pernyataan SQL Select . (Untuk sedikit latar belakang tentang SQL, lihat penjelasannya nanti.) Dalam pernyataan , Movies mengidentifikasi tabel untuk dikueri. Karakter * menentukan bahwa kueri harus mengembalikan semua kolom dari tabel. (Anda juga dapat mencantumkan kolom satu per satu, dipisahkan dengan koma.)

Hasil kueri, jika ada, dikembalikan dan tersedia dalam selectedData variabel. Sekali lagi, variabel dapat diberi nama apa pun.

Akhirnya, baris ketiga memberi tahu ASP.NET bahwa Anda ingin menggunakan instans pembantu WebGrid . Anda membuat (membuat instans) objek pembantu dengan menggunakan new kata kunci dan meneruskannya hasil kueri melalui selectedData variabel . Objek baru WebGrid , bersama dengan hasil kueri database, tersedia dalam grid variabel . Anda akan memerlukan hasil tersebut dalam sesaat untuk benar-benar menampilkan data di halaman.

Pada tahap ini, database telah dibuka, Anda telah mendapatkan data yang Anda inginkan, dan Anda telah menyiapkan pembantu dengan data tersebut WebGrid . Selanjutnya adalah membuat markup di halaman.

Tip

Bahasa Kueri Terstruktur (SQL)

SQL adalah bahasa yang digunakan dalam sebagian besar database relasional untuk mengelola data dalam database. Ini termasuk perintah yang memungkinkan Anda mengambil data dan memperbaruinya, dan yang memungkinkan Anda membuat, memodifikasi, dan mengelola data dalam tabel database. SQL berbeda dari bahasa pemrograman (seperti C#). Dengan SQL, Anda memberi tahu database apa yang Anda inginkan, dan itu adalah tugas database untuk mencari tahu cara mendapatkan data atau melakukan tugas. Berikut adalah contoh beberapa perintah SQL dan apa yang mereka lakukan:

Select * From Movies

SELECT ID, Name, Price FROM Product WHERE Price > 10.00 ORDER BY Name

Pernyataan pertama Select mendapatkan semua kolom (ditentukan oleh *) dari tabel Film .

Pernyataan kedua Select mengambil kolom ID, Nama, dan Harga dari rekaman dalam tabel Produk yang nilai kolom Harganya lebih dari 10. Perintah mengembalikan hasil dalam urutan alfabet berdasarkan nilai kolom Nama. Jika tidak ada rekaman yang cocok dengan kriteria harga, perintah mengembalikan set kosong.

INSERT INTO Product (Name, Description, Price) VALUES ('Croissant', 'A flaky delight', 1.99)

Perintah ini menyisipkan rekaman baru ke dalam tabel Produk , mengatur kolom Nama ke "Croissant", kolom Deskripsi ke "Kelemahan", dan harganya menjadi 1,99.

Perhatikan bahwa saat Anda menentukan nilai non-numerik, nilai diapit dalam tanda kutip tunggal (bukan tanda kutip ganda, seperti dalam C#). Anda menggunakan tanda kutip ini di sekitar nilai teks atau tanggal, tetapi tidak di sekitar angka.

DELETE FROM Product WHERE ExpirationDate < '01/01/2008'

Perintah ini menghapus rekaman dalam tabel Produk yang kolom tanggal kedaluwarsanya lebih awal dari 1 Januari 2008. (Perintah mengasumsikan bahwa tabel Produk memiliki kolom seperti itu, tentu saja.) Tanggal dimasukkan di sini dalam format MM/DD/YYYY, tetapi harus dimasukkan dalam format yang digunakan untuk lokal Anda.

Perintah Insert dan Delete tidak mengembalikan tataan hasil. Sebaliknya, mereka mengembalikan angka yang memberi tahu Anda berapa banyak rekaman yang terpengaruh oleh perintah.

Untuk beberapa operasi ini (seperti menyisipkan dan menghapus rekaman), proses yang meminta operasi harus memiliki izin yang sesuai dalam database. Itulah sebabnya untuk database produksi Anda sering harus memberikan nama pengguna dan kata sandi saat Anda tersambung ke database.

Ada puluhan perintah SQL, tetapi semuanya mengikuti pola seperti perintah yang Anda lihat di sini. Anda bisa menggunakan perintah SQL untuk membuat tabel database, menghitung jumlah rekaman dalam tabel, menghitung harga, dan melakukan lebih banyak operasi.

Menambahkan Markup untuk Menampilkan Data

<head> Di dalam elemen , atur konten <title> elemen ke "Film":

<head>
    <meta charset="utf-8" />
    <title>Movies</title>
</head>

<body> Di dalam elemen halaman, tambahkan yang berikut ini:

<h1>Movies</h1>
<div>
    @grid.GetHtml()
</div>

Itu saja. Variabel grid adalah nilai yang Anda buat saat membuat WebGrid objek dalam kode sebelumnya.

Dalam tampilan pohon WebMatrix, klik kanan halaman dan pilih Luncurkan di browser. Anda akan melihat sesuatu seperti halaman ini:

Klik link judul kolom untuk mengurutkan menurut kolom tersebut. Mampu mengurutkan dengan mengklik judul adalah fitur yang disertakan dalam pembantu WebGrid .

Metode GetHtml , seperti namanya, menghasilkan markup yang menampilkan data. Secara default, GetHtml metode ini menghasilkan elemen HTML <table> . (Jika mau, Anda dapat memverifikasi penyajian dengan melihat sumber halaman di browser.)

Memodifikasi Tampilan Kisi

Menggunakan pembantu WebGrid seperti yang baru saja Anda lakukan itu mudah, tetapi tampilan yang dihasilkan biasa. Pembantu WebGrid memiliki semua jenis opsi yang memungkinkan Anda mengontrol bagaimana data ditampilkan. Ada terlalu banyak untuk dijelajahi dalam tutorial ini, tetapi bagian ini akan memberi Anda gambaran tentang beberapa opsi tersebut. Beberapa opsi tambahan akan dibahas dalam tutorial selanjutnya dalam seri ini.

Menentukan Kolom Individual untuk Ditampilkan

Untuk memulai, Anda dapat menentukan bahwa Anda hanya ingin menampilkan kolom tertentu. Secara default, seperti yang telah Anda lihat, kisi memperlihatkan keempat kolom dari tabel Film .

Dalam file Movies.cshtml , ganti @grid.GetHtml() markup yang baru saja Anda tambahkan dengan yang berikut ini:

@grid.GetHtml(
    columns: grid.Columns(
        grid.Column("Title"),
        grid.Column("Genre"),
        grid.Column("Year")
    )
)

Untuk memberi tahu pembantu kolom mana yang akan ditampilkan, Anda menyertakan columns parameter untuk metode dan GetHtml meneruskan kumpulan kolom. Dalam koleksi, Anda menentukan setiap kolom yang akan disertakan. Anda menentukan kolom individual untuk ditampilkan dengan menyertakan grid.Column objek, dan meneruskan nama kolom data yang Anda inginkan. (Kolom ini harus disertakan dalam hasil kueri SQL — pembantu WebGrid tidak dapat menampilkan kolom yang tidak dikembalikan oleh kueri.)

Luncurkan halaman Movies.cshtml di browser lagi, dan kali ini Anda mendapatkan tampilan seperti berikut ini (perhatikan bahwa tidak ada kolom ID yang ditampilkan):

Mengubah Tampilan Kisi

Ada beberapa opsi lagi untuk menampilkan kolom, beberapa di antaranya akan dieksplorasi dalam tutorial selanjutnya dalam set ini. Untuk saat ini, bagian ini akan memperkenalkan Anda ke cara-cara di mana Anda dapat menata kisi secara keseluruhan.

Di dalam bagian <head> halaman, tepat sebelum tag penutup </head> , tambahkan elemen berikut <style> :

<style type="text/css">
  .grid { margin: 4px; border-collapse: collapse; width: 600px; }
  .grid th, .grid td { border: 1px solid #C0C0C0; padding: 5px; }
  .head { background-color: #E8E8E8; font-weight: bold; color: #FFF; }
  .alt { background-color: #E8E8E8; color: #000; }
</style>

Markup CSS ini mendefinisikan kelas bernama grid, head, dan sebagainya. Anda juga dapat menempatkan definisi gaya ini dalam file .css terpisah dan menautkan ke halaman. (Bahkan, Anda akan melakukannya nanti dalam set tutorial ini.) Tetapi untuk memudahkan tutorial ini, mereka berada di dalam halaman yang sama yang menampilkan data.

Sekarang Anda bisa mendapatkan pembantu WebGrid untuk menggunakan kelas gaya ini. Pembantu memiliki sejumlah properti (misalnya, tableStyle) hanya untuk tujuan ini — Anda menetapkan nama kelas gaya CSS kepada mereka, dan nama kelas tersebut dirender sebagai bagian dari markup yang dirender oleh pembantu.

grid.GetHtml Ubah markup sehingga sekarang terlihat seperti kode ini:

@grid.GetHtml(
    tableStyle: "grid",
    headerStyle: "head",
    alternatingRowStyle: "alt",
    columns: grid.Columns(
        grid.Column("Title"),
        grid.Column("Genre"),
        grid.Column("Year")
    )
)

Yang baru di sini adalah Anda telah menambahkan tableStyleparameter , , headerStyledan alternatingRowStyle ke GetHtml metode . Parameter ini telah diatur ke nama gaya CSS yang Anda tambahkan beberapa saat yang lalu.

Jalankan halaman, dan kali ini Anda melihat kisi yang terlihat jauh lebih biasa daripada sebelumnya:

Untuk melihat metode yang GetHtml dihasilkan, Anda dapat melihat sumber halaman di browser. Kami tidak akan menjelaskan secara rinci di sini, tetapi poin pentingnya adalah bahwa dengan menentukan parameter seperti tableStyle, Anda menyebabkan kisi menghasilkan tag HTML seperti berikut:

<table class="grid">

Tag <table> telah memiliki atribut yang class ditambahkan ke dalamnya yang mereferensikan salah satu aturan CSS yang Anda tambahkan sebelumnya. Kode ini menunjukkan pola dasar — parameter yang berbeda untuk metode ini GetHtml memungkinkan Anda mereferensikan kelas CSS yang kemudian dihasilkan metode bersama dengan markup. Apa yang Anda lakukan dengan kelas CSS terserah Anda.

Menambahkan Halaman

Sebagai tugas terakhir untuk tutorial ini, Anda akan menambahkan halaman ke kisi. Saat ini tidak masalah untuk menampilkan semua film Anda sekaligus. Tetapi jika Anda menambahkan ratusan film, tampilan halaman akan menjadi panjang.

Di kode halaman, ubah baris yang membuat WebGrid objek ke kode berikut:

var grid = new WebGrid(source: selectedData, rowsPerPage: 3);

Satu-satunya perbedaan dari sebelumnya adalah Anda telah menambahkan rowsPerPage parameter yang diatur ke 3.

Jalankan halaman. Kisi menampilkan 3 baris pada satu waktu, ditambah tautan navigasi yang memungkinkan Anda menelusuri halaman film di database Anda:

Berikutnya

Dalam tutorial berikutnya, Anda akan mempelajari cara menggunakan kode Razor dan C# untuk mendapatkan input pengguna dalam formulir. Anda akan menambahkan kotak pencarian ke halaman Film sehingga Anda dapat menemukan film berdasarkan judul atau genre.

Daftar Lengkap untuk Halaman Film

@{
    var db = Database.Open("WebPagesMovies");
    var selectedData = db.Query("SELECT * FROM Movies");
    var grid = new WebGrid(source: selectedData, rowsPerPage: 3);
}

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Movies</title>
        <style type="text/css">
          .grid { margin: 4px; border-collapse: collapse; width: 600px; }
          .grid th, .grid td { border: 1px solid #C0C0C0; padding: 5px; }
          .head { background-color: #E8E8E8; font-weight: bold; color: #FFF; }
          .alt { background-color: #E8E8E8; color: #000; }
        </style>
    </head>
    <body>
        <h1>Movies</h1>
        <div>
            @grid.GetHtml(
                tableStyle: "grid",
                headerStyle: "head",
                alternatingRowStyle: "alt",
                columns: grid.Columns(
                    grid.Column("Title"),
                    grid.Column("Genre"),
                    grid.Column("Year")
                )
            )
        </div>
    </body>
</html>

Sumber Daya Tambahan

• Pengantar Pemrograman Web ASP.NET Menggunakan Sintaks Razor

SebelumnyaBerikutnya