Iterasi #1 – Buat Aplikasi (VB)

Pada iterasi pertama, kami membuat Contact Manager dengan cara yang paling sederhana. Kami menambahkan dukungan untuk operasi database dasar: Buat, Baca, Perbarui, dan Hapus (CRUD).

Membangun Manajemen Kontak ASP.NET Aplikasi MVC (VB)

Dalam rangkaian tutorial ini, kami membangun seluruh aplikasi Manajemen Kontak dari awal hingga akhir. Aplikasi Contact Manager memungkinkan Anda menyimpan informasi kontak - nama, nomor telepon, dan alamat email - untuk daftar orang.

Kami membangun aplikasi melalui beberapa iterasi. Dengan setiap iterasi, kami secara bertahap meningkatkan aplikasi. Tujuan dari pendekatan perulangan ganda ini adalah untuk memungkinkan Anda memahami alasan setiap perubahan.

Iterasi #1 - Buat aplikasi. Pada iterasi pertama, kami membuat Contact Manager dengan cara yang paling sederhana. Kami menambahkan dukungan untuk operasi database dasar: Buat, Baca, Perbarui, dan Hapus (CRUD).
Iterasi #2 - Buat aplikasi terlihat bagus. Dalam perulangan ini, kami meningkatkan tampilan aplikasi dengan memodifikasi halaman master tampilan ASP.NET MVC default dan lembar gaya bertingkat.
Iterasi #3 - Tambahkan validasi formulir. Dalam iterasi ketiga, kami menambahkan validasi formulir dasar. Kami mencegah orang mengirimkan formulir tanpa melengkapi bidang formulir yang diperlukan. Kami juga memvalidasi alamat email dan nomor telepon.
Iterasi #4 - Buat aplikasi digabungkan secara longgar. Dalam iterasi keempat ini, kami memanfaatkan beberapa pola desain perangkat lunak untuk mempermudah pemeliharaan dan modifikasi aplikasi Contact Manager. Misalnya, kami merefaktor aplikasi kami untuk menggunakan pola Repositori dan pola Injeksi Dependensi.
Iterasi #5 - Membuat pengujian unit. Dalam iterasi kelima, kami membuat aplikasi kami lebih mudah dirawat dan dimodifikasi dengan menambahkan pengujian unit. Kami meniru kelas model data kami dan membangun pengujian unit untuk pengontrol dan logika validasi kami.
Iterasi #6 - Gunakan pengembangan berbasis pengujian. Dalam iterasi keenam ini, kami menambahkan fungsionalitas baru ke aplikasi kami dengan menulis pengujian unit terlebih dahulu dan menulis kode terhadap pengujian unit. Dalam perulangan ini, kami menambahkan grup kontak.
Iterasi #7 - Tambahkan fungsionalitas Ajax. Dalam iterasi ketujuh, kami meningkatkan responsivitas dan performa aplikasi kami dengan menambahkan dukungan untuk Ajax.

Perulangan ini

Dalam iterasi pertama ini, kami membangun aplikasi dasar. Tujuannya adalah untuk membangun Contact Manager dengan cara tercepat dan paling sederhana. Dalam iterasi nanti, kami meningkatkan desain aplikasi.

Aplikasi Contact Manager adalah aplikasi dasar berbasis database. Anda dapat menggunakan aplikasi untuk membuat kontak baru, mengedit kontak yang sudah ada, dan menghapus kontak.

Dalam iterasi ini, kami menyelesaikan langkah-langkah berikut:

ASP.NET aplikasi MVC
Membuat database untuk menyimpan kontak kami
Membuat kelas model untuk database kami dengan Microsoft Entity Framework
Membuat tindakan dan tampilan pengontrol yang memungkinkan kami mencantumkan semua kontak dalam database
Membuat tindakan pengontrol dan tampilan yang memungkinkan kami membuat kontak baru di database
Membuat tindakan pengontrol dan tampilan yang memungkinkan kami mengedit kontak yang sudah ada di database
Membuat tindakan pengontrol dan tampilan yang memungkinkan kami menghapus kontak yang sudah ada di database

Prasyarat Perangkat Lunak

Dalam aplikasi MVC ASP.NET, Anda harus menginstal Visual Studio 2008 atau Visual Web Developer 2008 di komputer Anda (Visual Web Developer adalah versi gratis Visual Studio yang tidak menyertakan semua fitur canggih Visual Studio). Anda dapat mengunduh versi uji coba Visual Studio 2008 atau Visual Web Developer dari alamat berikut:

https://www.asp.net/downloads/essential/

Catatan

Untuk ASP.NET aplikasi MVC dengan Visual Web Developer, Anda harus menginstal Visual Web Developer Service Pack 1. Tanpa Paket Layanan 1, Anda tidak dapat membuat Proyek Aplikasi Web.

ASP.NET kerangka kerja MVC. Anda dapat mengunduh kerangka kerja MVC ASP.NET dari alamat berikut:

https://www.asp.net/mvc

Dalam tutorial ini, kami menggunakan Microsoft Entity Framework untuk mengakses database. Kerangka Kerja Entitas disertakan dengan .NET Framework 3.5 Paket Layanan 1. Anda dapat mengunduh paket layanan ini dari lokasi berikut:

https://www.microsoft.com/download/details.aspx?id=22& desc=dotnet35

Sebagai alternatif untuk melakukan masing-masing unduhan ini satu per satu, Anda dapat memanfaatkan Web Platform Installer (Web PI). Anda dapat mengunduh PI Web dari alamat berikut:

https://www.asp.net/downloads/essential/

ASP.NET Proyek MVC

ASP.NET Proyek Aplikasi Web MVC. Luncurkan Visual Studio dan pilih opsi menu File, Proyek Baru. Dialog Proyek Baru muncul (lihat Gambar 1). Pilih jenis proyek Web dan templat Aplikasi Web MVC ASP.NET . Beri nama proyek baru Anda ContactManager dan klik tombol OK.

Pastikan Anda telah .NET Framework 3.5 dipilih dari daftar dropdown di kanan atas dialog Proyek Baru. Jika tidak, templat Aplikasi Web MVC ASP.NET tidak akan muncul.

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

ASP.NET aplikasi MVC, dialog Buat Proyek Pengujian Unit muncul. Anda dapat menggunakan dialog ini untuk menunjukkan bahwa Anda ingin membuat dan menambahkan proyek pengujian unit ke solusi Anda saat membuat aplikasi MVC ASP.NET. Meskipun kami tidak akan membangun pengujian unit dalam iterasi ini, Anda harus memilih opsi Ya, membuat proyek pengujian unit karena kami berencana untuk menambahkan pengujian unit dalam perulangan nanti. Menambahkan proyek Uji saat Anda pertama kali membuat proyek MVC ASP.NET baru jauh lebih mudah daripada menambahkan proyek Uji setelah proyek MVC ASP.NET dibuat.

Catatan

Karena Visual Web Developer tidak mendukung proyek Pengujian, Anda tidak mendapatkan dialog Buat Proyek Pengujian Unit saat menggunakan Visual Web Developer.

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

ASP.NET aplikasi MVC muncul di jendela Penjelajah Solusi Visual Studio (lihat Gambar 3). Jika Anda tidak melihat jendela Penjelajah Solusi maka Anda dapat membuka jendela ini dengan memilih opsi menu Lihat, Penjelajah Solusi. Perhatikan bahwa solusinya berisi dua proyek: proyek MVC ASP.NET dan proyek Uji. Proyek ASP.NET MVC diberi nama ContactManager dan proyek Uji diberi nama ContactManager.Tests.

Gambar 03: Jendela Penjelajah Solusi (Klik untuk melihat gambar ukuran penuh)

Menghapus File Sampel Proyek

Templat proyek MVC ASP.NET menyertakan file sampel untuk pengontrol dan tampilan. Sebelum membuat aplikasi MVC ASP.NET baru, Anda harus menghapus file-file ini. Anda dapat menghapus file dan folder di jendela Penjelajah Solusi dengan mengklik kanan file atau folder dan memilih opsi menu Hapus.

Anda perlu menghapus file berikut dari proyek MVC ASP.NET:

\Controllers\HomeController.vb
\Views\Home\About.aspx
\Views\Home\Index.aspx

Dan, Anda perlu menghapus file berikut dari proyek Uji:

\Controllers\HomeControllerTest.vb

Membuat Database

Aplikasi Contact Manager adalah aplikasi web berbasis database. Kami menggunakan database untuk menyimpan informasi kontak.

Kerangka kerja MVC ASP.NET dengan database modern apa pun termasuk database Microsoft SQL Server, Oracle, MySQL, dan IBM DB2. Dalam tutorial ini, kita menggunakan database Microsoft SQL Server. Saat menginstal Visual Studio, Anda diberikan opsi untuk menginstal Microsoft SQL Server Express yang merupakan versi gratis database Microsoft SQL Server.

Buat database baru dengan mengklik kanan folder App_Data di jendela Penjelajah Solusi dan memilih opsi menu Tambahkan, Item Baru. Dalam dialog Tambahkan Item Baru, pilih kategori Data dan templat database SQL Server (lihat Gambar 4). Beri nama database baru ContactManagerDB.mdf dan klik tombol OK.

Gambar 04: Membuat database Microsoft SQL Server Express baru (Klik untuk melihat gambar ukuran penuh)

Setelah Anda membuat database baru, database muncul di folder App_Data di jendela Penjelajah Solusi. Klik dua kali file ContactManager.mdf untuk membuka jendela Server Explorer dan menyambungkan ke database.

Catatan

Jendela Server Explorer disebut jendela Database Explorer dalam kasus Microsoft Visual Web Developer.

Anda bisa menggunakan jendela Server Explorer untuk membuat objek database baru seperti tabel database, tampilan, pemicu, dan prosedur tersimpan. Klik kanan folder Tabel dan pilih opsi menu Tambahkan Tabel Baru. Designer Tabel Database muncul (lihat Gambar 5).

Gambar 05: Tabel Database Designer (Klik untuk melihat gambar ukuran penuh)

Kita perlu membuat tabel yang berisi kolom berikut:

Nama Kolom	Jenis Data	Perbolehkan Null
Id	int	salah
FirstName	nvarchar(50)	salah
LastName	nvarchar(50)	salah
Nomor	nvarchar(50)	salah
Email	nvarchar(255)	salah

Kolom pertama, kolom Id, adalah khusus. Anda perlu menandai kolom Id sebagai kolom Identitas dan kolom Kunci Primer. Anda menunjukkan bahwa kolom adalah kolom Identitas dengan memperluas Properti Kolom (lihat bagian bawah Gambar 6) dan menggulir ke bawah ke properti Spesifikasi Identitas. Atur properti (Adalah Identitas) ke nilai Ya.

Anda menandai kolom sebagai kolom Kunci Primer dengan memilih kolom dan mengklik tombol dengan ikon kunci. Setelah kolom ditandai sebagai kolom Kunci Primer, ikon kunci muncul di samping kolom (lihat Gambar 6).

Setelah Anda selesai membuat tabel, klik tombol Simpan (tombol dengan ikon floppy) untuk menyimpan tabel baru. Beri nama tabel baru Anda Kontak.

Setelah selesai membuat tabel database Kontak, Anda harus menambahkan beberapa rekaman ke tabel. Klik kanan tabel Kontak di jendela Penjelajah Server dan pilih opsi menu Perlihatkan Data Tabel. Masukkan satu atau beberapa kontak di kisi yang muncul.

Membuat Model Data

Aplikasi MVC ASP.NET terdiri dari Model, Tampilan, dan Pengontrol. Kita mulai dengan membuat kelas Model yang mewakili tabel Kontak yang kita buat di bagian sebelumnya.

Dalam tutorial ini, kami menggunakan Microsoft Entity Framework untuk menghasilkan kelas model dari database secara otomatis.

Catatan

Kerangka kerja MVC ASP.NET tidak terkait dengan Microsoft Entity Framework dengan cara apa pun. Anda dapat menggunakan ASP.NET MVC dengan teknologi akses database alternatif termasuk NHibernate, LINQ ke SQL, atau ADO.NET.

Ikuti langkah-langkah berikut untuk membuat kelas model data:

Klik kanan folder Model di jendela Penjelajah Solusi dan pilih Tambahkan, Item Baru. Dialog Tambahkan Item Baru muncul (lihat Gambar 6).
Pilih Kategori data dan templat Model Data Entitas ADO.NET . Beri nama model data Anda ContactManagerModel.edmx dan klik tombol Tambahkan . Wizard Model Data Entitas muncul (lihat Gambar 7).
Di langkah Pilih Konten Model , pilih Hasilkan dari database (lihat Gambar 7).
Di langkah Pilih Koneksi Data Anda , pilih database ContactManagerDB.mdf dan masukkan nama ContactManagerDBEntities untuk Pengaturan Koneksi Entitas (lihat Gambar 8).
Di langkah Pilih Objek Database Anda , pilih kotak centang berlabel Tabel (lihat Gambar 9). Model data akan menyertakan semua tabel yang terkandung dalam database Anda (hanya ada satu, tabel Kontak). Masukkan Model namespace layanan. Klik tombol Selesai untuk menyelesaikan panduan.

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

Gambar 07: Pilih Konten Model (Klik untuk melihat gambar ukuran penuh)

Gambar 08: Pilih Koneksi Data Anda (Klik untuk melihat gambar ukuran penuh)

Gambar 09: Pilih Objek Database Anda (Klik untuk melihat gambar ukuran penuh)

Setelah Anda menyelesaikan Wizard Model Data Entitas, Model Data Entitas Designer muncul. Perancang menampilkan kelas yang sesuai dengan setiap tabel yang sedang dimodelkan. Anda akan melihat satu kelas bernama Kontak.

Wizard Model Data Entitas menghasilkan nama kelas berdasarkan nama tabel database. Anda hampir selalu perlu mengubah nama kelas yang dihasilkan oleh wizard. Klik kanan kelas Kontak di perancang dan pilih opsi menu Ganti Nama. Ubah nama kelas dari Kontak (jamak) menjadi Kontak (tunggal). Setelah Anda mengubah nama kelas, kelas akan muncul seperti Gambar 10.

Gambar 10: Kelas Kontak (Klik untuk melihat gambar ukuran penuh)

Pada titik ini, kita telah membuat model database kita. Kita dapat menggunakan kelas Kontak untuk mewakili rekaman kontak tertentu dalam database kita.

Membuat Pengontrol Rumah

Langkah selanjutnya adalah membuat pengontrol Rumah kami. Pengontrol Beranda adalah pengontrol default yang dipanggil dalam aplikasi MVC ASP.NET.

Buat kelas Pengontrol Beranda dengan mengklik kanan folder Pengontrol di jendela Penjelajah Solusi dan memilih opsi menu Tambahkan, Pengontrol (lihat Gambar 11). Perhatikan kotak centang berlabel Tambahkan metode tindakan untuk skenario Buat, Perbarui, dan Detail. Pastikan kotak centang ini dicentang sebelum mengklik tombol Tambahkan .

Gambar 11: Menambahkan pengontrol Beranda (Klik untuk melihat gambar ukuran penuh)

Saat membuat pengontrol Rumah, Anda mendapatkan kelas di Daftar 1.

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 Kontak

Untuk menampilkan rekaman dalam tabel database Kontak, kita perlu membuat tindakan Index() dan tampilan Indeks.

Pengontrol Beranda sudah berisi tindakan Index(). Kita perlu memodifikasi metode ini sehingga terlihat seperti Daftar 2.

Daftar 2 - Pengontrol\HomeController.vb

Public Class HomeController
    Inherits System.Web.Mvc.Controller

    Private _entities As New ContactManagerDBEntities()

    '
    ' GET: /Home/

    Function Index() As ActionResult
        Return View(_entities.ContactSet.ToList())
    End Function
…

Perhatikan bahwa kelas Pengontrol Beranda di Daftar 2 berisi bidang privat bernama _entities. Bidang _entities mewakili entitas dari model data. Kami menggunakan bidang _entities untuk berkomunikasi dengan database.

Metode Index() mengembalikan tampilan yang mewakili semua kontak dari tabel database Kontak. Ekspresi _entities. ContactSet.ToList() mengembalikan daftar kontak sebagai daftar generik.

Sekarang setelah kita membuat pengontrol Indeks, kita selanjutnya perlu membuat tampilan Indeks. Sebelum membuat tampilan Indeks, kompilasi aplikasi Anda dengan memilih opsi menu Bangun, Bangun Solusi. Anda harus selalu mengkompilasi proyek Anda sebelum menambahkan tampilan agar daftar kelas model ditampilkan dalam dialog Tambahkan Tampilan .

Anda membuat tampilan Indeks dengan mengklik kanan metode Index() dan memilih opsi menu Tambahkan Tampilan (lihat Gambar 12). Memilih opsi menu ini akan membuka dialog Tambahkan Tampilan (lihat Gambar 13).

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

Dalam dialog Tambahkan Tampilan , centang kotak centang berlabel Buat tampilan yang di ketik dengan kuat. Pilih kelas Tampilkan data ContactManager.Contact dan Tampilkan Daftar konten. Memilih opsi ini menghasilkan tampilan yang menampilkan daftar rekaman Kontak.

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

Saat Anda mengklik tombol Tambahkan , tampilan Indeks di Daftar 3 dibuat. Perhatikan direktif <%@ Halaman %> yang muncul di bagian atas file. Tampilan Indeks mewarisi dari kelas ViewPage<IEnumerable<ContactManager.Models.Contact>> . Dengan kata lain, kelas Model dalam tampilan mewakili daftar entitas Kontak.

Isi tampilan Indeks berisi perulangan foreach yang melakukan iterasi melalui setiap kontak yang diwakili oleh kelas Model. Nilai setiap properti kelas Kontak ditampilkan dalam tabel HTML.

Daftar 3 - Views\Home\Index.aspx (tidak dimodifikasi)

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

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<title>Index</title>
</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>
                FirstName
            </th>
            <th>
                LastName
            </th>
            <th>
                Phone
            </th>
            <th>
                Email
            </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.FirstName)%>
            </td>
            <td>
                <%=Html.Encode(item.LastName)%>
            </td>
            <td>
                <%=Html.Encode(item.Phone)%>
            </td>
            <td>
                <%=Html.Encode(item.Email)%>
            </td>
        </tr>
    
    <% Next%>

    </table>

</asp:Content>

Kita perlu membuat satu modifikasi pada tampilan Indeks. Karena kami tidak membuat tampilan Detail, kami dapat menghapus tautan Detail. Temukan dan hapus kode berikut dari tampilan Indeks:

{.id = item. Id})%>

Setelah mengubah tampilan Indeks, Anda dapat menjalankan aplikasi Contact Manager. Pilih opsi menu Debug, Mulai Debugging atau cukup tekan F5. Saat pertama kali menjalankan aplikasi, Anda mendapatkan dialog di Gambar 14. Pilih opsi Ubah file Web.config untuk mengaktifkan penelusuran kesalahan dan klik tombol OK.

Gambar 14: Mengaktifkan penelusuran kesalahan (Klik untuk melihat gambar ukuran penuh)

Tampilan Indeks dikembalikan secara default. Tampilan ini mencantumkan semua data dari tabel database Kontak (lihat Gambar 15).

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

Perhatikan bahwa tampilan Indeks menyertakan tautan berlabel Buat Baru di bagian bawah tampilan. Di bagian berikutnya, Anda mempelajari cara membuat kontak baru.

Membuat Kontak Baru

Untuk memungkinkan pengguna membuat kontak baru, kita perlu menambahkan dua tindakan Create() ke pengontrol Home. Kita perlu membuat satu tindakan Create() yang mengembalikan formulir HTML untuk membuat kontak baru. Kita perlu membuat tindakan Create() kedua yang melakukan penyisipan database aktual dari kontak baru.

Metode Create() baru yang perlu kita tambahkan ke pengontrol Home terkandung dalam Listing 4.

Daftar 4 - Pengontrol\HomeController.vb (dengan Metode buat)

'
' GET: /Home/Create

Function Create() As ActionResult
    Return View()
End Function

'
' POST: /Home/Create

<AcceptVerbs(HttpVerbs.Post)> _
Function Create(<Bind(Exclude:="Id")> ByVal contactToCreate As Contact) As ActionResult
    If Not ModelState.IsValid Then
        Return View()
    End If

    Try
        _entities.AddToContactSet(contactToCreate)
        _entities.SaveChanges()
        Return RedirectToAction("Index")
    Catch
        Return View()
    End Try
End Function

Metode Create() pertama dapat dipanggil dengan HTTP GET sementara metode Create() kedua hanya dapat dipanggil oleh HTTP POST. Dengan kata lain, metode Create() kedua hanya dapat dipanggil saat memposting formulir HTML. Metode Create() pertama hanya mengembalikan tampilan yang berisi formulir HTML untuk membuat kontak baru. Metode Create() kedua jauh lebih menarik: metode menambahkan kontak baru ke database.

Perhatikan bahwa metode Create() kedua telah dimodifikasi untuk menerima instans kelas Kontak. Nilai formulir yang diposting dari formulir HTML terikat ke kelas Kontak ini oleh kerangka kerja MVC ASP.NET secara otomatis. Setiap bidang formulir dari formulir Buat HTML ditetapkan ke properti parameter Kontak.

Perhatikan bahwa parameter Kontak dihiasi dengan atribut [Bind]. Atribut [Bind] digunakan untuk mengecualikan properti Id Kontak dari pengikatan. Karena properti Id mewakili properti Identitas, kami tidak ingin mengatur properti Id.

Dalam isi metode Create(), Kerangka Kerja Entitas digunakan untuk menyisipkan Kontak baru ke dalam database. Kontak baru ditambahkan ke kumpulan Kontak yang sudah ada dan metode SaveChanges() dipanggil untuk mendorong perubahan ini kembali ke database yang mendasar.

Anda dapat membuat formulir HTML untuk membuat Kontak baru dengan mengklik kanan salah satu dari dua metode Create() dan memilih opsi menu Tambahkan Tampilan (lihat Gambar 16).

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

Dalam dialog Tambahkan Tampilan , pilih kelas ContactManager.Contact dan opsi Buat untuk menampilkan konten (lihat Gambar 17). Saat Anda mengklik tombol Tambahkan , tampilan Buat dibuat secara otomatis.

Gambar 17: Melihat halaman meledak (Klik untuk melihat gambar ukuran penuh)

Tampilan Buat berisi bidang formulir untuk setiap properti kelas Kontak. Kode untuk tampilan Buat disertakan dalam Daftar 5.

Daftar 5 - Views\Home\Create.aspx

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

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<title>Create</title>
</asp:Content>

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

    <h2>Create</h2>

    <%= Html.ValidationSummary() %>

    <% Using Html.BeginForm()%>

        <fieldset>
            <legend>Fields</legend>
            <p>
                <label for="FirstName">FirstName:</label>
                <%= Html.TextBox("FirstName") %>
                <%= Html.ValidationMessage("FirstName", "*") %>
            </p>
            <p>
                <label for="LastName">LastName:</label>
                <%= Html.TextBox("LastName") %>
                <%= Html.ValidationMessage("LastName", "*") %>
            </p>
            <p>
                <label for="Phone">Phone:</label>
                <%= Html.TextBox("Phone") %>
                <%= Html.ValidationMessage("Phone", "*") %>
            </p>
            <p>
                <label for="Email">Email:</label>
                <%= Html.TextBox("Email") %>
                <%= Html.ValidationMessage("Email", "*") %>
            </p>
            <p>
                <input type="submit" value="Create" />
            </p>
        </fieldset>

    <% End Using %>

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

</asp:Content>

Setelah Anda memodifikasi metode Create() dan menambahkan tampilan Buat, Anda dapat menjalankan aplikasi Contact Manger dan membuat kontak baru. Klik tautan Buat Baru yang muncul dalam tampilan Indeks untuk menavigasi ke tampilan Buat. Anda akan melihat tampilan di Gambar 18.

Gambar 18: Tampilan Buat (Klik untuk melihat gambar ukuran penuh)

Mengedit Kontak

Menambahkan fungsionalitas untuk mengedit rekaman kontak sangat mirip dengan menambahkan fungsionalitas untuk membuat rekaman kontak baru. Pertama, kita perlu menambahkan dua metode Edit baru ke kelas Pengontrol Beranda. Metode Edit() baru ini terkandung dalam Daftar 6.

Daftar 6 - Pengontrol\HomeController.vb (dengan metode Edit)

'
' GET: /Home/Edit/5

Function Edit(ByVal id As Integer) As ActionResult
    Dim contactToEdit = (from c in _entities.ContactSet _
                       where c.Id = id _
                       select c).FirstOrDefault()

    Return View(contactToEdit)
End Function

'
' POST: /Home/Edit/5

<AcceptVerbs(HttpVerbs.Post)> _
Function Edit(ByVal contactToEdit As Contact) As ActionResult
    If Not ModelState.IsValid Then
        Return View()
    End If

    Try
        Dim originalContact = (from c in _entities.ContactSet _
                         where c.Id = contactToEdit.Id _
                         select c).FirstOrDefault()
        _entities.ApplyPropertyChanges( originalContact.EntityKey.EntitySetName, contactToEdit)
        _entities.SaveChanges()
        Return RedirectToAction("Index")
    Catch
        Return View()
    End Try
End Function

Metode Edit() pertama dipanggil oleh operasi HTTP GET. Parameter Id diteruskan ke metode ini yang mewakili Id rekaman kontak yang sedang diedit. Kerangka Kerja Entitas digunakan untuk mengambil kontak yang cocok dengan Id. Tampilan yang berisi formulir HTML untuk mengedit rekaman dikembalikan.

Metode Edit() kedua melakukan pembaruan aktual ke database. Metode ini menerima instans kelas Kontak sebagai parameter. Kerangka kerja MVC ASP.NET mengikat bidang formulir dari formulir Edit ke kelas ini secara otomatis. Perhatikan bahwa Anda tidak menyertakan atribut[Bind] saat mengedit Kontak (kami memerlukan nilai properti Id).

Kerangka Kerja Entitas digunakan untuk menyimpan Kontak yang dimodifikasi ke database. Kontak asli harus diambil dari database terlebih dahulu. Selanjutnya, metode Entity Framework ApplyPropertyChanges() dipanggil untuk merekam perubahan pada Kontak. Terakhir, metode Entity Framework SaveChanges() dipanggil untuk mempertahankan perubahan pada database yang mendasar.

Anda dapat membuat tampilan yang berisi formulir Edit dengan mengklik kanan metode Edit() dan memilih opsi menu Tambahkan Tampilan. Dalam dialog Tambahkan Tampilan, pilih kelas ContactManager.Models.Contact dan edit konten tampilan ( lihat Gambar 19).

Gambar 19: Menambahkan Tampilan Edit (Klik untuk melihat gambar ukuran penuh)

Saat Anda mengklik tombol Tambahkan, tampilan Edit baru dibuat secara otomatis. Formulir HTML yang dihasilkan berisi bidang yang sesuai dengan masing-masing properti kelas Kontak (lihat Daftar 7).

Daftar 7 - Views\Home\Edit.aspx

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

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<title>Edit</title>
</asp:Content>

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

    <h2>Edit</h2>

    <%=Html.ValidationSummary()%>

    <% Using Html.BeginForm() %>

        <fieldset>
            <legend>Fields</legend>
            <p>
                <label for="FirstName">FirstName:</label>
                <%= Html.TextBox("FirstName") %>
                <%= Html.ValidationMessage("FirstName", "*") %>
            </p>
            <p>
                <label for="LastName">LastName:</label>
                <%= Html.TextBox("LastName") %>
                <%= Html.ValidationMessage("LastName", "*") %>
            </p>
            <p>
                <label for="Phone">Phone:</label>
                <%= Html.TextBox("Phone") %>
                <%= Html.ValidationMessage("Phone", "*") %>
            </p>
            <p>
                <label for="Email">Email:</label>
                <%= Html.TextBox("Email") %>
                <%= Html.ValidationMessage("Email", "*") %>
            </p>
            <p>
                <input type="submit" value="Save" />
            </p>
        </fieldset>

    <% End Using %>

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

</asp:Content>

Menghapus Kontak

Jika Anda ingin menghapus kontak, Anda perlu menambahkan dua tindakan Delete() ke kelas Pengontrol Beranda. Tindakan Delete() pertama menampilkan formulir konfirmasi penghapusan. Tindakan Delete() kedua melakukan penghapusan aktual.

Catatan

Kemudian, dalam Perulangan #7, kami memodifikasi Contact Manager sehingga mendukung penghapusan Ajax satu langkah.

Dua metode Delete() baru terkandung dalam Listing 8.

Daftar 8 - Pengontrol\HomeController.vb (Metode penghapusan)

'
' GET: /Home/Delete/5

Function Delete(ByVal id As Integer) As ActionResult
    Dim contactToDelete = (from c in _entities.ContactSet _
                       where c.Id = id _
                       select c).FirstOrDefault()

    Return View(contactToDelete)
End Function

'
' POST: /Home/Delete/5

<AcceptVerbs(HttpVerbs.Post)> _
Function Delete(ByVal contactToDelete As Contact) As ActionResult
    Try
        Dim originalContact = (from c in _entities.ContactSet _
                         where c.Id = contactToDelete.Id _
                         select c).FirstOrDefault()
        _entities.DeleteObject(originalContact)
        _entities.SaveChanges()
        Return RedirectToAction("Index")
    Catch
        Return View()
    End Try
End Function

Metode Delete() pertama mengembalikan formulir konfirmasi untuk menghapus rekaman kontak dari database (lihat Gambar20). Metode Delete() kedua melakukan operasi penghapusan aktual terhadap database. Setelah kontak asli diambil dari database, metode Entity Framework DeleteObject() dan SaveChanges() dipanggil untuk melakukan penghapusan database.

Gambar 20: Tampilan konfirmasi penghapusan (Klik untuk melihat gambar ukuran penuh)

Kita perlu mengubah tampilan Indeks sehingga berisi tautan untuk menghapus rekaman kontak (lihat Gambar 21). Anda perlu menambahkan kode berikut ke sel tabel yang sama yang berisi tautan Edit:

{.id = item. Id})%>

Gambar 21: Tampilan indeks dengan tautan Edit (Klik untuk melihat gambar ukuran penuh)

Selanjutnya, kita perlu membuat tampilan konfirmasi penghapusan. Klik kanan metode Delete() di kelas Pengontrol beranda dan pilih opsi menu Tambahkan Tampilan. Dialog Tambahkan Tampilan muncul (lihat Gambar 22).

Tidak seperti dalam kasus tampilan Daftar, Buat, dan Edit, dialog Tambahkan Tampilan tidak berisi opsi untuk membuat tampilan Hapus. Sebagai gantinya, pilih kelas data ContactManager.Models.Contact dan konten Tampilan kosong . Memilih opsi Konten tampilan kosong akan mengharuskan kami untuk membuat tampilan sendiri.

Gambar 22: Menambahkan tampilan konfirmasi penghapusan (Klik untuk melihat gambar ukuran penuh)

Konten tampilan Hapus terkandung dalam Daftar 9. Tampilan ini berisi formulir yang mengonfirmasi apakah kontak tertentu harus dihapus atau tidak (lihat Gambar 21).

Daftar 9 - Views\Home\Delete.aspx

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

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<title>Delete</title>
</asp:Content>

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

    <h2>Delete</h2>
    
    <p>
    Are you sure that you want to delete the entry for
    <%= Model.FirstName %> <%= Model.LastName %>?
    </p>

    <% Using Html.BeginForm(New With { .Id = Model.Id }) %>
       <p> 
            <input type="submit" value="Delete" />
        </p>
    <% End Using %>

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

</asp:Content>

Mengubah Nama Pengontrol Default

Mungkin mengganggu Anda bahwa nama kelas pengontrol kami untuk bekerja dengan kontak diberi nama kelas HomeController. Bukankah pengontrol harus bernama ContactController?

Masalah ini cukup mudah untuk diperbaiki. Pertama, kita perlu merefaktor nama pengontrol Rumah. Buka kelas HomeController di Visual Studio Code Editor, klik kanan nama kelas dan pilih opsi menu Ganti Nama. Memilih opsi menu ini akan membuka dialog Ganti Nama.

Gambar 23: Merefaktor nama pengontrol (Klik untuk melihat gambar ukuran penuh)

Gambar 24: Menggunakan dialog Ganti Nama (Klik untuk melihat gambar ukuran penuh)

Jika Anda mengganti nama kelas pengontrol, Visual Studio juga akan memperbarui nama folder di folder Tampilan. Visual Studio akan mengganti nama folder \Views\Home menjadi folder \Views\Contact.

Setelah Anda membuat perubahan ini, aplikasi Anda tidak akan lagi memiliki pengontrol Rumah. Saat menjalankan aplikasi, Anda akan mendapatkan halaman kesalahan di Gambar 25.

Gambar 25: Tidak ada pengontrol default (Klik untuk melihat gambar ukuran penuh)

Kita perlu memperbarui rute default dalam file Global.asax untuk menggunakan pengontrol Kontak alih-alih pengontrol Beranda. Buka file Global.asax dan ubah pengontrol default yang digunakan oleh rute default (lihat Daftar 10).

Daftar 10 - Global.asax.vb

Public Class MvcApplication
    Inherits System.Web.HttpApplication

    Shared Sub RegisterRoutes(ByVal routes As RouteCollection)
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}")

        ' MapRoute takes the following parameters, in order:
        ' (1) Route name
        ' (2) URL with parameters
        ' (3) Parameter defaults
        routes.MapRoute( _
            "Default", _
            "{controller}/{action}/{id}", _
            New With {.controller = "Home", .action = "Index", .id = ""} _
        )

    End Sub

    Sub Application_Start()
        RegisterRoutes(RouteTable.Routes)
    End Sub
End Class

Setelah Anda membuat perubahan ini, Contact Manager akan berjalan dengan benar. Sekarang, ini akan menggunakan kelas Pengontrol kontak sebagai pengontrol default.

Ringkasan

Dalam iterasi pertama ini, kami membuat aplikasi Contact Manager dasar dengan cara tercepat yang mungkin. Kami memanfaatkan Visual Studio untuk menghasilkan kode awal untuk pengontrol dan tampilan kami secara otomatis. Kami juga memanfaatkan Entity Framework untuk menghasilkan kelas model database kami secara otomatis.

Saat ini, kita dapat mencantumkan, membuat, mengedit, dan menghapus rekaman kontak dengan aplikasi Contact Manager. Dengan kata lain, kita dapat melakukan semua operasi database dasar yang diperlukan oleh aplikasi web berbasis database.

Sayangnya, aplikasi kami memiliki beberapa masalah. Pertama dan saya ragu untuk mengakui ini, aplikasi Contact Manager bukan aplikasi yang paling menarik. Perlu beberapa pekerjaan desain. Dalam perulangan berikutnya, kita akan melihat bagaimana kita dapat mengubah halaman master tampilan default dan lembar gaya bertingkat untuk meningkatkan tampilan aplikasi.

Kedua, kami belum menerapkan validasi formulir apa pun. Misalnya, tidak ada yang mencegah Anda mengirimkan formulir Buat kontak tanpa memasukkan nilai untuk salah satu bidang formulir. Selain itu, Anda dapat memasukkan nomor telepon dan alamat email yang tidak valid. Kami mulai mengatasi masalah validasi formulir dalam iterasi #3.

Akhirnya, dan yang paling penting, iterasi aplikasi Contact Manager saat ini tidak dapat dengan mudah dimodifikasi atau dipertahankan. Misalnya, logika akses database dipanggang tepat ke dalam tindakan pengontrol. Ini berarti bahwa kami tidak dapat memodifikasi kode akses data tanpa memodifikasi pengontrol kami. Dalam iterasi selanjutnya, kami mengeksplorasi pola desain perangkat lunak yang dapat kami terapkan untuk membuat Contact Manager lebih tahan terhadap perubahan.

Sebelumnya Berikutnya

Saran dan Komentar

Apakah halaman ini membantu?

Last updated on 2023-07-13

Bagikan melalui

Iterasi #1 – Buat Aplikasi (VB)

Membangun Manajemen Kontak ASP.NET Aplikasi MVC (VB)

Perulangan ini

Prasyarat Perangkat Lunak

ASP.NET Proyek MVC

Menghapus File Sampel Proyek

Membuat Database

Membuat Model Data

Membuat Pengontrol Rumah

Mencantumkan Kontak

Membuat Kontak Baru

Mengedit Kontak

Menghapus Kontak

Mengubah Nama Pengontrol Default

Ringkasan

Saran dan Komentar

Sumber Daya Tambahan: