Tutorial Formulir Web ASP.NET: Contoh Kontrol Pengguna

Di ASP.Net, dimungkinkan untuk membuat kode yang dapat digunakan kembali. Kode yang dapat digunakan kembali dapat digunakan di banyak tempat tanpa perlu menulis kode lagi.

Kode yang dapat digunakan kembali membantu mengurangi jumlah waktu yang dihabiskan pengembang setelah menulis kode. Hal ini dapat dilakukan sekali dan digunakan kembali di banyak tempat.

Buat Kontrol Pengguna di ASP.Net

ASP.Net memiliki kemampuan untuk membuat kontrol Web. Kontrol ini berisi kode yang dapat digunakan kembali. Ini dapat digunakan di seluruh aplikasi sesuai kebutuhan.

Mari kita lihat contoh bagaimana kita dapat membuat kontrol pengguna web di ASP.Net

Dalam contoh kita,

Kami akan membuat kontrol web.
Ini akan digunakan untuk membuat komponen header.
Ini akan berisi teks yang disebutkan di bawah ini. "Tutorial Guru99" Tutorial ini untuk ASP.Net "

Mari kita bekerja dengan aplikasi web kita saat ini yang dibuat di bagian sebelumnya. Mari ikuti langkah-langkah di bawah ini untuk membuat kontrol pengguna Web.

Langkah 1) Langkah pertama adalah membuat kontrol pengguna web dan menambahkannya ke Solusi Visual Studio kita.

Buka Solution Explorer di Visual Studio dan klik kanan DemoApplication Solution
Pilih item menu Tambah->Item Baru

Langkah 2) Pada langkah selanjutnya, kita perlu memilih opsi untuk membuat kontrol pengguna web

Pada kotak dialog proyek, kita dapat melihat berbagai pilihan untuk membuat berbagai jenis komponen. Klik pilihan “Web” di sisi kiri.
Saat kami mengklik opsi "Web", Anda melihat opsi untuk "Kontrol Pengguna Formulir Web". Klik opsi ini.
Kami kemudian memberi nama untuk Kontrol Web “Guru99Control”.
Terakhir, klik tombol 'Tambah' untuk membiarkan Visual Studio menambahkan kontrol pengguna web ke solusi kita.

Anda akan melihat “Guru99Control” ditambahkan ke solusi.

Langkah 4) Sekarang saatnya menambahkan kode khusus ke kontrol pengguna Web. Kode kita akan didasarkan pada sintaks HTML murni. Tambahkan kode berikut ke file 'Guru99Control.ascx'

<table>
	<tr>
	  <td>Guru99 Tutorials</td>
	</tr>
	
	<tr>
	  <td> This Tutorial is for</td>
	</tr>
</table>

Penjelasan Kode: -

Di file Kontrol Web kami, pertama-tama kami membuat elemen tabel. Ini akan digunakan untuk menampung 2 baris teks yang akan digunakan untuk ditampilkan

“Tutorial Guru99” dan
“Tutorial ini untuk ASP.Net.”

Selanjutnya, kita tentukan baris tabel pertama kita dan letakkan teksnya sebagai “Tutorial Guru99.”
Kami kemudian mendefinisikan baris tabel kedua kami dan menempatkan teks sebagai "Tutorial ini untuk ASP.Net."

CATATAN: Sekarang kita tidak dapat mengeksekusi kode ini dan menampilkan hasilnya. Satu-satunya cara untuk melihat apakah ini berhasil adalah dengan memasukkannya ke dalam aplikasi kita (file aspx). Kita akan melihatnya di topik selanjutnya.

Mendaftarkan Kontrol Pengguna pada formulir web ASP.NET

Pada bagian sebelumnya, kita melihat bagaimana kita dapat membuat kontrol web kustom. Kontrol ini dapat digunakan untuk menampilkan dua baris berikut dalam formulir web.

“Tutorial Guru99”
“Tutorial ini untuk ASP.Net.”

Setelah 'kontrol' khusus dibuat, kita perlu menggunakannya di aplikasi web kita. Langkah pertama adalah mendaftarkan komponen di aplikasi kita (Demo.aspx). Ini adalah prasyarat untuk digunakan dalam kontrol web kustom apa pun di aplikasi ASP.Net.

Mari kita lihat bagaimana kita dapat mencapai hal ini. Langkah-langkah di bawah ini merupakan lanjutan dari bagian sebelumnya. Di bagian sebelumnya, kami telah membuat kontrol khusus kami. Di bagian ini, kita akan menggunakan kontrol di Demo.aspx formulir web.

Pertama, kita akan mendaftarkan 'kontrol' kustom kita ke dalam file Demo.aspx.

Langkah 1) Pastikan Anda sedang mengerjakan berkas demo.aspx. Di berkas inilah kontrol pengguna web akan didaftarkan. Ini dapat dilakukan dengan mengklik dua kali berkas demo.aspx di Solution explorer dari solusi .Net Anda.

Setelah Anda mengklik dua kali formulir tersebut, Anda mungkin akan melihat kode di bawah ini dalam formulir tersebut. Ini adalah kode default yang ditambahkan oleh Visual Studio saat formulir web ditambahkan ke proyek ASP.Net.

Kode default terdiri dari langkah-langkah yang diperlukan untuk memastikan bahwa formulir dapat dijalankan sebagai formulir web ASP.Net di browser.

Langkah 2) Sekarang mari tambahkan kode kita untuk mendaftarkan kontrol pengguna. Tangkapan layar di bawah menunjukkan pendaftaran kontrol pengguna ke kode dasar di atas.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Demo.aspx.cs" Inherits="DemoApplication.Demo" %>
<%@ Register Src="~/Guru99Control.ascx" TagName="WebControl" TagPrefix="TWebControl"%>

<!DOCTYPE html>
	<html xmlns="http://www.w3.ore/1999/xhtml">
	<head runat="server">
		<title></title>
	</head>
<body>
	<form id="forml" runat="server”>
		<TWebControl:WebControl ID="Header" runat="server" />
	</form>
</body>
</html>

Penjelasan Kode: -

Langkah pertama adalah mendaftarkan kontrol pengguna web. Ini terdiri dari parameter dasar di bawah ini
1. Kata kunci 'Daftar' digunakan untuk mendaftarkan kontrol pengguna web.
2. Parameter src digunakan untuk menentukan nama kontrol, yang dalam kasus kita adalah Guru99Control.ascx.
3. Tagname dan Tagprefix adalah nama individual yang diberikan pada kontrol. Hal ini dilakukan agar mereka dapat referensi di halaman HTML seperti kontrol HTML biasa.
Selanjutnya, kami mereferensikan kontrol pengguna Web kami melalui TagPrefix:TagName yang telah ditetapkan sebelumnya. TagPrefix:TagName adalah indikator bahwa kita ingin menggunakan kontrol web kustom kita. Saat halaman diproses oleh server web, Anda dapat melihat kami telah menggunakan tag TWebControl:WebControl. Kemudian akan memproses 'Guru99Control'. Dalam contoh kita, ini adalah TWebControl:WebControl.
1. ID opsional diberikan pada kontrol "Header". Biasanya merupakan praktik yang baik untuk memberikan ID ke kontrol HTML.
2. Terakhir, atribut runat=server agar kontrol dapat berjalan di server web. Untuk semua kontrol ASP.Net, ini adalah atribut default. Semua kontrol ASP.Net (termasuk kontrol kustom) harus dijalankan di server. Outputnya kemudian dikirim dari server ke klien dan ditampilkan di browser sebagaimana mestinya.

Ketika kode di atas disetel, dan proyek dijalankan menggunakan Visual Studio. Anda akan mendapatkan output di bawah ini.

Keluaran:-

Pesan keluaran yang ditampilkan di browser memperlihatkan bahwa kontrol pengguna web berhasil dijalankan.

Mendaftarkan kontrol asp.net secara global di file konfigurasi web config asp

Terkadang seseorang mungkin ingin menggunakan kontrol pengguna di beberapa halaman dalam aplikasi .Net. Pada titik ini, Anda tidak ingin terus mendaftarkan kontrol pengguna pada setiap halaman ASP.Net.

Di .Net Anda dapat melakukan registrasi di file 'web.config'.
File web.config adalah file konfigurasi umum yang digunakan oleh semua halaman web di proyek .Net.
Berisi rincian konfigurasi yang diperlukan untuk proyek web ASP.Net. Misalnya, salah satu konfigurasi umum dalam file web.config adalah parameter kerangka target.
Parameter ini digunakan untuk mengidentifikasi versi .Net framework yang digunakan oleh aplikasi.

Di bawah ini adalah cuplikan kode default di file web.config. Bagian yang disorot adalah bagian kerangka sasaran.

Mari kita lihat bagaimana kita bisa mendaftarkan Guru99Control kita di file web.config.

Langkah 1) Buka berkas web.config dari penjelajah solusi dengan mengklik dua kali berkas tersebut.

Saat Anda membuka berkas web.config, Anda mungkin melihat konfigurasi di bawah ini. 'web.config' ditambahkan secara otomatis oleh Visual Studio saat proyek dibuat. Ini adalah konfigurasi dasar yang diperlukan agar proyek ASP.Net berfungsi dengan baik.

Langkah 2) Sekarang mari daftarkan komponen kita di file web.config. Kita perlu menambahkan baris di bawah ini untuk itu.

<configuration>
	<system.web>
	 <compilation debug="true" targetFramework="4.5" />
	<pages>
		<controls>
		 <add tagPrefix="TWebControl" src ="~/Guru99Control.ascx" tagName="WebControl"/>
		</controls>
	</pages>
	</system.web>
</configuration>

Pendaftaran terdiri dari sub-langkah di bawah ini

Tambahkan tag bernama . Ini berarti semua konfigurasi kontrol akan berlaku untuk semua halaman ASP.Net dalam solusi.
Itu tag berarti Anda menambahkan konfigurasi untuk kontrol pengguna.
Kemudian kami mendaftarkan kontrol pengguna dengan tag tambahan. Parameter tagPrefix, tagName, dan src yang tersisa tetap sama seperti sebelumnya.

Langkah 3) Ingatlah untuk membuka halaman 'demo.aspx' dan menghapus baris untuk kontrol, yang memiliki registrasi komponen Guru99. Jika Anda tidak melakukan langkah ini, maka file 'Guru99Control.ascx' akan dieksekusi dari file 'demo.aspx', bukan file 'web.config'.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Demo.aspx.cs" Inherits="DemoApplication.Demo" %>
<%@ Register Src="~/Guru99Control.ascx" TagName="WebControl" TagPrefix="TWebControl"%>

<!DOCTYPE html>
<html xmlns="http://www.w3.ore/1999/xhtml">
	<head runat="server">
	  <title></title>
	</head>	
<body>
	<form id="form1" runat="server”>
	  <TWebControl:WebControl ID="Header" runat="server" />
	</form>
</body>
</html>

Kode di atas sudah ditetapkan, dan proyek dijalankan menggunakan Visual Studio. Anda akan mendapatkan output di bawah ini.

Keluaran:-

Pesan keluaran menunjukkan bahwa kontrol pengguna web berhasil dijalankan.

Menambahkan properti publik ke kontrol web

Properti adalah pasangan nilai kunci yang terkait dengan kontrol apa pun. Mari kita ambil contoh yang sederhana tanda HTML. Tangkapan layar tampilan tag ditunjukkan di bawah.

<html>
<body>
	<div style="color:#0000FF">
		  
		Demo Form
			
	</div>	
		
<body>
</html>

Tag 'div' digunakan untuk membuat bagian dalam dokumen HTML. Tag 'div' memiliki properti yang disebut properti style. Ini dapat digunakan untuk memberikan gaya berbeda pada teks yang ditampilkan di tag div. Biasanya Anda akan melihat kode untuk tag div seperti gambar di bawah ini.

<div style="color:#0000FF">

Jadi atribut warna tidak lain hanyalah pasangan nilai kunci yang memberikan informasi lebih lanjut tentang tag itu sendiri. Dalam kasus di atas, nama kuncinya adalah 'style' dan nilai kuncinya adalah 'color:#0000FF'.

Demikian pula, untuk kontrol pengguna, Anda dapat membuat properti Anda sendiri yang menjelaskan kontrol tersebut.

Mari kita ambil contoh sederhana dan mengembangkan 'Guru99Control' yang dibuat di bagian sebelumnya.

Dalam contoh kita, kita akan menambahkan properti integer sederhana yang disebut MinValue. Nilai ini akan mewakili jumlah karakter minimum dalam teks yang ditampilkan dalam kontrol pengguna.

Mari lakukan langkah-langkah yang disebutkan di bawah untuk mewujudkannya.

Langkah 1) Buka file Guru99Control.ascx. Tambahkan kode untuk menambahkan properti MinValue.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Demo.aspx.cs" Inherits="DemoApplication.Demo" %>

	<script runat="server">
	  public int MinValue = 0;
	</script>
	
<table>
	<tr>
	  <td>Guru99 Tutorials</td>
	</tr>
	
	<tr>
	  <td> This Tutorial is for
	</tr>
</table>

Penjelasan Kode: -

Atribut skrip runat=server digunakan untuk menunjukkan bahwa kami menambahkan kode spesifik some.Net dan perlu dijalankan di server web.

Ini diperlukan untuk memproses properti apa pun yang ditambahkan ke kontrol pengguna. Kami kemudian menambahkan properti kami MinValue dan memberinya nilai default 0.

Langkah 2) Sekarang mari kita referensikan properti ini di file demo.aspx kita. Yang kita lakukan sekarang hanyalah mereferensikan properti MinValue dan menetapkan nilai baru 100.

!DOCTYPE html>
<html xmlns="http://www.w3.ore/1999/xhtml">
	<head runat="server">
	  <title></title>
	</head>	
<body>
	<form id="form1" runat="server”>
	  <TWebControl:WebControl ID="Header" runat="server" MinValue="100"/>
	</form>
</body>
</html>

CATATAN: – Saat Anda menjalankan kode ini, kode ini tidak akan menampilkan keluaran apa pun. Ini karena outputnya berada di bawah batas 100 karakter.

Ringkasan

ASP.Net memiliki kemampuan untuk membuat kontrol pengguna. Kontrol pengguna digunakan untuk memiliki kode yang digunakan beberapa kali dalam suatu aplikasi. Kontrol pengguna kemudian dapat digunakan kembali di seluruh aplikasi.
Kontrol pengguna harus didaftarkan pada halaman ASP.Net sebelum dapat digunakan.
Untuk menggunakan kontrol pengguna di semua halaman dalam aplikasi, daftarkan ke file web.config.
Properti juga dapat ditambahkan ke kontrol pengguna web.

Buat Kontrol Pengguna di ASP.Net

Mendaftarkan Kontrol Pengguna pada formulir web ASP.NET

Mendaftarkan kontrol asp.net secara global di file konfigurasi web config asp

ARTIKEL TERKAIT

Menambahkan properti publik ke kontrol web

Ringkasan

Mendaftar untuk buletin