Bagikan melalui

Memprogram ASP.NET Halaman Web (Razor) Menggunakan Visual Studio

oleh Tom FitzMacken

Artikel ini menjelaskan cara menggunakan Visual Studio atau Visual Web Developer Express untuk memprogram situs web ASP.NET Web Pages (Razor).

Apa yang akan Anda pelajari

  • Apa yang perlu Anda instal (jika ada) untuk bekerja dengan ASP.NET Halaman Web di versi Visual Studio Anda.
  • Cara menambahkan dukungan untuk ASP.NET Web Pages ke Visual Web Developer 2010 Express.
  • Cara menggunakan fitur di Visual Studio untuk bekerja dengan halaman ASP.NET Razor, termasuk IntelliSense dan debugger.

Versi perangkat lunak yang digunakan dalam tutorial

  • Halaman Web ASP.NET (Razor) 3
  • Visual Studio 2013
  • WebMatrix 3

Tutorial ini juga berfungsi dengan ASP.NET Web Pages 2, Visual Studio 2012, Visual Studio 2010, dan WebMatrix 2.

Anda dapat memprogram ASP.NET halaman Web dengan sintaks Razor menggunakan WebMatrix atau banyak editor kode lainnya. Anda juga dapat menggunakan Microsoft Visual Studio yang merupakan lingkungan pengembangan terpadu (IDE) berfungsi lengkap yang menyediakan seperangkat alat canggih untuk membuat banyak jenis aplikasi (bukan hanya situs web). Untuk bekerja dengan halaman ASP.NET Razor, Anda dapat menggunakan Visual Studio 2017.

Dua fitur yang sangat berguna yang disediakan Visual Studio untuk pemrograman dengan halaman web ASP.NET Razor adalah:

  • IntelliSense. Fitur IntelliSense yang disertakan dalam Visual Studio lebih komprehensif daripada IntelliSense di WebMatrix.
  • Debugger. Debugger memungkinkan Anda memecahkan masalah kode dengan menghentikan program saat menjalankan, memeriksa variabel, dan melangkah melalui baris demi baris kode.

Menggunakan Visual Studio dengan Versi Halaman Web ASP.NET yang Berbeda

Untuk mengembangkan aplikasi web ASP.NET di Visual Studio 2017, instal beban kerja ASP.NET dan pengembangan web .

Visual Studio 2012 dan Visual Studio 2013 menyertakan dukungan untuk Halaman Web ASP.NET. (Paket yang diperlukan untuk mendukung ASP.NET Web Pages diinstal saat Anda menginstal Visual Studio.)

Visual Studio 2010 tidak menyertakan dukungan secara default untuk halaman web ASP.NET. Untuk menggunakan ASP.NET Web Pages dengan Visual Studio 2010, Anda harus menginstal paket MVC ASP.NET. Untuk mendapatkan ASP.NET Halaman Web 2, Anda menginstal ASP.NET MVC 4.

Tabel berikut ini meringkas dukungan untuk halaman web ASP.NET di versi Visual Studio yang berbeda.

Visual Studio 2010 Visual Studio 2012 Visual Studio 2013
ASP.NET Halaman Web 2 Menginstal ASP.NET MVC 4 (Disertakan) (Disertakan)
ASP.NET Halaman Web 3 Perbarui ke ASP.NET Halaman Web 3 hingga NuGet (Disertakan)

Untuk bekerja dengan Visual Studio 2010, lihat Menginstal Dukungan untuk halaman web ASP.NET di Visual Studio 2010.

Meluncurkan Visual Studio dari WebMatrix

Jika Anda telah memulai proyek di WebMatrix dan ingin beralih ke Visual Studio, WebMatrix menyediakan tombol untuk membuka proyek dengan mudah di Visual Studio. Anda harus menginstal Visual Studio di komputer agar tombol ini diaktifkan. Gambar berikut menunjukkan tombol di WebMatrix.

luncurkan Visual Studio

Saat Anda mengklik tombol , proyek dibuka di Visual Studio. Anda dapat beralih bolak-balik antara WebMatrix dan Visual Studio tanpa masalah. Anda akan diberi tahu jika ada file yang telah berubah di lingkungan lain dan perlu dimuat ulang untuk mendapatkan perubahan terbaru.

Membuat Situs ASP.NET Razor di Visual Studio

Untuk membuat situs web ASP.NET Razor di Visual Studio:

  1. Buka Visual Studio.

  2. Di menu File , klik Situs Web Baru.

    buat situs web baru

  3. Dalam kotak dialog Situs Web Baru , pilih bahasa yang akan digunakan (Visual C# atau Visual Basic).

  4. Pilih templat ASP.NET Web Site (Razor).

    situs razor

  5. Klik OK.

Proyek baru Anda ada dan diisi dengan beberapa halaman web default untuk membantu Anda memulai.

Menggunakan IntelliSense

Setelah membuat situs, Anda dapat melihat cara kerja IntelliSense di Visual Studio.

  1. Di situs web yang baru saja Anda buat, buka halaman Default.cshtml .

  2. <h3> Setelah tag di halaman, ketik @ServerInfo. (termasuk titik). Perhatikan bagaimana IntelliSense menampilkan metode yang tersedia untuk pembantu ServerInfo dalam daftar drop-down.

    Intellisense

  3. GetHtml Pilih metode dari daftar lalu tekan Enter. IntelliSense secara otomatis mengisi metode . (Seperti halnya metode apa pun dalam C#, Anda harus menambahkan () karakter setelah metode .) Kode lengkap untuk GetHtml metode terlihat seperti contoh berikut:

    @ServerInfo.GetHtml()

  4. Tekan Ctrl+F5 untuk menjalankan halaman. Seperti inilah tampilan halaman saat ditampilkan di browser:

    halaman default di browser

  5. Tutup browser.

Menggunakan Debugger

  1. Di bagian atas halaman Default.cshtml , setelah baris yang dimulai dengan Page.Title, tambahkan baris kode berikut:

    var myTime = DateTime.Now.TimeOfDay;

  2. Di margin abu-abu editor di sebelah kiri kode, klik di samping baris baru ini untuk menambahkan titik henti. Titik henti adalah penanda yang memberi tahu debugger untuk berhenti menjalankan program pada saat itu sehingga Anda dapat melihat apa yang terjadi.

    atur titik henti

  3. Hapus panggilan ke ServerInfo.GetHtml metode , dan tambahkan panggilan ke @myTime variabel di tempatnya. Panggilan ini menampilkan nilai waktu saat ini yang dikembalikan oleh baris kode baru.

  4. Tekan F5 untuk menjalankan halaman di debugger. Halaman berhenti pada titik henti yang Anda tetapkan. Gambar berikut menunjukkan seperti apa halaman di editor dengan titik henti (berwarna kuning).

    titik henti debug

  5. Di toolbar Debug, klik tombol Masuk ( atau tekan F11) untuk menjalankan baris kode berikutnya. Setiap kali Anda mengklik tombol ini, Anda melanjutkan eksekusi ke baris kode berikutnya.

    Melangkah ke tombol

  6. Periksa nilai myTime variabel dengan menahan penunjuk mouse Anda di atasnya atau dengan memeriksa nilai yang ditampilkan di jendela Lokal dan Tumpukan Panggilan . Visual Studio menampilkan nilai variabel.

    perlihatkan nilai waktu

  7. Setelah selesai memeriksa variabel dan melangkah melalui kode, tekan F5 untuk terus menjalankan halaman tanpa berhenti di setiap baris. Setelah selesai menelusuri semua kode, browser akan menampilkan halaman.

Untuk mempelajari selengkapnya tentang debugger dan tentang cara men-debug kode di Visual Studio, lihat Panduan: Penelusuran Kesalahan Halaman Web di Visual Web Developer.

Menggunakan Razor dalam proyek MVC ASP.NET dengan Visual Studio

Sintaks Razor juga digunakan secara ekstensif dalam proyek MVC ASP.NET. MVC adalah cara berbasis pola yang kuat untuk membangun situs web dinamis. Jika situs Halaman Web ASP.NET Anda menjadi sulit dipertahankan, Anda mungkin ingin mempertimbangkan untuk mengonversinya ke aplikasi MVC ASP.NET. Untuk contoh pembuatan aplikasi MVC, lihat Mulai menggunakan ASP.NET MVC 5.

Menginstal Dukungan untuk Halaman Web ASP.NET di Visual Studio 2010

Bagian ini memperlihatkan cara menginstal Visual Web Developer Express 2010 dan alat ASP.NET Web Pages untuk Visual Studio.

  1. Jika Anda belum memiliki Penginstal Platform Web, unduh dari URL berikut:

    https://www.microsoft.com/web/downloads/platform.aspx

  2. Jalankan Alat Penginstal Platform Web.

  3. Klik tab Produk .

    Tab Produk WebPI

  4. Cari ASP.NET MVC 4 (untuk halaman web ASP.NET 2) lalu klik Tambahkan. Produk-produk ini termasuk alat Visual Studio untuk membangun situs web ASP.NET Razor.

    Opsi penginstalan WebPi

  5. Pilih Instal untuk menyelesaikan penginstalan.