Tutorial: Mulai menggunakan C# dan ASP.NET Core di Visual Studio

Dalam tutorial ini untuk pengembangan C# dengan ASP.NET Core, Anda membuat aplikasi web C# ASP.NET Core di Visual Studio.

Tutorial ini akan menunjukkan cara untuk:

• Membuat proyek Visual Studio
• Buat aplikasi web C# ASP.NET Core
• Buat perubahan pada aplikasi web
• Menjelajahi fitur IDE
• Jalankan aplikasi web

Prasyarat

Anda memerlukan Visual Studio untuk menyelesaikan tutorial ini. Kunjungi halaman pengunduhan Visual Studio untuk mendapatkan versi gratis.

• Untuk informasi selengkapnya tentang peningkatan ke rilis Visual Studio terbaru, lihat Visual Studio pembaruan.

• Untuk menyesuaikan pengalaman Visual Studio Anda, lihat mempersonalisasi IDE dan Editor Visual Studio.

Membuat proyek

Pertama, Anda membuat proyek ASP.NET Core. Jenis proyek dilengkapi dengan semua file templat yang Anda butuhkan untuk membangun situs web yang berfungsi penuh.

1. Di jendela mulai, pilih Buat proyek baru.

   

2. Di jendela Buat proyek baru, pilih C# dari daftar Bahasa. Berikutnya, pilih Windows dari daftar platform, dan Web dari daftar jenis proyek.

   Setelah Anda menerapkan filter bahasa, platform, dan jenis proyek, pilih templat ASP.NET Core Web App, lalu pilih Berikutnya.

   

   Catatan

   Jika Anda tidak melihat templat ASP.NET Core Web App, Anda dapat menginstalnya dari jendela Buat proyek baru.

   Di pesan Tidak menemukan apa yang Anda cari? di bagian bawah daftar templat, pilih tautan Instal alat dan fitur lainnya.

   

   Di Penginstal Visual Studio, pilih beban kerja ASP.NET dan pengembangan web.

   

   Pilih Ubah di alat penginstal Visual Studio. Anda mungkin diminta untuk menyimpan pekerjaan Anda. Pilih Lanjutkan untuk menginstal beban kerja.

   Kembali ke langkah 2 dalam prosedur "Buat proyek" ini.

3. Di jendela Konfigurasikan proyek baru Anda, masukkan MyCoreApp di bidang nama Proyek. Kemudian, pilih Berikutnya.

   

4. Di jendela Informasi tambahan, verifikasi bahwa .NET 8.0 muncul di bidang Kerangka Kerja Target.

   Dari jendela ini, Anda dapat mengaktifkan dukungan Docker dan menambahkan dukungan autentikasi. Menu drop-down untuk Jenis Autentikasi memiliki empat opsi berikut:

   • Tidak Ada: Tidak ada autentikasi.
   • Akun individual: Autentikasi ini disimpan dalam database lokal atau berbasis Azure.
   • platform identitas Microsoft: Opsi ini menggunakan MICROSOFT Entra ID atau Microsoft 365 untuk autentikasi.
   • Windows: Cocok untuk aplikasi intranet.

   Biarkan kotak Aktifkan Docker tidak dicentang, dan pilih Tidak Ada untuk Jenis Autentikasi.

   

5. Pilih Buat.

Visual Studio membuka proyek baru Anda.

Tentang solusi Anda

Solusi ini mengikuti pola desain Halaman Razor. Ini berbeda dari pola desain Model-View-Controller (MVC) karena disederhanakan untuk menyertakan model dan kode pengontrol dalam Halaman Razor itu sendiri.

Tur solusi Anda

1. Templat proyek membuat solusi dengan satu proyek ASP.NET Core bernama MyCoreApp. Pilih tab Penjelajah Solusi untuk melihat kontennya.

   

2. Luaskan map Halaman.

   

3. Pilih file Index.cshtml, dan lihat di editor kode.

   

4. Setiap file .cshtml memiliki file kode terkait. Untuk membuka file kode di editor, perluas node Index.cshtml di Penjelajah Solusi, dan pilih file Index.cshtml.cs.

   

5. Lihat file Index.cshtml.cs di editor kode.

   

6. Proyek ini berisi folder wwwroot , yang merupakan akar untuk situs web Anda. Luaskan folder untuk melihat isinya.

   

   Anda dapat meletakkan konten situs statis seperti pustaka CSS, gambar, dan JavaScript langsung di jalur tempat Anda menginginkannya.

7. Proyek ini juga berisi file konfigurasi yang mengelola aplikasi web pada durasi. Konfigurasi aplikasi default disimpan di appsettings.json. Namun, Anda dapat mengambil alih pengaturan ini dengan menggunakan appsetting. Development.json. Perluas file appsettings.json untuk melihat appsettings. File Development.json.

   

Jalankan, debug, dan buat perubahan

1. Di toolbar, pilih tombol IIS Express untuk membuat dan menjalankan aplikasi dalam mode debug. Atau, tekan F5, atau buka Debug>Mulai Penelusuran Kesalahan dari bilah menu.

   

   Catatan

   Jika Anda mendapatkan pesan kesalahan yang mengatakan Tidak dapat tersambung ke server web 'IIS Ekspres', tutup Visual Studio lalu luangkan kembali program sebagai administrator. Anda dapat melakukan tugas ini dengan mengklik kanan ikon Visual Studio dari Menu Mulai, lalu memilih opsi Jalankan sebagai administrator dari menu konteks.

   Anda mungkin juga mendapatkan pesan yang menanyakan apakah Anda ingin menerima sertifikat IIS SSL Ekspres. Untuk melihat kode di browser web, pilih Ya, lalu pilih Ya jika Anda menerima pesan peringatan keamanan tindak lanjut.

2. Visual Studio meluncurkan jendela browser. Anda kemudian akan melihat halaman Beranda dan Privasi di bilah menu.

3. Pilih Privasi dari bilah menu. Halaman Privasi di browser merender teks yang diatur dalam file Privacy.cshtml .

   

4. Kembali ke Visual Studio, lalu tekan Shift+F5 untuk menghentikan penelusuran kesalahan. Tindakan ini menutup proyek di jendela browser.

5. Di Visual Studio, buka Privacy.cshtml untuk pengeditan. Berikutnya, hapus kalimat, Gunakan halaman ini untuk merinci kebijakan privasi situs Anda dan menggantinya dengan Halaman ini sedang dibangun pada @ViewData["TimeStamp"].

   

6. Sekarang, mari kita buat perubahan kode. Pilih Privacy.cshtml.cs. Kemudian, bersihkan arahan using di bagian atas file dengan memilih pintasan berikut:

   Mouseover atau pilih arahan abu-abu using. Bola lampu Tindakan Cepat muncul di bawah tanda sisipan atau di margin kiri. Pilih bola lampu, lalu pilih panah perluas di samping Hapus penggunaan yang tidak perlu.

   

   Sekarang pilih Pratinjau perubahan untuk melihat perubahan apa.

   

   Pilih Terapkan. Visual Studio menghapus arahan yang tidak perlu using dari file.

7. Selanjutnya, buat string untuk tanggal saat ini yang diformat untuk budaya atau wilayah Anda dengan menggunakan metode DateTime.ToString .

   • Argumen pertama untuk metode menentukan bagaimana tanggal harus ditampilkan. Contoh ini menggunakan penentu format (d) yang menunjukkan format tanggal pendek.
   • Argumen kedua adalah objek CultureInfo yang menentukan budaya atau wilayah untuk tanggal tersebut. Argumen kedua menentukan, antara lain, bahasa kata apa pun dalam tanggal, dan jenis pemisah yang digunakan.

   Ubah isi metode menjadi OnGet() kode berikut:

   public void OnGet()
   {
      string dateTime = DateTime.Now.ToString("d", new CultureInfo("en-US"));
      ViewData["TimeStamp"] = dateTime;
   }
   

8. Perhatikan bahwa direktif berikut using secara otomatis ditambahkan ke bagian atas file:

   using System.Globalization;
   

   System.Globalizationberisi kelas CultureInfo.

9. Tekan F5 untuk membuka proyek Anda di browser web.

10. Di bagian atas situs web, pilih Privasi untuk melihat perubahan Anda.

    

11. Tutup browser web, tekan Shift+F5 untuk menghentikan penelusuran kesalahan.

Mengubah halaman Beranda Anda

1. Di Penjelajah Solusi, perluas folder Pages, lalu pilih Index.cshtml.

   

   File Index.cshtml sesuai dengan halaman Beranda Anda di aplikasi web, yang berjalan di browser web.

   

   Di editor kode, Anda akan melihat kode HTML untuk teks yang muncul di halaman Beranda .

   

2. Ganti teks Selamat Datang dengan Halo Dunia!

   

3. Pilih IIS Ekspres atau tekan Ctrl+F5 untuk menjalankan aplikasi dan membukanya di browser web.

   

4. Di browser web, Anda akan melihat perubahan baru di halaman Beranda .

   

5. Tutup browser web, tekan Shift+F5 untuk menghentikan penelusuran kesalahan, dan simpan proyek Anda. Anda sekarang dapat menutup Visual Studio.

Langkah berikutnya

Selamat atas penyelesaian tutorial ini! Kami harap Anda menikmati belajar tentang C#, ASP.NET Core, dan IDE Visual Studio. Untuk mempelajari selengkapnya tentang membuat aplikasi web atau situs web dengan C# dan ASP.NET, lanjutkan dengan tutorial berikut:

Membuat aplikasi web Razor Pages dengan ASP.NET Core

Atau, pelajari cara membuat kontainer aplikasi web Anda dengan Docker:

Alat Kontainer di Visual Studio

Baca juga

Menerbitkan aplikasi web Anda ke Azure App Service dengan menggunakan Visual Studio