Iterasi #2 - Membuat aplikasi terlihat bagus (C#)

2023-07-13

Dalam perulangan ini, kami meningkatkan tampilan aplikasi dengan memodifikasi halaman master tampilan ASP.NET MVC default dan lembar gaya bertingkat.

Membangun Manajemen Kontak ASP.NET Aplikasi MVC (C#)

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

Tujuan dari iterasi ini adalah untuk meningkatkan tampilan aplikasi Contact Manager. Saat ini, Contact Manager menggunakan halaman master tampilan MVC ASP.NET default dan lembar gaya kaskading (lihat Gambar 1). Ini tidak terlihat buruk, tetapi saya tidak ingin Contact Manager terlihat seperti situs web MVC ASP.NET lainnya. Saya ingin mengganti file-file ini dengan file kustom.

Gambar 01: Tampilan default Aplikasi MVC ASP.NET (Klik untuk melihat gambar ukuran penuh)

Dalam iterasi ini, saya membahas dua pendekatan untuk meningkatkan desain visual aplikasi kami. Pertama, saya menunjukkan kepada Anda cara memanfaatkan galeri Desain MVC ASP.NET untuk mengunduh templat desain MVC ASP.NET gratis. Galeri desain MVC ASP.NET memungkinkan Anda membuat aplikasi web profesional tanpa melakukan pekerjaan apa pun.

Saya memutuskan untuk tidak menggunakan templat dari galeri Desain MVC ASP.NET untuk aplikasi Contact Manager. Sebaliknya, saya memiliki desain khusus yang dibuat oleh perusahaan desain profesional. Di bagian kedua tutorial ini, saya menjelaskan bagaimana saya bekerja dengan perusahaan desain profesional untuk membuat desain akhir ASP.NET MVC.

Gambar 02: Galeri Desain MVC ASP.NET (Klik untuk melihat gambar ukuran penuh)

Saat saya menulis tutorial ini, desain paling populer di galeri adalah desain bernama Oktober oleh David Hauser. Anda dapat menggunakan desain ini untuk proyek MVC ASP.NET dengan menyelesaikan langkah-langkah berikut:

Klik tombol Unduh untuk mengunduh file October.zip ke komputer Anda.
Klik kanan file October.zip yang diunduh dan klik tombol Buka Blokir (lihat Gambar 3).
Unzip file ke folder bernama Oktober.
Pilih semua file dari folder DesignTemplate yang terkandung dalam folder Oktober, klik kanan file, dan pilih opsi menu Salin.
Klik kanan simpul proyek ContactManager di jendela Penjelajah Solusi Visual Studio dan pilih opsi menu Tempel (lihat Gambar 4).
Pilih opsi menu Visual Studio Edit, Temukan dan Ganti, Ganti Cepat dan ganti [MyProjectName] dengan ContactManager (lihat Gambar 5).

Gambar 03: Membuka blokir file yang diunduh dari web (Klik untuk melihat gambar ukuran penuh)

Gambar 04: Menimpa file di Penjelajah Solusi (Klik untuk melihat gambar ukuran penuh)

Gambar 05: Mengganti [ProjectName] dengan ContactManager (Klik untuk melihat gambar ukuran penuh)

Setelah Anda menyelesaikan langkah-langkah ini, aplikasi web Anda akan menggunakan desain baru. Halaman di Gambar 6 menggambarkan tampilan aplikasi Contact Manager dengan desain Oktober.

Gambar 06: ContactManager dengan templat Oktober (Klik untuk melihat gambar ukuran penuh)

Membuat Desain MVC ASP.NET Kustom

Galeri Desain MVC ASP.NET memiliki pilihan gaya desain yang berbeda. Gallery memberi Anda cara tanpa rasa sakit untuk menyesuaikan tampilan aplikasi MVC ASP.NET Anda. Dan, tentu saja, Gallery memiliki keuntungan besar sepenuhnya gratis.

Namun, Anda mungkin perlu membuat desain yang benar-benar unik untuk situs web Anda. Dalam hal ini, masuk akal untuk bekerja dengan perusahaan desain situs web. Saya memutuskan untuk mengambil pendekatan ini untuk desain untuk aplikasi Contact Manager.

Saya membuat zip Contact Manager dari Iterasi #1 dan mengirim proyek ke perusahaan desain. Mereka tidak memiliki Visual Studio (mempermalukan mereka!), tetapi itu tidak menimbulkan masalah. Mereka dapat mengunduh Microsoft Visual Web Developer secara gratis dari https://www.asp.net situs web dan membuka aplikasi Contact Manager di Visual Web Developer. Dalam beberapa hari, mereka telah memproduksi desain di Gambar 7.

Gambar 07: Desain ASP.NET MVC Contact Manager (Klik untuk melihat gambar ukuran penuh)

Desain baru terdiri dari dua file utama: file lembar gaya kaskading baru dan file halaman master tampilan baru. Halaman master tampilan berisi tata letak dan konten bersama untuk tampilan dalam aplikasi MVC ASP.NET. Misalnya, halaman master tampilan menyertakan header, tab navigasi, dan footer yang muncul di Gambar 7. Saya menimpa halaman master tampilan Site.Master yang ada di folder Views\Shared dengan file Site.Master baru dari perusahaan desain,

Perusahaan desain juga membuat lembar gaya kaskading baru dan sekumpulan gambar. Saya menempatkan file baru ini di folder Konten dan menimpa file Site.css yang ada. Anda harus menempatkan semua konten statis di folder Konten.

Perhatikan bahwa desain baru untuk Contact Manager menyertakan gambar untuk mengedit dan menghapus kontak. Gambar Edit dan Hapus muncul di samping setiap kontak dalam tabel KONTAK HTML.

Awalnya, tautan ini yang dirender dengan HTML. Pembantu ActionLink() seperti ini:

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

Metode Html.ActionLink() tidak mendukung gambar (metode HTML mengodekan teks tautan karena alasan keamanan). Oleh karena itu, saya mengganti panggilan ke Html.ActionLink() dengan panggilan ke Url.Action() seperti ini:

<td class="actions edit">
    <a href='<%= Url.Action("Edit", new {id=item.Id}) %>'><img src="../../Content/Edit.png" alt="Edit" /></a>
</td>
<td class="actions delete">
    <a href='<%= Url.Action("Delete", new {id=item.Id}) %>'><img src="../../Content/Delete.png" alt="Delete" /></a>
</td>

Metode Html.ActionLink() merender seluruh hyperlink HTML. Metode Url.Action(), di sisi lain, hanya merender URL tanpa <> tag.

Perhatikan, selain itu, bahwa desain baru mencakup tab yang dipilih dan tidak dipilih. Misalnya, di Gambar 8, tab Buat Kontak Baru dipilih dan tab Kontak Saya tidak dipilih.

Gambar 08: Tab yang dipilih dan tidak dipilih (Klik untuk melihat gambar ukuran penuh)

Untuk mendukung penyajian tab yang dipilih dan tidak dipilih, saya membuat pembantu HTML kustom bernama MenuItemHelper. Metode pembantu ini merender <tag li> atau <tag li class="selected"> tergantung pada apakah pengontrol dan tindakan saat ini sesuai dengan pengontrol dan nama tindakan yang diteruskan ke pembantu. Kode untuk MenuItemHelper terkandung dalam Listing 1.

Daftar 1 - Helpers\MenuItemHelper.cs

using System;
using System.Web.Mvc;
using System.Web.Mvc.Html;

namespace Helpers
{
    /// <summary>
    /// This helper method renders a link within an HTML LI tag.
    /// A class="selected" attribute is added to the tag when
    /// the link being rendered corresponds to the current
    /// controller and action.
    /// 
    /// This helper method is used in the Site.Master View 
    /// Master Page to display the website menu.
    /// </summary>
    public static class MenuItemHelper
    {
        public static string MenuItem(this HtmlHelper helper, string linkText, string actionName, string controllerName)
        {
            string currentControllerName = (string)helper.ViewContext.RouteData.Values["controller"];
            string currentActionName = (string)helper.ViewContext.RouteData.Values["action"];

            var builder = new TagBuilder("li");
            
            // Add selected class
            if (currentControllerName.Equals(controllerName, StringComparison.CurrentCultureIgnoreCase) && currentActionName.Equals(actionName, StringComparison.CurrentCultureIgnoreCase))
                builder.AddCssClass("selected");            
            
            // Add link
            builder.InnerHtml = helper.ActionLink(linkText, actionName, controllerName);

            // Render Tag Builder
            return builder.ToString(TagRenderMode.Normal);
        }

    }
}

MenuItemHelper menggunakan kelas TagBuilder secara internal untuk membangun <tag HTML li> . Kelas TagBuilder adalah kelas utilitas yang sangat berguna yang dapat Anda gunakan kapan pun Anda perlu membangun tag HTML baru. Ini termasuk metode untuk menambahkan atribut, menambahkan kelas CSS, menghasilkan Id, dan memodifikasi HTML dalam tag.

Ringkasan

Dalam iterasi ini, kami meningkatkan desain visual aplikasi MVC ASP.NET kami. Pertama, Anda diperkenalkan dengan ASP.NET MVC Design Gallery. Anda mempelajari cara mengunduh templat desain gratis dari ASP.NET MVC Design Gallery yang dapat Anda gunakan di aplikasi MVC ASP.NET Anda.

Selanjutnya, kami membahas bagaimana Anda dapat membuat desain kustom dengan memodifikasi file lembar gaya kaskading default dan file halaman tampilan master. Untuk mendukung desain baru, kami harus membuat beberapa perubahan kecil pada aplikasi Contact Manager kami. Misalnya, kami menambahkan pembantu HTML baru bernama MenuItemHelper yang menampilkan tab yang dipilih dan tidak dipilih.

Dalam iterasi berikutnya, kami mengatasi subjek validasi yang sangat penting. Kami menambahkan kode validasi ke aplikasi kami sehingga pengguna tidak dapat membuat kontak baru tanpa menyediakan nilai yang diperlukan seperti nama depan dan belakang seseorang.

Sebelumnya Berikutnya

Bagikan melalui

Iterasi #2 - Membuat aplikasi terlihat bagus (C#)

Membangun Manajemen Kontak ASP.NET Aplikasi MVC (C#)

Perulangan ini

Membuat Desain MVC ASP.NET Kustom

Ringkasan

Saran dan Komentar

Sumber Daya Tambahan: