Menampilkan Tabel Data Database (VB)

oleh Microsoft

Unduh PDF

Dalam tutorial ini, saya menunjukkan dua metode untuk menampilkan sekumpulan rekaman database. Saya memperlihatkan dua metode pemformatan sekumpulan rekaman database dalam tabel HTML. Pertama, saya memperlihatkan bagaimana Anda bisa memformat rekaman database langsung dalam tampilan. Selanjutnya, saya menunjukkan bagaimana Anda bisa memanfaatkan parsial saat memformat rekaman database.

Tujuan dari tutorial ini adalah untuk menjelaskan bagaimana Anda dapat menampilkan tabel HTML data database dalam aplikasi MVC ASP.NET. Pertama, Anda mempelajari cara menggunakan alat perancah yang disertakan dalam Visual Studio untuk menghasilkan tampilan yang menampilkan sekumpulan rekaman secara otomatis. Selanjutnya, Anda mempelajari cara menggunakan sebagian sebagai templat saat memformat rekaman database.

Membuat Kelas Model

Kita akan menampilkan kumpulan rekaman dari tabel database Film. Tabel database Film berisi kolom berikut ini:

Nama Kolom	Jenis Data	Perbolehkan Null
Id	Int	Salah
Judul	Nvarchar(200)	FALSE
direktur	NVarchar(50)	Salah
DateReleased	DateTime	Salah

Untuk mewakili tabel Film di aplikasi MVC ASP.NET kami, kita perlu membuat kelas model. Dalam tutorial ini, kami menggunakan Microsoft Entity Framework untuk membuat kelas model kami.

Catatan

Dalam tutorial ini, kami menggunakan Microsoft Entity Framework. Namun, penting untuk dipahami bahwa Anda dapat menggunakan berbagai teknologi yang berbeda untuk berinteraksi dengan database dari aplikasi MVC ASP.NET termasuk LINQ ke SQL, NHibernate, atau ADO.NET.

Ikuti langkah-langkah berikut untuk meluncurkan Wizard Model Data Entitas:

1. Klik kanan folder Model di jendela Penjelajah Solusi dan pilih opsi menu Tambahkan, Item Baru.
2. Pilih Kategori data dan pilih templat Model Data Entitas ADO.NET .
3. Beri model data Anda nama MoviesDBModel.edmx dan klik tombol Tambahkan .

Setelah Anda mengklik tombol Tambahkan, Wizard Model Data Entitas muncul (lihat Gambar 1). Ikuti langkah-langkah berikut untuk menyelesaikan wizard:

1. Di langkah Pilih Konten Model , pilih opsi Hasilkan dari database .
2. Di langkah Pilih Koneksi Data Anda , gunakan koneksi data MoviesDB.mdf dan nama MoviesDBEntities untuk pengaturan koneksi. Klik tombol Berikutnya.
3. Di langkah Pilih Objek Database Anda , perluas simpul Tabel, pilih tabel Film. Masukkan Model namespace layanan dan klik tombol Selesai .

Gambar 01: Membuat LINQ ke kelas SQL (Klik untuk melihat gambar ukuran penuh)

Setelah Anda menyelesaikan Wizard Model Data Entitas, Model Data Entitas Designer terbuka. Designer harus menampilkan entitas Film (lihat Gambar 2).

Gambar 02: Model Data Entitas Designer (Klik untuk melihat gambar ukuran penuh)

Kita perlu membuat satu perubahan sebelum melanjutkan. Panduan Data Entitas menghasilkan kelas model bernama Film yang mewakili tabel database Film. Karena kita akan menggunakan kelas Film untuk mewakili film tertentu, kita perlu memodifikasi nama kelas menjadi Film alih-alih Film (tunggal daripada jamak).

Klik dua kali nama kelas pada permukaan perancang dan ubah nama kelas dari Film ke Film. Setelah membuat perubahan ini, klik tombol Simpan (ikon disket) untuk menghasilkan kelas Film.

Membuat Pengontrol Film

Sekarang setelah kita memiliki cara untuk mewakili rekaman database kita, kita dapat membuat pengontrol yang mengembalikan koleksi film. Dalam jendela Penjelajah Solusi Visual Studio, klik kanan folder Pengontrol dan pilih opsi menu Tambahkan, Pengontrol (lihat Gambar 3).

Gambar 03: Menu Tambahkan Pengontrol (Klik untuk melihat gambar ukuran penuh)

Saat dialog Tambahkan Pengontrol muncul, masukkan nama pengontrol MovieController (lihat Gambar 4). Klik tombol Tambahkan untuk menambahkan pengontrol baru.

Gambar 04: Dialog Tambahkan Pengontrol (Klik untuk melihat gambar ukuran penuh)

Kita perlu mengubah tindakan Index() yang diekspos oleh pengontrol Film sehingga mengembalikan kumpulan rekaman database. Ubah pengontrol sehingga terlihat seperti pengontrol di Daftar 1.

Daftar 1 – Controllers\MovieController.vb

Public Class MovieController

    Inherits System.Web.Mvc.Controller 

    '

    ' GET: /Movie/ 

    Function Index() As ActionResult

        Dim entities As New MoviesDBEntities()

        Return View(entities.MovieSet.ToList())

    End Function 

End Class

Di Daftar 1, kelas MoviesDBEntities digunakan untuk mewakili database MoviesDB. Entitas ekspresi . MovieSet.ToList() mengembalikan kumpulan semua film dari tabel database Film.

Membuat Tampilan

Cara termampu untuk menampilkan sekumpulan rekaman database dalam tabel HTML adalah dengan memanfaatkan perancah yang disediakan oleh Visual Studio.

Bangun aplikasi Anda dengan memilih opsi menu Build, Build Solution. Anda harus membuat aplikasi sebelum membuka dialog Tambahkan Tampilan atau kelas data Anda tidak akan muncul dalam dialog.

Klik kanan tindakan Index() dan pilih opsi menu Tambahkan Tampilan (lihat Gambar 5).

Gambar 05: Menambahkan tampilan (Klik untuk melihat gambar ukuran penuh)

Dalam dialog Tambahkan Tampilan , centang kotak centang berlabel Buat tampilan yang di ketik dengan kuat. Pilih kelas Film sebagai kelas tampilkan data. Pilih Daftar sebagai konten tampilan (lihat Gambar 6). Memilih opsi ini akan menghasilkan tampilan dengan tipe kuat yang menampilkan daftar film.

Gambar 06: Dialog Tambahkan Tampilan (Klik untuk melihat gambar ukuran penuh)

Setelah Anda mengklik tombol Tambahkan , tampilan di Daftar 2 dibuat secara otomatis. Tampilan ini berisi kode yang diperlukan untuk melakukan iterasi melalui koleksi film dan menampilkan masing-masing properti film.

Daftar 2 – Views\Movie\Index.aspx

<%@ Page Title="" Language="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage(Of IEnumerable (Of MvcApplication1.Movie))" %> 

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">

      Index

</asp:Content> 

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> 

    <h2>Index</h2> 

    <p>

        <%=Html.ActionLink("Create New", "Create")%>

    </p>

    <table>

        <tr>

            <th></th>

            <th>

                Id

            </th>

            <th>

                Title

            </th>

            <th>

                Director

            </th>

            <th>

                DateReleased

            </th>

        </tr> 

    <% For Each item In Model%>

        <tr>

            <td>

                <%=Html.ActionLink("Edit", "Edit", New With {.id = item.Id})%> |

                <%=Html.ActionLink("Details", "Details", New With {.id = item.Id})%>

            </td>

            <td>

                <%= Html.Encode(item.Id) %>

            </td>

            <td>

                <%= Html.Encode(item.Title) %>

            </td>

            <td>

                <%= Html.Encode(item.Director) %>

            </td>

            <td>

                <%= Html.Encode(String.Format("{0:g}", item.DateReleased)) %>

            </td>

        </tr>

    <% Next%> 

    </table> 

</asp:Content>

Anda dapat menjalankan aplikasi dengan memilih opsi menu Debug, Mulai Debugging (atau menekan tombol F5). Menjalankan aplikasi meluncurkan Internet Explorer. Jika Anda menavigasi ke URL /Movie maka Anda akan melihat halaman di Gambar 7.

Gambar 07: Tabel film(Klik untuk melihat gambar ukuran penuh)

Jika Anda tidak menyukai apa pun tentang tampilan kisi rekaman database di Gambar 7 maka Anda cukup memodifikasi tampilan Indeks. Misalnya, Anda dapat mengubah header DateReleased menjadi Tanggal Dirilis dengan memodifikasi tampilan Indeks.

Membuat Templat dengan Parsial

Ketika tampilan menjadi terlalu rumit, ada baiknya untuk mulai memecah tampilan menjadi parsial. Menggunakan parsial membuat tampilan Anda lebih mudah dipahami dan dirawat. Kita akan membuat sebagian yang bisa kita gunakan sebagai templat untuk memformat setiap rekaman database film.

Ikuti langkah-langkah berikut untuk membuat parsial:

1. Klik kanan folder Views\Movie dan pilih opsi menu Tambahkan Tampilan.
2. Centang kotak centang berlabel Buat tampilan parsial (.ascx).
3. Beri nama MovieTemplate parsial.
4. Centang kotak centang berlabel Buat tampilan yang sangat ditik.
5. Pilih Film sebagai kelas tampilkan data.
6. Pilih Kosong sebagai konten tampilan.
7. Klik tombol Tambahkan untuk menambahkan parsial ke proyek Anda.

Setelah Anda menyelesaikan langkah-langkah ini, ubah parsial MovieTemplate agar terlihat seperti Daftar 3.

Daftar 3 – Views\Movie\MovieTemplate.ascx

<%@ Control Language="VB" Inherits="System.Web.Mvc.ViewUserControl(Of MvcApplication1.Movie)" %>

<tr>

    <td>

        <%= Html.Encode(Model.Id) %>

    </td>

    <td>

        <%= Html.Encode(Model.Title) %>

    </td>

    <td>

        <%= Html.Encode(Model.Director) %>

    </td>

    <td>

        <%= Html.Encode(String.Format("{0:g}", Model.DateReleased)) %>

    </td>

</tr>

Parsial dalam Daftar 3 berisi templat untuk satu baris rekaman.

Tampilan Indeks yang dimodifikasi di Daftar 4 menggunakan parsial MovieTemplate.

Daftar 4 – Views\Movie\Index.aspx

<%@ Page Title="" Language="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage(Of IEnumerable (Of MvcApplication1.Movie))" %> 

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> 

    <h2>Index</h2>

    <table>

        <tr>

            <th>

                Id

            </th>

            <th>

                Title

            </th>

            <th>

                Director

            </th>

            <th>

                DateReleased

            </th>

        </tr> 

    <% For Each item In Model%> 

        <% Html.RenderPartial("MovieTemplate", item)%>

    <% Next%> 

    </table> 

</asp:Content>

Tampilan di Daftar 4 berisi perulangan Untuk Setiap yang melakukan iterasi melalui semua film. Untuk setiap film, parsial MovieTemplate digunakan untuk memformat film. MovieTemplate dirender dengan memanggil metode pembantu RenderPartial().

Tampilan Indeks yang dimodifikasi merender tabel HTML rekaman database yang sangat sama. Namun, tampilan telah sangat disederhanakan.

Metode RenderPartial() berbeda dari sebagian besar metode pembantu lainnya karena tidak mengembalikan string. Oleh karena itu, Anda harus memanggil metode RenderPartial() menggunakan <% Html.RenderPartial() %> alih-alih <%= Html.RenderPartial() %>.

Ringkasan

Tujuan tutorial ini adalah untuk menjelaskan bagaimana Anda dapat menampilkan sekumpulan rekaman database dalam tabel HTML. Pertama, Anda mempelajari cara mengembalikan sekumpulan rekaman database dari tindakan pengontrol dengan memanfaatkan Microsoft Entity Framework. Selanjutnya, Anda mempelajari cara menggunakan perancah Visual Studio untuk menghasilkan tampilan yang menampilkan koleksi item secara otomatis. Terakhir, Anda belajar cara menyederhanakan tampilan dengan memanfaatkan sebagian. Anda mempelajari cara menggunakan sebagian sebagai templat sehingga Anda bisa memformat setiap rekaman database.

SebelumnyaBerikutnya