Bagikan melalui

Membuat Aplikasi Database Film dalam 15 Menit dengan ASP.NET MVC (VB)

oleh Stephen Walther

Unduh Kode

Stephen Walther membangun seluruh aplikasi MVC ASP.NET berbasis database dari awal hingga akhir. Tutorial ini adalah pengantar yang bagus untuk orang-orang yang baru menggunakan ASP.NET MVC Framework dan yang ingin merasakan proses membangun aplikasi MVC ASP.NET.

Tujuan dari tutorial ini adalah untuk memberi Anda rasa "seperti apa rasanya" untuk membangun aplikasi MVC ASP.NET. Dalam tutorial ini, saya melakukan blast melalui membangun seluruh aplikasi MVC ASP.NET dari awal hingga akhir. Saya menunjukkan kepada Anda cara membuat aplikasi berbasis database sederhana yang menggambarkan bagaimana Anda bisa mencantumkan, membuat, dan mengedit rekaman database.

Untuk menyederhanakan proses pembangunan aplikasi, kami akan memanfaatkan fitur perancah Visual Studio 2008. Kami akan membiarkan Visual Studio menghasilkan kode awal dan konten untuk pengontrol, model, dan tampilan kami.

Jika Anda telah bekerja dengan Halaman Server Aktif atau ASP.NET, maka Anda harus menemukan ASP.NET MVC sangat akrab. ASP.NET tampilan MVC sangat mirip dengan halaman di aplikasi Halaman Server Aktif. Dan, sama seperti aplikasi Web Forms ASP.NET tradisional, ASP.NET MVC memberi Anda akses penuh ke serangkaian bahasa dan kelas yang kaya yang disediakan oleh kerangka kerja .NET.

Harapan saya adalah bahwa tutorial ini akan memberi Anda rasa bagaimana pengalaman membangun aplikasi MVC ASP.NET serupa dan berbeda dari pengalaman membangun Halaman Server Aktif atau aplikasi Formulir Web ASP.NET.

Gambaran Umum Aplikasi Database Film

Karena tujuan kami adalah untuk menjaga hal-hal sederhana, kita akan membangun aplikasi Movie Database yang sangat sederhana. Aplikasi Movie Database sederhana kami akan memungkinkan kami melakukan tiga hal:

  1. Mencantumkan sekumpulan rekaman database film
  2. Membuat rekaman database film baru
  3. Mengedit rekaman database film yang sudah ada

Sekali lagi, karena kami ingin menjaga semuanya tetap sederhana, kami akan memanfaatkan jumlah minimum fitur kerangka kerja MVC ASP.NET yang diperlukan untuk membangun aplikasi kami. Misalnya, kami tidak akan memanfaatkan Pengembangan Berbasis Pengujian.

Untuk membuat aplikasi, kita perlu menyelesaikan masing-masing langkah berikut:

  1. Membuat Proyek Aplikasi Web MVC ASP.NET
  2. Buatlah databasenya
  3. Membuat model database
  4. Membuat pengontrol MVC ASP.NET
  5. Membuat tampilan MVC ASP.NET

Persiapan

Anda memerlukan Visual Studio 2008 atau Visual Web Developer 2008 Express untuk membangun aplikasi MVC ASP.NET. Anda juga perlu mengunduh kerangka kerja MVC ASP.NET.

Jika Anda tidak memiliki Visual Studio 2008, maka Anda dapat mengunduh Versi uji coba 90 hari Visual Studio 2008 dari situs web ini:

https://msdn.microsoft.com/vs2008/products/cc268305.aspx

Atau, Anda dapat membuat aplikasi MVC ASP.NET dengan Visual Web Developer Express 2008. Jika Anda memutuskan untuk menggunakan Visual Web Developer Express, Maka Anda harus menginstal Paket Layanan 1. Anda dapat mengunduh Visual Web Developer 2008 Express dengan Paket Layanan 1 dari situs web ini:

https://www.microsoft.com/downloads/details.aspx?FamilyId=BDB6391C-05CA-4036-9154-6DF4F6DEBD14& displaylang=en

Setelah menginstal Visual Studio 2008 atau Visual Web Developer 2008, Anda perlu menginstal kerangka kerja MVC ASP.NET. Anda dapat mengunduh kerangka kerja MVC ASP.NET dari situs web berikut:

https://www.asp.net/mvc/

Catatan

Alih-alih mengunduh kerangka kerja ASP.NET dan kerangka kerja MVC ASP.NET satu per satu, Anda dapat memanfaatkan Penginstal Platform Web. Penginstal Platform Web adalah aplikasi yang memungkinkan Anda mengelola aplikasi yang diinstal dengan mudah adalah komputer Anda.

Membuat Proyek Aplikasi Web MVC ASP.NET

Mari kita mulai dengan membuat proyek Aplikasi Web MVC ASP.NET baru di Visual Studio 2008. Pilih opsi menu File, Proyek Baru, dan Anda akan melihat kotak dialog Proyek Baru di Gambar 1. Pilih Visual Basic sebagai bahasa pemrograman dan pilih templat proyek Aplikasi Web MVC ASP.NET. Beri nama MovieApp pada proyek Anda dan klik tombol OK.

Cuplikan layar dialog Proyek Baru, yang memperlihatkan templat Aplikasi Web ASP dot Net MVC dipilih dan Aplikasi Film di bidang Nama.

Gambar 01: Kotak dialog Proyek Baru (Klik untuk melihat gambar ukuran penuh)

Pastikan Anda memilih .NET Framework 3.5 dari daftar dropdown di bagian atas dialog Proyek Baru atau templat proyek Aplikasi Web MVC ASP.NET tidak akan muncul.

Setiap kali Anda membuat proyek Aplikasi Web MVC baru, Visual Studio meminta Anda untuk membuat proyek pengujian unit terpisah. Dialog di Gambar 2 muncul. Karena kita tidak akan membuat tes dalam tutorial ini karena kendala waktu (dan, ya, kita harus merasa sedikit bersalah tentang hal ini) pilih opsi Tidak dan klik tombol OK .

Catatan

Visual Web Developer tidak mendukung proyek pengujian.

Cuplikan layar Buat Proyek Pengujian Unit, yang menampilkan Tidak, jangan buat proyek pengujian unit yang dipilih.

Gambar 02: Dialog Buat Proyek Pengujian Unit (Klik untuk melihat gambar ukuran penuh)

Aplikasi MVC ASP.NET memiliki sekumpulan folder standar: folder Model, Tampilan, dan Pengontrol. Anda dapat melihat kumpulan folder standar ini di jendela Penjelajah Solusi. Kita harus menambahkan file ke setiap folder Model, Tampilan, dan Pengontrol untuk membangun aplikasi Database Film kita.

Saat membuat aplikasi MVC baru dengan Visual Studio, Anda mendapatkan aplikasi sampel. Karena kita ingin memulai dari awal, kita perlu menghapus konten untuk aplikasi sampel ini. Anda perlu menghapus file berikut dan folder berikut:

  • Pengontrol\HomeController.vb
  • Views\Home

Membuat Database

Kita perlu membuat database untuk menyimpan rekaman database film kita. Untungnya, Visual Studio menyertakan database gratis bernama SQL Server Express. Ikuti langkah-langkah ini untuk membuat database:

  1. Klik kanan folder App_Data di jendela Penjelajah Solusi dan pilih opsi menu Tambahkan, Item Baru.
  2. Pilih Kategori data dan pilih templat Database SQL Server (lihat Gambar 3).
  3. Beri nama database baru Anda MoviesDB.mdf dan klik tombol Tambahkan .

Setelah membuat database, Anda bisa menyambungkan ke database dengan mengklik ganda file MoviesDB.mdf yang terletak di folder App_Data. Mengklik dua kali file MoviesDB.mdf akan membuka jendela Penjelajah Server.

Catatan

Jendela Penjelajah Server diberi nama jendela Penjelajah Database dalam kasus Visual Web Developer.

Cuplikan layar jendela Tambahkan Item Baru, yang memperlihatkan Database SQL Server dipilih dan Film DB titik m d f dimasukkan dalam kotak Nama.

Gambar 03: Membuat Microsoft SQL Server Database (Klik untuk melihat gambar ukuran penuh)

Selanjutnya, kita perlu membuat tabel database baru. Dari dalam jendela Sever Explorer, klik kanan folder Tabel dan pilih opsi menu Tambahkan Tabel Baru. Memilih opsi menu ini akan membuka perancang tabel database. Buat kolom database berikut:

Nama Kolom Tipe Data Perbolehkan Null
Id Int Salah
Judul Nvarchar(100) Salah
Direktur Nvarchar(100) Salah
DateReleased DateTime Salah

Kolom pertama, kolom Id, memiliki dua properti khusus. Pertama, Anda perlu menandai kolom Id sebagai kolom kunci utama. Setelah memilih kolom Id, klik tombol Atur Kunci Primer (ini adalah ikon yang terlihat seperti kunci). Kedua, Anda perlu menandai kolom Id sebagai kolom Identitas. Di jendela Properti Kolom, gulir ke bawah ke bagian Spesifikasi Identitas dan perluas. Ubah properti Is Identity menjadi nilai Ya. Setelah selesai, tabel akan terlihat seperti Gambar 4.

Cuplikan layar Microsoft Visual Studio, yang memperlihatkan tabel database Film yang telah selesai dan properti Is Identity diatur ke Ya.

Gambar 04: Tabel database Film (Klik untuk melihat gambar ukuran penuh)

Langkah terakhir adalah menyimpan tabel baru. Klik tombol Simpan (ikon floppy) dan beri tabel baru nama Film.

Setelah Anda selesai membuat tabel, tambahkan beberapa rekaman film ke tabel. Klik kanan tabel Film di jendela Server Explorer dan pilih opsi menu Perlihatkan Data Tabel. Masukkan daftar film favorit Anda (lihat Gambar 5).

Cuplikan layar jendela Microsoft Visual Studio, yang menampilkan tabel untuk memasukkan informasi film, termasuk ID, Judul, Direktur, dan tanggal dirilis.

Gambar 05: Memasukkan rekaman film (Klik untuk melihat gambar ukuran penuh)

Membuat Model

Kita selanjutnya perlu membuat sekumpulan kelas untuk mewakili database kita. Kita perlu membuat model database. Kami akan memanfaatkan Microsoft Entity Framework untuk menghasilkan kelas untuk model database kami secara otomatis.

Catatan

Kerangka kerja MVC ASP.NET tidak terkait dengan Microsoft Entity Framework. Anda dapat membuat kelas model database dengan memanfaatkan berbagai alat Object Relational Mapping (OR/M) termasuk LINQ ke SQL, Subsonic, dan NHibernate.

Ikuti langkah-langkah ini 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 6). 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 namespace MovieApp.Models dan klik tombol Selesai .

Cuplikan layar kotak Wizard Model Data Entitas, yang memperlihatkan ikon Hasilkan dari database dipilih.

Gambar 06: Menghasilkan model database dengan Wizard Model Data Entitas (Klik untuk melihat gambar ukuran penuh)

Setelah Anda menyelesaikan Wizard Model Data Entitas, Perancang Model Data Entitas akan terbuka. Perancang harus menampilkan tabel database Film (lihat Gambar 7).

Cuplikan layar Perancang Model Data Entitas, yang memperlihatkan tabel database Film.

Gambar 07: Perancang Model Data Entitas (Klik untuk melihat gambar ukuran penuh)

Kita perlu membuat satu perubahan sebelum kita melanjutkan. Wizard 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 MVC ASP.NET

Langkah selanjutnya adalah membuat pengontrol MVC ASP.NET. Pengontrol bertanggung jawab untuk mengontrol bagaimana pengguna berinteraksi dengan aplikasi MVC ASP.NET.

Ikuti langkah-langkah ini:

  1. Di jendela Penjelajah Solusi, klik kanan folder Pengontrol dan pilih opsi menu Tambahkan, Pengontrol.
  2. Dalam dialog Tambahkan Pengontrol, masukkan nama HomeController dan centang kotak centang berlabel Tambahkan metode tindakan untuk skenario Buat, Perbarui, dan Detail (lihat Gambar 8).
  3. Klik tombol Tambahkan untuk menambahkan pengontrol baru ke proyek Anda.

Setelah Anda menyelesaikan langkah-langkah ini, pengontrol di Daftar 1 dibuat. Perhatikan bahwa metode tersebut berisi metode bernama Indeks, Detail, Buat, dan Edit. Di bagian berikut, kita akan menambahkan kode yang diperlukan untuk membuat metode ini berfungsi.

Cuplikan layar kotak Tambahkan Pengontrol, yang memperlihatkan Pengontrol Beranda dimasukkan dan kotak tambahkan tindakan dicentang.

Gambar 08: Menambahkan pengontrol MVC ASP.NET baru (Klik untuk melihat gambar ukuran penuh)

Daftar 1 – Pengontrol\HomeController.vb

Public Class HomeController

        Inherits System.Web.Mvc.Controller 

        '

        ' GET: /Home/ 

        Function Index() As ActionResult

            Return View()

        End Function 

        '

        ' GET: /Home/Details/5 

        Function Details(ByVal id As Integer) As ActionResult

            Return View()

        End Function 

        '

        ' GET: /Home/Create 

        Function Create() As ActionResult

            Return View()

        End Function 

        '

        ' POST: /Home/Create 

        <AcceptVerbs(HttpVerbs.Post)> _

        Function Create(ByVal collection As FormCollection) As ActionResult

            Try

                ' TODO: Add insert logic here

                Return RedirectToAction("Index")

            Catch

                Return View()

            End Try

        End Function 

        '

        ' GET: /Home/Edit/5 

        Function Edit(ByVal id As Integer) As ActionResult

            Return View()

        End Function 

        '

        ' POST: /Home/Edit/5 

        <AcceptVerbs(HttpVerbs.Post)> _

        Function Edit(ByVal id As Integer, ByVal collection As FormCollection) As ActionResult

            Try

                ' TODO: Add update logic here 

                Return RedirectToAction("Index")

            Catch

                Return View()

            End Try

        End Function

    End Class

Mencantumkan Rekaman Database

Metode Index() pengontrol Beranda adalah metode default untuk aplikasi MVC ASP.NET. Saat Anda menjalankan aplikasi MVC ASP.NET, metode Index() adalah metode pengontrol pertama yang dipanggil.

Kita akan menggunakan metode Index() untuk menampilkan daftar rekaman dari tabel database Movies. Kita akan memanfaatkan kelas model database yang kita buat sebelumnya untuk mengambil rekaman database film dengan metode Index().

Saya telah memodifikasi kelas HomeController di Listing 2 sehingga berisi bidang privat baru bernama _db. Kelas MoviesDBEntities mewakili model database kami dan kami akan menggunakan kelas ini untuk berkomunikasi dengan database kami.

Saya juga telah memodifikasi metode Index() di Listing 2. Metode Index() menggunakan kelas MoviesDBEntities untuk mengambil semua rekaman film dari tabel database Film. Ekspresi _db. MovieSet.ToList() mengembalikan daftar semua rekaman film dari tabel database Film.

Daftar film diteruskan ke tampilan. Apa pun yang diteruskan ke metode View() akan diteruskan ke tampilan sebagai data tampilan.

Daftar 2 – Pengontrol/HomeController.vb (metode Indeks yang dimodifikasi)

Public Class HomeController

        Inherits System.Web.Mvc.Controller 

        Private _db As New MoviesDBEntities() 

        Function Index() As ActionResult

            Return View(_db.MovieSet.ToList())

        End Function

    End Class

Metode Index() mengembalikan tampilan bernama Index. Kita perlu membuat tampilan ini untuk menampilkan daftar rekaman database film. Ikuti langkah-langkah ini:

Anda harus membangun proyek Anda (pilih opsi menu Build, Build Solution) sebelum membuka dialog Tambahkan Tampilan atau tidak ada kelas yang akan muncul di daftar dropdown Tampilkan kelas data.

  1. Klik kanan metode Index() di editor kode dan pilih opsi menu Tambahkan Tampilan (lihat Gambar 9).
  2. Dalam dialog Tambahkan Tampilan, verifikasi bahwa kotak centang berlabel Buat tampilan yang ditik dengan kuat dicentang.
  3. Dari daftar dropdown Tampilkan konten, pilih daftar nilai.
  4. Dari daftar dropdown Lihat kelas data, pilih nilai MovieApp.Movie.
  5. Klik tombol Tambahkan untuk membuat tampilan baru (lihat Gambar 10).

Setelah Anda menyelesaikan langkah-langkah ini, tampilan baru bernama Index.aspx ditambahkan ke folder Views\Home. Konten tampilan Indeks disertakan dalam Daftar 3.

Cuplikan layar editor kode, yang memperlihatkan kotak dropdown klik kanan dengan Tambahkan Tampilan dipilih.

Gambar 09: Menambahkan tampilan dari tindakan pengontrol (Klik untuk melihat gambar ukuran penuh)

Cuplikan layar kotak Tambahkan Tampilan, yang memperlihatkan Tampilan nama, Indeks, dan memperlihatkan Buat tampilan yang di ketik dengan kuat dan Pilih entri halaman master dipilih.

Gambar 10: Membuat tampilan baru dengan dialog Tambahkan Tampilan (Klik untuk melihat gambar ukuran penuh)

<%@ Page Title="" Language="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage(Of IEnumerable (Of MovieApp.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>

Tampilan Indeks menampilkan semua rekaman film dari tabel database Film dalam tabel HTML. Tampilan berisi perulangan Untuk Setiap yang berulang melalui setiap film yang diwakili oleh properti ViewData.Model. Jika Anda menjalankan aplikasi dengan menekan kunci F5, maka Anda akan melihat halaman web di Gambar 11.

Cuplikan layar Tampilan Indeks, yang menampilkan informasi film termasuk ID, judul, sutradara, dan tanggal dirilis.

Gambar 11: Tampilan Indeks (Klik untuk melihat gambar ukuran penuh)

Membuat Rekaman Database Baru

Tampilan Indeks yang kami buat di bagian sebelumnya menyertakan tautan untuk membuat rekaman database baru. Mari kita lanjutkan dan terapkan logika dan buat tampilan yang diperlukan untuk membuat rekaman database film baru.

Pengontrol Rumah berisi dua metode bernama Create(). Metode Create() pertama tidak memiliki parameter. Kelebihan beban metode Create() ini digunakan untuk menampilkan formulir HTML untuk membuat rekaman database film baru.

Metode Create() kedua memiliki parameter FormCollection. Kelebihan metode Create() ini dipanggil ketika formulir HTML untuk membuat film baru diposting ke server. Perhatikan bahwa metode Create() kedua ini memiliki atribut AcceptVerbs yang mencegah metode dipanggil kecuali operasi HTTP Post dilakukan.

Metode Create() kedua ini telah dimodifikasi di kelas HomeController yang diperbarui di Listing 4. Versi baru metode Buat() menerima parameter Film dan berisi logika untuk menyisipkan film baru ke dalam tabel database Film.

Catatan

Perhatikan atribut Bind. Karena kita tidak ingin memperbarui properti Id Film dari formulir HTML, kita perlu secara eksplisit mengecualikan properti ini.

Daftar 4 – Pengontrol\HomeController.vb (metode Buat yang dimodifikasi)

Function Create() As ActionResult

            Return View()

        End Function 

        <AcceptVerbs(HttpVerbs.Post)> _

        Function Create(<_bind28_exclude3a_3d_22_id22_29_> ByVal movieToCreate As Movie) As ActionResult 

            If Not ModelState.IsValid Then

                Return View()

            End If 

            _db.AddToMovieSet(movieToCreate)

            _db.SaveChanges() 

            Return RedirectToAction("Index")

        End Function 
<!--_bind28_exclude3a_3d_22_id22_29_-->

Visual Studio memudahkan pembuatan formulir untuk membuat rekaman database film baru (lihat Gambar 12). Ikuti langkah-langkah ini:

  1. Klik kanan metode Buat() di editor kode dan pilih opsi menu Tambahkan Tampilan.
  2. Verifikasi bahwa kotak centang berlabel Buat tampilan yang ditik dengan kuat dicentang.
  3. Dari daftar dropdown Tampilkan konten, pilih nilai Buat.
  4. Dari daftar dropdown Lihat kelas data, pilih nilai MovieApp.Movie.
  5. Klik tombol Tambahkan untuk membuat tampilan baru.

Cuplikan layar kotak Tambahkan Tampilan untuk nama Tampilan, Buat, yang memperlihatkan Buat tampilan yang di ketik dengan kuat dan Pilih entri halaman master dipilih.

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

Visual Studio menghasilkan tampilan di Daftar 5 secara otomatis. Tampilan ini berisi formulir HTML yang menyertakan bidang yang sesuai dengan setiap properti kelas Film.

Daftar 5 – Views\Home\Create.aspx

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

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

       Create

    </asp:Content> 

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

        <h2>Create</h2> 

        <%= Html.ValidationSummary("Create was unsuccessful. Please correct the errors and try again.") %> 

        <% Using Html.BeginForm()%> 

            <fieldset>

                <legend>Fields</legend>

                <p>

                    <label for="Id">Id:</label>

                    <%= Html.TextBox("Id") %>

                    <%= Html.ValidationMessage("Id", "*") %>

                </p>

                <p>

                    <label for="Title">Title:</label>

                    <%= Html.TextBox("Title") %>

                    <%= Html.ValidationMessage("Title", "*") %>

                </p>

                <p>

                    <label for="Director">Director:</label>

                    <%= Html.TextBox("Director") %>

                    <%= Html.ValidationMessage("Director", "*") %>

                </p>

                <p>

                    <label for="DateReleased">DateReleased:</label>

                    <%= Html.TextBox("DateReleased") %>

                    <%= Html.ValidationMessage("DateReleased", "*") %>

                </p>

                <p>

                    <input type="submit" value="Create" />

                </p>

            </fieldset> 

        <% End Using %> 

        <div>

            <%=Html.ActionLink("Back to List", "Index") %>

        </div> 

    </asp:Content>

Catatan

Formulir HTML yang dihasilkan oleh dialog Tambahkan Tampilan menghasilkan bidang formulir Id. Karena kolom Id adalah kolom Identitas, kami tidak memerlukan bidang formulir ini dan Anda dapat menghapusnya dengan aman.

Setelah menambahkan tampilan Buat, Anda bisa menambahkan rekaman Film baru ke database. Jalankan aplikasi Anda dengan menekan tombol F5 dan klik tautan Buat Baru untuk melihat formulir di Gambar 13. Jika Anda melengkapi dan mengirimkan formulir, rekaman database film baru akan dibuat.

Perhatikan bahwa Anda mendapatkan validasi formulir secara otomatis. Jika Anda mengabaikan untuk memasukkan tanggal rilis untuk film, atau Anda memasukkan tanggal rilis yang tidak valid, formulir akan diputar ulang dan bidang tanggal rilis disorot.

Cuplikan layar browser yang menampilkan halaman Buat tampilan, yang memperlihatkan bidang database yang diperlukan dari judul, direktur, dan tanggal dirilis.

Gambar 13: Membuat rekaman database film baru (Klik untuk melihat gambar ukuran penuh)

Mengedit Rekaman Database yang Sudah Ada

Di bagian sebelumnya, kami membahas bagaimana Anda bisa mencantumkan dan membuat rekaman database baru. Di bagian akhir ini, kami membahas bagaimana Anda bisa mengedit rekaman database yang sudah ada.

Pertama, kita perlu membuat formulir Edit. Langkah ini mudah karena Visual Studio akan menghasilkan formulir Edit untuk kami secara otomatis. Buka kelas HomeController.vb di editor kode Visual Studio dan ikuti langkah-langkah berikut:

  1. Klik kanan metode Edit() di editor kode dan pilih opsi menu Tambahkan Tampilan (lihat Gambar 14).
  2. Centang kotak centang berlabel Buat tampilan yang ditik dengan kuat.
  3. Dari daftar dropdown Tampilkan konten , pilih nilai Edit.
  4. Dari daftar dropdown Lihat kelas data, pilih nilai MovieApp.Movie.
  5. Klik tombol Tambahkan untuk membuat tampilan baru.

Menyelesaikan langkah-langkah ini menambahkan tampilan baru bernama Edit.aspx ke folder Views\Home. Tampilan ini berisi formulir HTML untuk mengedit rekaman film.

Cuplikan layar kotak Tambahkan Tampilan untuk nama Tampilan, Edit, yang memperlihatkan Buat tampilan yang ditik dengan kuat dan Pilih entri halaman master dipilih.

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

Catatan

Tampilan Edit berisi bidang formulir HTML yang sesuai dengan properti Id Film. Karena Anda tidak ingin orang mengedit nilai properti Id, Anda harus menghapus bidang formulir ini.

Terakhir, kita perlu memodifikasi pengontrol Beranda sehingga mendukung pengeditan rekaman database. Kelas HomeController yang diperbarui terkandung dalam Daftar 6.

Daftar 6 – Pengontrol\HomeController.vb (Edit metode)

Function Edit(ByVal id As Integer) As ActionResult

            Dim movieToEdit = (From m In _db.MovieSet _

                           Where m.Id = id _

                           Select m).First() 

            Return View(movieToEdit)

        End Function 

        <AcceptVerbs(HttpVerbs.Post)> _

        Function Edit(ByVal movieToEdit As Movie) As ActionResult 

            Dim originalMovie = (From m In _db.MovieSet _

                       Where m.Id = movieToEdit.Id _

                       Select m).First() 

            If Not ModelState.IsValid Then

                Return View(originalMovie)

            End If 

            _db.ApplyPropertyChanges(originalMovie.EntityKey.EntitySetName, movieToEdit)

            _db.SaveChanges() 

            Return RedirectToAction("Index")

        End Function

Di Daftar 6, saya telah menambahkan logika tambahan ke kedua kelebihan beban metode Edit(). Metode Edit() pertama mengembalikan rekaman database film yang sesuai dengan parameter Id yang diteruskan ke metode . Kelebihan beban kedua melakukan pembaruan pada rekaman film dalam database.

Perhatikan bahwa Anda harus mengambil film asli, lalu memanggil ApplyPropertyChanges(), untuk memperbarui film yang ada dalam database.

Ringkasan

Tujuan dari tutorial ini adalah untuk memberi Anda rasa pengalaman membangun aplikasi MVC ASP.NET. Saya harap Anda menemukan bahwa membangun aplikasi web MVC ASP.NET sangat mirip dengan pengalaman membangun Halaman Server Aktif atau aplikasi ASP.NET.

Dalam tutorial ini, kami hanya memeriksa fitur paling dasar dari kerangka kerja MVC ASP.NET. Dalam tutorial mendatang, kami menyelami lebih dalam topik seperti pengontrol, tindakan pengontrol, tampilan, melihat data, dan pembantu HTML.

Mantan

  • Last updated on