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

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:

Mencantumkan sekumpulan rekaman database film
Membuat rekaman database film baru
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:

Membuat Proyek Aplikasi Web MVC ASP.NET
Buatlah databasenya
Membuat model database
Membuat pengontrol MVC ASP.NET
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 di 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 C# sebagai bahasa pemrograman dan pilih templat proyek Aplikasi Web MVC ASP.NET. Beri nama MovieApp pada proyek Anda dan klik tombol OK.

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.

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.cs
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:

Klik kanan folder App_Data di jendela Penjelajah Solusi dan pilih opsi menu Tambahkan, Item Baru.
Pilih Kategori data dan pilih templat Database SQL Server (lihat Gambar 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.

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.

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).

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:

Klik kanan folder Model di jendela Penjelajah Solusi dan pilih opsi menu Tambahkan, Item Baru.
Pilih Kategori data dan pilih templat Model Data Entitas ADO.NET.
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:

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

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).

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:

Di jendela Penjelajah Solusi, klik kanan folder Pengontrol dan pilih opsi menu Tambahkan, Pengontrol.
Dalam dialog Tambahkan Pengontrol, masukkan nama HomeController dan centang kotak centang berlabel Tambahkan metode tindakan untuk skenario Buat, Perbarui, dan Detail (lihat Gambar 8).
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.

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

Daftar 1 – Pengontrol\HomeController.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using System.Web.Mvc.Ajax; 

namespace MovieApp.Controllers

{

    public class HomeController : Controller

    {

        //

        // GET: /Home/ 

        public ActionResult Index()

        {

            return View();

        } 

        //

        // GET: /Home/Details/5 

        public ActionResult Details(int id)

        {

            return View();

        } 

        //

        // GET: /Home/Create 

        public ActionResult Create()

        {

            return View();

        }  

        //

        // POST: /Home/Create 

        [AcceptVerbs(HttpVerbs.Post)]

        public ActionResult Create(FormCollection collection)

        {

            try

            {

                // TODO: Add insert logic here 

                return RedirectToAction("Index");

            }

            catch

            {

                return View();

            }

        } 

        //

        // GET: /Home/Edit/5

        public ActionResult Edit(int id)

        {

            return View();

        } 

        //

        // POST: /Home/Edit/5 

        [AcceptVerbs(HttpVerbs.Post)]

        public ActionResult Edit(int id, FormCollection collection)

        {

            try

            {

                // TODO: Add update logic here

                return RedirectToAction("Index");

            }

            catch

            {

                return View();

            }

        }

    }

}

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.cs (metode Indeks yang dimodifikasi)

using System.Linq;

using System.Web.Mvc;

using MovieApp.Models; 

namespace MovieApp.Controllers

{

    public class HomeController : Controller

    {

        private MoviesDBEntities _db = new MoviesDBEntities(); 

        public ActionResult Index()

        {

            return View(_db.MovieSet.ToList());

        }

    }

}

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.

Klik kanan metode Index() di editor kode dan pilih opsi menu Tambahkan Tampilan (lihat Gambar 9).
Dalam dialog Tambahkan Tampilan, verifikasi bahwa kotak centang berlabel Buat tampilan yang ditik dengan kuat dicentang.
Dari daftar dropdown Tampilkan konten, pilih daftar nilai.
Dari daftar dropdown Lihat kelas data, pilih nilai MovieApp.Models.Movie.
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.

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

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

Daftar 3 – Views\Home\Index.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<MovieApp.Models.Movie>>" %> 

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

       Index

    </asp:Content> 

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

        <h2>Index</h2> 

        <table>

            <tr>

                <th></th>

                <th>

                    Id

                </th>

                <th>

                    Title

                </th>

                <th>

                    Director

                </th>

                <th>

                    DateReleased

                </th>

            </tr> 

        <% foreach (var item in Model) { %>

            <tr>

                <td>

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

                    <%= Html.ActionLink("Details", "Details", new { 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>

        <% } %> 

        </table> 

        <p>

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

        </p> 

    </asp:Content>

Tampilan Indeks menampilkan semua rekaman film dari tabel database Film dalam tabel HTML. Tampilan berisi perulangan foreach 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.

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.cs (metode Buat yang dimodifikasi)

//

// GET: /Home/Create 

public ActionResult Create()

{

    return View();

}  

//

// POST: /Home/Create 

[AcceptVerbs(HttpVerbs.Post)]

public ActionResult Create([Bind(Exclude="Id")] Movie movieToCreate)

{

     if (!ModelState.IsValid)

        return View(); 

    _db.AddToMovieSet(movieToCreate);

    _db.SaveChanges(); 

    return RedirectToAction("Index");

}

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

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

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="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<MovieApp.Models.Movie>" %> 

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

       Create

    </asp:Content> 

    <asp:Content ID="Content2" 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> 

        <% } %> 

        <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.

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.cs di editor kode Visual Studio dan ikuti langkah-langkah berikut:

Klik kanan metode Edit() di editor kode dan pilih opsi menu Tambahkan Tampilan (lihat Gambar 14).
Centang kotak centang berlabel Buat tampilan yang ditik dengan kuat.
Dari daftar dropdown Tampilkan konten , pilih nilai Edit.
Dari daftar dropdown Lihat kelas data, pilih nilai MovieApp.Models.Movie.
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.

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.cs (Edit metode)

//

// GET: /Home/Edit/5 

public ActionResult Edit(int id)

{

    var movieToEdit = (from m in _db.MovieSet

                       where m.Id == id

                       select m).First(); 

    return View(movieToEdit);

} 

//

// POST: /Home/Edit/5 

[AcceptVerbs(HttpVerbs.Post)]

public ActionResult Edit(Movie movieToEdit)

{ 

    var originalMovie = (from m in _db.MovieSet

                         where m.Id == movieToEdit.Id

                         select m).First(); 

    if (!ModelState.IsValid)

        return View(originalMovie);

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

        _db.SaveChanges(); 

        return RedirectToAction("Index");

}

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.

Berikutnya

Saran dan Komentar

Apakah halaman ini membantu?

Last updated on 2023-07-13

Bagikan melalui

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

Gambaran Umum Aplikasi Database Film

Persiapan

Membuat Proyek Aplikasi Web MVC ASP.NET

Membuat Database

Membuat Model

Membuat Pengontrol MVC ASP.NET

Mencantumkan Rekaman Database

Membuat Rekaman Database Baru

Mengedit Rekaman Database yang Sudah Ada

Ringkasan

Saran dan Komentar

Sumber Daya Tambahan: