Bagikan melalui

Tutorial: Menghasilkan tampilan untuk EF Database First dengan aplikasi MVC ASP.NET

Dengan menggunakan MVC, Entity Framework, dan ASP.NET Scaffolding, Anda dapat membuat aplikasi web yang menyediakan antarmuka ke database yang ada. Seri tutorial ini menunjukkan kepada Anda cara membuat kode secara otomatis yang memungkinkan pengguna menampilkan, mengedit, membuat, dan menghapus data yang berada dalam tabel database. Kode yang dihasilkan sesuai dengan kolom dalam tabel database.

Tutorial ini berfokus pada penggunaan perancah ASP.NET untuk menghasilkan pengontrol dan tampilan.

Di tutorial ini, Anda akan:

  • Tambahkan perancah
  • Menambahkan tautan ke tampilan baru
  • Menampilkan tampilan siswa
  • Menampilkan tampilan pendaftaran

Prasyarat

Tambahkan perancah

Anda siap untuk menghasilkan kode yang akan menyediakan operasi data standar untuk kelas model. Anda menambahkan kode dengan menambahkan item perancah. Ada banyak opsi untuk jenis perancah yang dapat Anda tambahkan; dalam tutorial ini, perancah akan menyertakan pengontrol dan tampilan yang sesuai dengan model Siswa dan Pendaftaran yang Anda buat di bagian sebelumnya.

Untuk mempertahankan konsistensi dalam proyek, Anda akan menambahkan pengontrol baru ke folder Pengontrol yang ada. Klik kanan folder Pengontrol, dan pilih Tambahkan>Item Perancah Baru.

Pilih Pengontrol MVC 5 dengan tampilan, menggunakan opsi Kerangka Kerja Entitas. Opsi ini akan menghasilkan pengontrol dan tampilan untuk memperbarui, menghapus, membuat, dan menampilkan data dalam model Anda.

tambahkan pengontrol mvc

Pilih Siswa (ContosoSite.Models) untuk kelas model dan pilih ContosoUniversityDataEntities (ContosoSite.Models) untuk kelas konteks. Pertahankan nama pengontrol sebagai StudentsController.

Klik Tambahkan.

Jika Anda menerima kesalahan, itu mungkin karena Anda tidak membangun proyek di bagian sebelumnya. Jika demikian, coba buat proyek, lalu tambahkan item yang di-scaffold lagi.

Setelah proses pembuatan kode selesai, Anda akan melihat pengontrol dan tampilan baru di folder Pengontrol dan Siswa Tampilan>proyek Anda.

Lakukan langkah yang sama lagi, tetapi tambahkan perancah untuk kelas Pendaftaran . Setelah selesai, Anda memiliki file EnrollmentsController.cs , dan folder di bawah Tampilan bernama Pendaftaran dengan tampilan Buat, Hapus, Detail, Edit, dan Indeks.

Untuk memudahkan Anda menavigasi ke tampilan baru, Anda bisa menambahkan beberapa hyperlink ke tampilan Indeks untuk siswa dan pendaftaran. Buka file di Views>Home>Index.cshtml, yang merupakan beranda untuk situs Anda. Tambahkan kode berikut di bawah jumbotron.

<div>
    @Html.ActionLink("List of students", "Index", "Students")<br />
    @Html.ActionLink("List of enrollments", "Index", "Enrollments")
</div>

Untuk metode ActionLink, parameter pertama adalah teks yang ditampilkan di tautan. Parameter kedua adalah tindakan dan parameter ketiga adalah nama pengontrol. Misalnya, tautan pertama menunjuk ke tindakan Indeks di StudentsController. Hyperlink aktual dibangun dari nilai-nilai ini. Tautan pertama pada akhirnya membawa pengguna ke file Index.cshtml dalam folder Views/Students .

Menampilkan tampilan siswa

Anda akan memverifikasi bahwa kode yang ditambahkan ke proyek Anda menampilkan daftar siswa dengan benar, dan memungkinkan pengguna mengedit, membuat, atau menghapus catatan siswa dalam database.

Klik kanan file Views>Home>Index.cshtml, dan pilih Tampilkan di Browser. Pada beranda aplikasi, pilih Daftar siswa.

Cuplikan layar yang memperlihatkan Halaman Beranda NET titik S P Saya. Daftar siswa dilingkari dengan warna merah.

Pada halaman Indeks , perhatikan daftar siswa dan tautan untuk mengubah data ini. Pilih tautan Buat Baru dan berikan beberapa nilai untuk siswa baru. Klik Buat, dan perhatikan siswa baru ditambahkan ke daftar Anda.

Kembali ke halaman Indeks , pilih tautan Edit , dan ubah beberapa nilai untuk siswa. Klik Simpan, dan perhatikan bahwa catatan siswa telah diubah.

Terakhir, pilih tautan Hapus dan konfirmasikan bahwa Anda ingin menghapus rekaman dengan mengklik tombol Hapus .

Tanpa menulis kode apa pun, Anda telah menambahkan tampilan yang melakukan operasi umum pada data dalam tabel Siswa.

Anda mungkin telah memperhatikan bahwa label teks untuk bidang didasarkan pada properti database (seperti LastName) yang belum tentu apa yang ingin Anda tampilkan di halaman web. Misalnya, Anda mungkin lebih suka label menjadi Nama Belakang. Anda akan memperbaiki masalah tampilan ini nanti dalam tutorial.

Menampilkan tampilan pendaftaran

Database Anda menyertakan hubungan satu-ke-banyak antara tabel Siswa dan Pendaftaran, dan hubungan satu-ke-banyak antara tabel Kursus dan Pendaftaran. Tampilan untuk Pendaftaran menangani hubungan ini dengan benar. Navigasikan ke halaman beranda untuk situs Anda dan pilih tautan Daftar pendaftaran lalu tautan Buat Baru .

Tampilan menampilkan formulir untuk membuat rekaman pendaftaran baru. Secara khusus, perhatikan bahwa formulir berisi daftar drop-down CourseID dan daftar drop-down StudentID . Keduanya diisi dengan nilai dari tabel terkait.

Selain itu, validasi nilai yang disediakan secara otomatis diterapkan berdasarkan jenis data bidang. Nilai memerlukan angka, sehingga pesan kesalahan ditampilkan jika Anda mencoba memberikan nilai yang tidak kompatibel: Bidang Nilai harus berupa angka.

Anda telah memverifikasi bahwa tampilan yang dibuat secara otomatis memungkinkan pengguna untuk bekerja dengan data dalam database. Dalam tutorial berikutnya dalam seri ini, Anda akan memperbarui database dan membuat perubahan yang sesuai dalam aplikasi web.

Langkah berikutnya

Di tutorial ini, Anda akan:

  • Menambahkan perancah
  • Menambahkan tautan ke tampilan baru
  • Tampilan siswa yang ditampilkan
  • Tampilan pendaftaran yang ditampilkan

Lanjutkan ke tutorial berikutnya untuk mempelajari cara mengubah database.

Mengubah database

  • Last updated on