Pengeditan Kode ASP.NET Formulir Web di Visual Studio 2013

oleh Erik Reitan

Di banyak halaman ASP.NET Web Form, Anda menulis kode di Visual Basic, C#, atau bahasa lain. Editor kode di Visual Studio dapat membantu Anda menulis kode dengan cepat sambil membantu Anda menghindari kesalahan. Selain itu, editor menyediakan cara bagi Anda untuk membuat kode yang dapat digunakan kembali untuk membantu mengurangi jumlah pekerjaan yang perlu Anda lakukan.

Panduan ini menggambarkan berbagai fitur editor kode Visual Studio.

Selama panduan ini, Anda akan mempelajari cara:

Kesalahan pengkodian sebaris yang benar.
Refaktor dan ganti nama kode.
Mengganti nama variabel dan objek.
Sisipkan cuplikan kode.

Prasyarat

Untuk menyelesaikan panduan ini, Anda memerlukan:

Microsoft Visual Studio 2013 atau Microsoft Visual Studio Express 2013 untuk Web. .NET Framework diinstal secara otomatis.

Catatan

Microsoft Visual Studio 2013 dan Microsoft Visual Studio Express 2013 for Web sering disebut sebagai Visual Studio di seluruh seri tutorial ini.

Jika Anda menggunakan Visual Studio, panduan ini mengasumsikan bahwa Anda memilih kumpulan pengaturan Pengembangan Web saat pertama kali memulai Visual Studio. Untuk informasi selengkapnya, lihat Cara: Pilih Pengaturan Lingkungan Pengembangan Web.

Membuat proyek aplikasi Web dan Halaman

Di bagian panduan ini, Anda akan membuat proyek aplikasi Web dan menambahkan halaman baru ke dalamnya.

Untuk membuat proyek aplikasi Web

Buka Microsoft Visual Studio.
Pada menu File, pilih Proyek Baru.

Kotak dialog Proyek Baru muncul.
Pilih grup Templat ->Visual C# ->Templat web di sebelah kiri.
Pilih templat ASP.NET Web Application di kolom tengah.
Beri nama proyek Anda BasicWebApp dan klik tombol OK .
Selanjutnya, pilih templat Formulir Web dan klik tombol OK untuk membuat proyek.

Visual Studio membuat proyek baru yang menyertakan fungsionalitas bawaan berdasarkan templat Formulir Web.

Membuat Halaman Formulir Web ASP.NET baru

Saat Anda membuat aplikasi Web Forms baru menggunakan templat proyek Aplikasi Web ASP.NET , Visual Studio menambahkan halaman ASP.NET (halaman Formulir Web) bernama Default.aspx, serta beberapa file dan folder lainnya. Anda dapat menggunakan halaman Default.aspx sebagai halaman beranda untuk aplikasi Web Anda. Namun, untuk panduan ini, Anda akan membuat dan bekerja dengan halaman baru.

Untuk menambahkan halaman ke aplikasi Web

Di Penjelajah Solusi, klik kanan nama aplikasi Web (dalam tutorial ini nama aplikasinya adalah BasicWebSite), lalu klik Tambahkan ->Item Baru.
Kotak dialog Tambahkan Item Baru ditampilkan.
Pilih grup Visual C# ->Templat web di sebelah kiri. Kemudian, pilih Formulir Web dari daftar tengah dan beri nama FirstWebPage.aspx.
Klik Tambahkan untuk menambahkan halaman Formulir Web ke proyek Anda.
Visual Studio membuat halaman baru dan membukanya.
Selanjutnya, atur halaman baru ini sebagai halaman pengaktifan default. Di Penjelajah Solusi, klik kanan halaman baru bernama FirstWebPage.aspx dan pilih Atur Sebagai Halaman Mulai. Lain kali Anda menjalankan aplikasi ini untuk menguji kemajuan kami, Anda akan secara otomatis melihat halaman baru ini di browser.

Mengoreksi Kesalahan Pengkodian Sebaris

Editor kode di Visual Studio membantu Anda menghindari kesalahan saat menulis kode, dan jika Anda telah membuat kesalahan, editor kode membantu Anda memperbaiki kesalahan. Di bagian panduan ini, Anda akan menulis baris kode yang menggambarkan fitur koreksi kesalahan di editor.

Untuk memperbaiki kesalahan pengkodian sederhana di Visual Studio

Dalam tampilan Desain , klik dua kali halaman kosong untuk membuat handler untuk peristiwa Muat untuk halaman tersebut.
Anda menggunakan penanganan aktivitas hanya sebagai tempat untuk menulis beberapa kode.
Di dalam handler, ketik baris berikut yang berisi kesalahan dan tekan ENTER:
```
string myStr = "Loading..."
```
Saat Anda menekan ENTER, editor kode menempatkan garis bawah hijau dan merah (biasanya memanggil baris "berlekuk"), di bawah area kode yang mengalami masalah. Garis bawah hijau menunjukkan peringatan. Garis bawah merah menunjukkan kesalahan yang harus Anda perbaiki.

Tahan penunjuk myStr mouse untuk melihat tipsalat yang memberi tahu Anda tentang peringatan. Selain itu, tahan penunjuk mouse Anda di atas garis bawah merah untuk melihat pesan kesalahan.

Gambar berikut menunjukkan kode dengan garis bawah.

Kesalahan harus diperbaiki dengan menambahkan titik koma ; ke akhir baris. Peringatan hanya memberi tahu Anda bahwa Anda belum menggunakan myStr variabel .

Catatan

Anda melihat pengaturan pemformatan kode Anda saat ini di Visual Studio dengan memilih Alat ->Opsi ->Font dan Warna.

Pemfaktoran ulang dan Penggantian Nama

Pemfaktoran ulang adalah metodologi perangkat lunak yang melibatkan restrukturisasi kode Anda untuk membuatnya lebih mudah dipahami dan dipertahankan, sambil mempertahankan fungsionalitasnya. Contoh sederhananya adalah Anda menulis kode dalam penanganan aktivitas untuk mendapatkan data dari database. Saat mengembangkan halaman, Anda menemukan bahwa Anda perlu mengakses data dari beberapa penangan yang berbeda. Oleh karena itu, Anda merefaktor kode halaman dengan membuat metode akses data di halaman dan menyisipkan panggilan ke metode di handler.

Editor kode menyertakan alat untuk membantu Anda melakukan berbagai tugas refaktor. Dalam panduan ini, Anda akan bekerja dengan dua teknik pemfaktoran ulang: mengganti nama variabel dan mengekstrak metode. Opsi refaktor lainnya termasuk merangkum bidang, mempromosikan variabel lokal ke parameter metode, dan mengelola parameter metode. Ketersediaan opsi pemfaktoran ulang ini tergantung pada lokasi dalam kode.

Kode Pemfaktoran Ulang

Skenario refaktor umum adalah membuat (mengekstrak) metode dari kode yang ada di dalam anggota lain, seperti metode . Ini mengurangi ukuran anggota asli dan membuat kode yang diekstrak dapat digunakan kembali.

Di bagian panduan ini, Anda akan menulis beberapa kode sederhana, dan kemudian mengekstrak metode darinya. Pemfaktoran ulang didukung untuk C#, sehingga Anda akan membuat halaman yang menggunakan C# sebagai bahasa pemrogramannya.

Untuk mengekstrak metode di halaman C#

Beralih ke tampilan Desain .
Di Kotak Alat, dari tab Standar , seret kontrol Tombol ke halaman.

Klik dua kali kontrol Tombol untuk membuat handler untuk peristiwa Klik , lalu tambahkan kode yang disorot berikut ini:

protected void Button1_Click(object sender, EventArgs e)
{

    System.Collections.ArrayList alist = 
        new System.Collections.ArrayList();
    int i;
    string arrayValue;
    for(i=0; i<5; i++)
    {
        arrayValue = "i = " + i.ToString();
        alist.Add(arrayValue);
    }
    for(i=0; i<alist.Count; i++)
    {
        Response.Write("<br />" + alist[i]);
    };
}

Kode membuat objek ArrayList , menggunakan perulangan untuk memuatnya dengan nilai, lalu menggunakan perulangan lain untuk menampilkan konten objek ArrayList .

Tekan CTRL+F5 untuk menjalankan halaman, lalu klik tombol untuk memastikan bahwa Anda melihat output berikut:
```
i = 0
i = 1
i = 2
i = 3
i = 4
```

Kembali ke editor kode, lalu pilih baris berikut di penanganan aktivitas.

for(i=0; i<alist.Count; i++) 
{
      Response.Write("<br />" + alist[i]);
}

Klik kanan pilihan, klik Refaktor, lalu pilih Ekstrak Metode.

Kotak dialog Ekstrak Metode muncul.

Dalam kotak Nama Metode Baru , ketik DisplayArray, lalu klik OK.

Editor kode membuat metode baru bernama DisplayArray, dan melakukan panggilan ke metode baru di penangan Klik tempat perulangan awalnya.

protected void Button1_Click(object sender, EventArgs e)
{
    System.Collections.ArrayList alist = 
        new System.Collections.ArrayList();
    int i;
    string arrayValue;
    for(i=0; i<5; i++)
    {
        arrayValue = "i = " + i.ToString();
        alist.Add(arrayValue);
    }
    i = DisplayArray(alist, i);
}

Tekan CTRL+F5 untuk menjalankan halaman lagi, dan klik tombol .

Halaman berfungsi sama seperti sebelumnya. Metode DisplayArray ini sekarang dapat dipanggil dari mana saja di kelas halaman.

Mengganti Nama Variabel

Saat Anda bekerja dengan variabel, serta objek, Anda mungkin ingin mengganti namanya setelah direferensikan dalam kode Anda. Namun, mengganti nama variabel dan objek dapat menyebabkan kode rusak jika Anda melewatkan penggantian nama salah satu referensi. Oleh karena itu, Anda dapat menggunakan pemfaktoran ulang untuk melakukan penggantian nama.

Untuk menggunakan pemfaktoran ulang untuk mengganti nama variabel

Di Klik penanganan aktivitas, temukan baris berikut ini:

System.Collections.ArrayList alist = 
    new System.Collections.ArrayList;

Klik kanan nama alistvariabel , pilih Refaktor, lalu pilih Ganti Nama.

Kotak dialog Ganti Nama muncul.
Dalam kotak Nama baru , ketik ArrayList1 dan pastikan kotak centang Pratinjau perubahan referensi telah dipilih. Lalu klik OK.

Kotak dialog Pratinjau Perubahan muncul, dan menampilkan pohon yang berisi semua referensi ke variabel yang Anda ganti nama.
Klik Terapkan untuk menutup kotak dialog Pratinjau Perubahan .

Variabel yang merujuk khusus ke instans yang Anda pilih diganti namanya. Namun, perhatikan bahwa variabel alist dalam baris berikut tidak diganti namanya.
```
private int DisplayArray(System.Collections.ArrayList alist, 
    int i)
```
Variabel alist dalam baris ini tidak diganti namanya karena tidak mewakili nilai yang sama dengan variabel alist yang Anda ganti namanya. Variabel alist dalam DisplayArray deklarasi adalah variabel lokal untuk metode tersebut. Ini menggambarkan bahwa menggunakan pemfaktoran ulang untuk mengganti nama variabel berbeda dari sekadar melakukan tindakan temukan dan ganti di editor; refaktor mengganti nama variabel dengan pengetahuan tentang semantik variabel yang bekerja dengannya.

Menyisipkan Cuplikan

Karena ada banyak tugas pengkodean yang sering perlu dilakukan pengembang Formulir Web, editor kode menyediakan pustaka cuplikan, atau blok kode yang ditulis sebelumnya. Anda dapat menyisipkan cuplikan ini ke halaman Anda.

Setiap bahasa yang Anda gunakan di Visual Studio memiliki sedikit perbedaan dalam cara Anda menyisipkan cuplikan kode. Untuk informasi tentang menyisipkan cuplikan, lihat Cuplikan Kode IntelliSense Visual Basic. Untuk informasi tentang menyisipkan cuplikan di Visual C#, lihat Cuplikan Kode Visual C#.

Langkah berikutnya

Panduan ini telah mengilustrasikan fitur dasar editor kode Visual Studio 2010 untuk memperbaiki kesalahan dalam kode Anda, merefaktor kode, mengganti nama variabel, dan menyisipkan cuplikan kode ke dalam kode Anda. Fitur tambahan di editor dapat membuat pengembangan aplikasi cepat dan mudah. Misalnya, Anda mungkin perlu:

Pelajari selengkapnya tentang fitur IntelliSense, seperti memodifikasi opsi IntelliSense, mengelola cuplikan kode, dan mencari cuplikan kode secara online. Untuk informasi selengkapnya, lihat Menggunakan IntelliSense.
Pelajari cara membuat cuplikan kode Anda sendiri. Untuk informasi selengkapnya, lihat Membuat dan Menggunakan Cuplikan Kode IntelliSense
Pelajari selengkapnya tentang fitur khusus Visual Basic dari cuplikan kode IntelliSense, seperti menyesuaikan cuplikan dan pemecahan masalah. Untuk informasi selengkapnya, lihat Cuplikan Kode IntelliSense Visual Basic
Pelajari selengkapnya tentang fitur C#-specific IntelliSense, seperti pemfaktoran ulang dan cuplikan kode. Untuk informasi selengkapnya, lihat Visual C# IntelliSense.

Saran dan Komentar

Apakah halaman ini membantu?

Last updated on 2023-07-13