Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)
Dalam tutorial ini, Anda akan belajar cara membangun kontrol server ASP.NET dengan membuat kontrol pemutar video HTML5. Sepanjang perjalanan, kita akan meninjau proses fundamental pengembangan kontrol server dari awal.
Perkenalan
ASP.NET dilengkapi dengan seperangkat kontrol sisi-servernya sendiri, jadi mengapa Anda membuatnya sendiri?
Dengan membuat kontrol kita sendiri, kita kemudian dapat membangun komponen visual yang kuat dan dapat digunakan kembali untuk antarmuka pengguna aplikasi Web kita.
Tutorial ini akan memperkenalkan Anda pada proses pengembangan kontrol server ASP.NET. Anda juga akan melihat cara membuat kontrol Anda sendiri secara bersamaan dapat meningkatkan kualitas aplikasi Web Anda, membuat Anda lebih produktif dan meningkatkan antarmuka pengguna Anda.
Kontrol kustom ASP.NET lebih fleksibel daripada kontrol pengguna. Kita dapat membuat kontrol kustom yang mewarisi dari kontrol sisi-server lain dan kemudian memperluas kontrol itu. Kita juga dapat berbagi kontrol kustom di antara proyek-proyek. Biasanya, kita akan membuat kontrol kustom kita di perpustakaan kontrol kustom web yang dikompilasi secara terpisah dari aplikasi web kita. Sebagai hasilnya, kita dapat menambahkan perpustakaan tersebut ke proyek apa pun untuk menggunakan kontrol kustom kita dalam proyek itu.
Ikhtisar Video HTML5
Hingga saat ini, belum pernah ada cara asli untuk menampilkan video pada halaman web. Saat ini, sebagian besar video ditampilkan, melalui penggunaan plugin (seperti Flash atau Silverlight). Namun, tidak semua browser memiliki plugin yang sama. HTML5 menentukan cara bawaan standar untuk menyertakan video, dengan elemen video
.
Saat ini, ada dua format video yang didukung secara luas untuk elemen video: file Ogg
[dikodekan dengan Theora dan Vorbis untuk video dan audio] dan file MPEG 4
[dikodekan dengan H.264 dan AAC].
Untuk menampilkan video dalam HTML5, inilah yang kita butuhkan:
1 |
|
2 |
<video width="320" height="240" controls="controls"> |
3 |
<source src="movie.ogg" type="video/ogg" /> |
4 |
<source src="movie.mp4" type="video/mp4" /> |
5 |
</video>
|
Atribut controls
adalah untuk menambahkan kontrol play, pause dan volume. Tanpa atribut ini, video Anda akan tampak hanya berupa gambar. Itu juga selalu merupakan ide yang baik untuk menyertakan atribut width
dan height
. Tabel berikut menunjukkan semua atribut elemen <video>
:
- autoplay: Menentukan bahwa video akan mulai diputar segera setelah ia siap
- controls: Menentukan bahwa kontrol akan ditampilkan, seperti tombol play
- height: Ketinggian pemutar video
- loop: Menentukan bahwa file media akan mulai dari awal lagi, setiap kali ia selesai
- preload: Menentukan bahwa video akan dimuat saat pemuatan halaman, dan siap dijalankan. Diabaikan jika ada "autoplay"
- src: URL video yang diputar
- width: Lebar pemutar video
- poster: URL gambar untuk ditampilkan saat tidak ada data video tersedia
Langkah 0: Memulai
Semua yang diperlukan untuk memulai adalah salinan Visual Studio dari Visual Web Developer Express. Jika Anda tidak memiliki versi lengkap dari Visual Studio, Anda dapat mengambil Express Edition gratis.
Pemutar video HTML5 yang akan kita buat di sini hanya pemutar video sederhana yang akan me-render antarmuka asli apa pun yang disediakan browser. Browser yang mendukung video HTML5 memiliki pemutar video bawaan, termasuk sekumpulan kontrol (play/pause, dll.), Sehingga Anda akan melihat antarmuka yang berbeda untuk setiap browser saat menjalankan kontrol ini.



Langkah 1: Membuat Proyek Kontrol Kustom
Pertama, kita perlu membuat proyek perpustakaan kelas baru untuk menampung kontrol kustom kita. Dengan membuat kontrol kustom dalam perpustakaan kelas yang terpisah, kita dapat mengkompilasi proyek menjadi DLL terpisah dan menggunakan kontrol kustom dalam aplikasi apa pun yang memerlukannya.
Buka proyek ASP.NET Anda dengan Visual Studio atau Visual Web Developer. Di Solution Explorer, klik kanan nama solusi, dan pilih Add New Project
dari menu konteks. Di kotak dialog Add New Project, pilih jenis proyek untuk menjadi proyek Web
, dan pilih ASP.NET Server Control
sebagai template-nya, seperti:



Beri nama proyek CustomControls
. Klik OK
. Proyek ASP.NET Server Control baru dibuat, dan Visual Studio juga menyediakan Anda dengan kontrol Web sederhana untuk memulai. Hapus kontrol kustom ini karena kita tidak membutuhkannya.
Langkah 2: Menambahkan Kontrol Kustom Web ke Proyek
Di Solution Explorer, klik kanan proyek CustomControls
, dan pilih Add New Item
dari menu konteks. Di kotak dialog Add New Item
, pilih jenis kategori menjadi kategori Web
, dan pilih ASP.NET Server Control
di template.



Beri nama kontrol kustom baru VideoPlayer
. Klik Add
. Kontrol kustom baru (VideoPlayer.cs
) dibuat dan ditambahkan ke proyek CustomControls.
1 |
|
2 |
using System; |
3 |
using System.Collections.Generic; |
4 |
using System.ComponentModel; |
5 |
using System.Linq; |
6 |
using System.Text; |
7 |
using System.Web; |
8 |
using System.Web.UI; |
9 |
using System.Web.UI.WebControls; |
10 |
|
11 |
namespace CustomControls |
12 |
{ |
13 |
[DefaultProperty("Text")] |
14 |
[ToolboxData("<{0}:VideoPlayer runat=server></{0}:VideoPlayer>")] |
15 |
public class VideoPlayer : WebControl |
16 |
{ |
17 |
[Bindable(true)] |
18 |
[Category("Appearance")] |
19 |
[DefaultValue("")] |
20 |
[Localizable(true)] |
21 |
public string Text |
22 |
{ |
23 |
get |
24 |
{ |
25 |
String s = (String)ViewState["Text"]; |
26 |
return ((s == null) ? "[" + this.ID + "]" : s); |
27 |
} |
28 |
|
29 |
set |
30 |
{ |
31 |
ViewState["Text"] = value; |
32 |
} |
33 |
} |
34 |
|
35 |
protected override void RenderContents(HtmlTextWriter output) |
36 |
{ |
37 |
output.Write(Text); |
38 |
} |
39 |
} |
40 |
} |
41 |
Kode di atas adalah kode default yang dihasilkan oleh Visual Studio untuk perpustakaan kontrol web. Untuk mulai bekerja dengan VideoPlayer.cs
, kita perlu memodifikasi kode di atas. Hal pertama yang harus kita lakukan adalah menghapus semuanya di antara baris deklarasi kelas dan akhir kelas. Itu meninggalkan kita dengan kode ini:
1 |
|
2 |
using System; |
3 |
using System.Collections.Generic; |
4 |
using System.ComponentModel; |
5 |
using System.Linq; |
6 |
using System.Text; |
7 |
using System.Web; |
8 |
using System.Web.UI; |
9 |
using System.Web.UI.WebControls; |
10 |
|
11 |
namespace CustomControls |
12 |
{ |
13 |
[DefaultProperty("Text")] |
14 |
[ToolboxData("<{0}:VideoPlayer runat=server></{0}:VideoPlayer>")] |
15 |
public class VideoPlayer : WebControl |
16 |
{ |
17 |
|
18 |
} |
19 |
} |
20 |
Seperti yang Anda lihat di atas, kelas VideoPlayer
berasal dari kelas System.Web.UI.WebControl
. Bahkan, semua kontrol sisi-server ASP.NET berasal dari kelas WebControl
.
Langkah 3: Memodifikasi Baris Deklarasi Kelas
Baris deklarasi kelas dalam kode default juga menentukan properti default untuk kontrol VideoPlayer
sebagai properti Text
. Kontrol VideoPlayer
yang kita buat di sini tidak memiliki properti bernama Text
. Jadi, hapus referensi ke Text
sebagai properti default. Setelah semua modifikasi, file kode VideoPlayer.cs
akan terlihat seperti ini:
1 |
|
2 |
using System; |
3 |
using System.Collections.Generic; |
4 |
using System.ComponentModel; |
5 |
using System.Linq; |
6 |
using System.Text; |
7 |
using System.Web; |
8 |
using System.Web.UI; |
9 |
using System.Web.UI.WebControls; |
10 |
|
11 |
namespace CustomControls |
12 |
{ |
13 |
[ToolboxData("<{0}:VideoPlayer runat=server></{0}:VideoPlayer>")] |
14 |
public class VideoPlayer : WebControl |
15 |
{ |
16 |
|
17 |
} |
18 |
} |
19 |
Langkah 4: Menambahkan Properti
Pada langkah ini, kita akan menambahkan beberapa properti ke kontrol VideoPlayer untuk menangani perilaku kontrol. Berikut ini adalah daftar properti yang akan kita tambahkan ke file kode VideoPlayer.cs
:
-
VideoUrl
: Properti string yang menentukan URL video yang diputar. -
PosterUrl
: Properti string yang menentukan alamat file gambar untuk ditampilkan saat tidak ada data video yang tersedia. -
AutoPlay
: Properti boolean untuk menentukan apakah video secara otomatis akan mulai diputar atau tidak, ketika halaman web dibuka. -
DisplayControlButtons
: Properti boolean yang menentukan apakah tombol navigasi pemutar ditampilkan atau tidak. -
Loop
: Properti boolean yang menentukan apakah video akan mulai dari awal lagi atau tidak, setiap kali ia selesai.
Tambahkan kode berikut ke kelas VideoPlayer:
1 |
|
2 |
private string _Mp4Url; |
3 |
public string Mp4Url |
4 |
{ |
5 |
get { return _Mp4Url; } |
6 |
set { _Mp4Url = value; } |
7 |
} |
8 |
|
9 |
private string _OggUrl = null; |
10 |
public string OggUrl |
11 |
{ |
12 |
get { return _OggUrl; } |
13 |
set { _OggUrl = value; } |
14 |
} |
15 |
|
16 |
private string _Poster = null; |
17 |
public string PosterUrl |
18 |
{ |
19 |
get { return _Poster; } |
20 |
set { _Poster = value; } |
21 |
} |
22 |
|
23 |
private bool _AutoPlay = false; |
24 |
public bool AutoPlay |
25 |
{ |
26 |
get { return _AutoPlay; } |
27 |
set { _AutoPlay = value; } |
28 |
} |
29 |
|
30 |
private bool _Controls = true; |
31 |
public bool DisplayControlButtons |
32 |
{ |
33 |
get { return _Controls; } |
34 |
set { _Controls = value; } |
35 |
} |
36 |
|
37 |
private bool _Loop = false; |
38 |
public bool Loop |
39 |
{ |
40 |
get { return _Loop; } |
41 |
set { _Loop = value; } |
42 |
} |
43 |
Setelah kita menambahkan properti di atas, kelas VideoPlayer akan terlihat seperti
1 |
|
2 |
using System; |
3 |
using System.Collections.Generic; |
4 |
using System.ComponentModel; |
5 |
using System.Linq; |
6 |
using System.Text; |
7 |
using System.Web; |
8 |
using System.Web.UI; |
9 |
using System.Web.UI.WebControls; |
10 |
|
11 |
namespace CustomControls |
12 |
{ |
13 |
[ToolboxData("<{0}:VideoPlayer runat=server></{0}:VideoPlayer>")] |
14 |
public class VideoPlayer : WebControl |
15 |
{ |
16 |
private string _Mp4Url; |
17 |
public string Mp4Url |
18 |
{ |
19 |
get { return _Mp4Url; } |
20 |
set { _Mp4Url = value; } |
21 |
} |
22 |
|
23 |
private string _OggUrl = null; |
24 |
public string OggUrl |
25 |
{ |
26 |
get { return _OggUrl; } |
27 |
set { _OggUrl = value; } |
28 |
} |
29 |
|
30 |
private string _Poster = null; |
31 |
public string PosterUrl |
32 |
{ |
33 |
get { return _Poster; } |
34 |
set { _Poster = value; } |
35 |
} |
36 |
|
37 |
private bool _AutoPlay = false; |
38 |
public bool AutoPlay |
39 |
{ |
40 |
get { return _AutoPlay; } |
41 |
set { _AutoPlay = value; } |
42 |
} |
43 |
|
44 |
private bool _Controls = true; |
45 |
public bool DisplayControlButtons |
46 |
{ |
47 |
get { return _Controls; } |
48 |
set { _Controls = value; } |
49 |
} |
50 |
|
51 |
private bool _Loop = false; |
52 |
public bool Loop |
53 |
{ |
54 |
get { return _Loop; } |
55 |
set { _Loop = value; } |
56 |
} |
57 |
} |
58 |
} |
59 |
Langkah 5: Membuat Metode Render
ContentsTugas utama dari kontrol server adalah me-render beberapa jenis bahasa markup ke stream keluaran HTTP, yang dikembalikan dan ditampilkan oleh klien. Ini adalah tanggung jawab kita sebagai pengembang kontrol untuk memberi tahu kontrol server markup apa yang harus di-render. Metode RenderContents
yang ditimpa adalah lokasi utama tempat kita memberi tahu kontrol apa yang ingin kita render kepada klien.
Tambahkan metode berikut yang menggantikan RenderContents
ke kelas VideoPlayer
:
1 |
|
2 |
protected override void RenderContents(HtmlTextWriter output) |
3 |
{ |
4 |
|
5 |
} |
6 |
Perhatikan bahwa metode RenderContents
memiliki satu parameter metode yang disebut output
. Parameter ini adalah objek HtmlTextWriter
, yang digunakan oleh kontrol untuk me-render HTML ke klien. Kelas HtmlTextwriter
memiliki sejumlah metode yang dapat Anda gunakan untuk me-render HTML Anda, termasuk AddAttribute
dan RenderBeginTag
.
Langkah 6: Menambahkan Atribut Tag
Sebelum kita menulis kode untuk me-render elemen <video>
, hal pertama yang harus dilakukan adalah menambahkan beberapa atribut untuknya. Kita dapat menggunakan metode AddAttribute
dari objek HtmlTextWriter
untuk menambahkan atribut untuk tag HTML.
Tambahkan kode berikut ke dalam metode RenderContents
:
1 |
|
2 |
output.AddAttribute(HtmlTextWriterAttribute.Id, this.ID); |
3 |
output.AddAttribute(HtmlTextWriterAttribute.Width, this.Width.ToString()); |
4 |
output.AddAttribute(HtmlTextWriterAttribute.Height, this.Height.ToString()); |
5 |
|
6 |
if (DisplayControlButtons == true) |
7 |
{ |
8 |
output.AddAttribute("controls", "controls"); |
9 |
} |
10 |
|
11 |
if (PosterUrl != null) |
12 |
{ |
13 |
output.AddAttribute("poster", PosterUrl); |
14 |
} |
15 |
|
16 |
if (AutoPlay == true) |
17 |
{ |
18 |
output.AddAttribute("autoplay", "autoplay"); |
19 |
} |
20 |
|
21 |
if (Loop == true) |
22 |
{ |
23 |
output.AddAttribute("loop", "loop"); |
24 |
} |
25 |
Anda dapat melihat bahwa, dengan menggunakan metode AddAttribute
, kita telah menambahkan tujuh atribut ke tag. Juga perhatikan bahwa kita menggunakan enumerasi, HtmlTextWriterAttribute
, untuk memilih atribut yang ingin kita tambahkan ke tag.
Setelah kita menambahkan kode di atas, metode RenderContents
akan terlihat seperti ini:
1 |
|
2 |
protected override void RenderContents(HtmlTextWriter output) |
3 |
{ |
4 |
output.AddAttribute(HtmlTextWriterAttribute.Id, this.ID); |
5 |
output.AddAttribute(HtmlTextWriterAttribute.Width, this.Width.ToString()); |
6 |
output.AddAttribute(HtmlTextWriterAttribute.Height, this.Height.ToString()); |
7 |
|
8 |
if (DisplayControlButtons == true) |
9 |
{ |
10 |
output.AddAttribute("controls", "controls"); |
11 |
} |
12 |
|
13 |
if (PosterUrl != null) |
14 |
{ |
15 |
output.AddAttribute("poster", PosterUrl); |
16 |
} |
17 |
|
18 |
if (AutoPlay == true) |
19 |
{ |
20 |
output.AddAttribute("autoplay", "autoplay"); |
21 |
} |
22 |
|
23 |
if (Loop == true) |
24 |
{ |
25 |
output.AddAttribute("loop", "loop"); |
26 |
} |
27 |
} |
28 |
Langkah 7: Me-render Elemen <video>
Setelah menambahkan beberapa atribut tag untuk elemen video, saatnya untuk me-render tag <video>
dengan atributnya ke dokumen HTML. Tambahkan kode berikut ke dalam metode RenderContents
:
1 |
|
2 |
output.RenderBeginTag("video"); |
3 |
if (OggUrl != null) |
4 |
{ |
5 |
output.AddAttribute("src", OggUrl); |
6 |
output.AddAttribute("type", "video/ogg"); |
7 |
output.RenderBeginTag("source"); |
8 |
output.RenderEndTag(); |
9 |
} |
10 |
|
11 |
if (Mp4Url != null) |
12 |
{ |
13 |
output.AddAttribute("src", Mp4Url); |
14 |
output.AddAttribute("type", "video/mp4"); |
15 |
output.RenderBeginTag("source"); |
16 |
output.RenderEndTag(); |
17 |
} |
18 |
output.RenderEndTag(); |
19 |
Kita menggunakan metode RenderBeginTag
dari objek output
untuk me-render tag pembuka elemen video, dan RenderEndTag
untuk merender tag penutupnya. Kita juga menambahkan elemen <source>
di antara elemen <video>
. Elemen video memungkinkan banyak elemen sumber. Elemen source
dapat ditautkan ke file video yang berbeda. Browser akan menggunakan format yang dikenal pertama kali.
Metode RenderContents
akan terlihat seperti ini setelah kita menambahkan kode di atas:
1 |
|
2 |
protected override void RenderContents(HtmlTextWriter output) |
3 |
{ |
4 |
output.AddAttribute(HtmlTextWriterAttribute.Id, this.ID); |
5 |
output.AddAttribute(HtmlTextWriterAttribute.Width, this.Width.ToString()); |
6 |
output.AddAttribute(HtmlTextWriterAttribute.Height, this.Height.ToString()); |
7 |
|
8 |
if (DisplayControlButtons == true) |
9 |
{ |
10 |
output.AddAttribute("controls", "controls"); |
11 |
} |
12 |
|
13 |
if (PosterUrl != null) |
14 |
{ |
15 |
output.AddAttribute("poster", PosterUrl); |
16 |
} |
17 |
|
18 |
if (AutoPlay == true) |
19 |
{ |
20 |
output.AddAttribute("autoplay", "autoplay"); |
21 |
} |
22 |
|
23 |
if (Loop == true) |
24 |
{ |
25 |
output.AddAttribute("loop", "loop"); |
26 |
} |
27 |
|
28 |
output.RenderBeginTag("video"); |
29 |
if (OggUrl != null) |
30 |
{ |
31 |
output.AddAttribute("src", OggUrl); |
32 |
output.AddAttribute("type", "video/ogg"); |
33 |
output.RenderBeginTag("source"); |
34 |
output.RenderEndTag(); |
35 |
} |
36 |
|
37 |
if (Mp4Url != null) |
38 |
{ |
39 |
output.AddAttribute("src", Mp4Url); |
40 |
output.AddAttribute("type", "video/mp4"); |
41 |
output.RenderBeginTag("source"); |
42 |
output.RenderEndTag(); |
43 |
} |
44 |
output.RenderEndTag(); |
45 |
} |
46 |
Perhatikan bahwa urutan di mana kita menempatkan metode AddAttributes
adalah penting. Kita menempatkan metode AddAttributes
secara langsung sebelum metode RenderBeginTag
dalam kode. Metode AddAttributes
mengaitkan atribut dengan tag HTML berikutnya yang di-render oleh metode RenderBeginTag
, dalam hal ini tag video
.
Langkah 8: Menghapus Tag Span
Secara default, ASP.NET akan mengelilingi tag control dengan elemen <span>
saat menampilkan markup HTML dari control. Jika kita telah memberikan nilai ID
untuk kontrol kita, maka tag Span
juga akan, secara default, me-render atribut ID
. Memiliki tag terkadang bisa menjadi masalah, jadi jika kita ingin mencegah hal ini di ASP.NET, kita dapat mengganti metode Render
dan memanggil metode RenderContents
secara langsung. Begini caranya:
1 |
|
2 |
protected override void Render(HtmlTextWriter writer) |
3 |
{ |
4 |
this.RenderContents(writer); |
5 |
} |
6 |
Setelah kita menambahkan kode di atas, kelas VideoPlayer akan terlihat seperti ini:
1 |
|
2 |
using System; |
3 |
using System.Collections.Generic; |
4 |
using System.ComponentModel; |
5 |
using System.Linq; |
6 |
using System.Text; |
7 |
using System.Web; |
8 |
using System.Web.UI; |
9 |
using System.Web.UI.WebControls; |
10 |
|
11 |
namespace CustomControls |
12 |
{ |
13 |
[ToolboxData("<{0}:VideoPlayer runat=server></{0}:VideoPlayer>")] |
14 |
public class VideoPlayer : WebControl |
15 |
{ |
16 |
private string _Mp4Url; |
17 |
public string Mp4Url |
18 |
{ |
19 |
get { return _Mp4Url; } |
20 |
set { _Mp4Url = value; } |
21 |
} |
22 |
|
23 |
private string _OggUrl = null; |
24 |
public string OggUrl |
25 |
{ |
26 |
get { return _OggUrl; } |
27 |
set { _OggUrl = value; } |
28 |
} |
29 |
|
30 |
private string _Poster = null; |
31 |
public string PosterUrl |
32 |
{ |
33 |
get { return _Poster; } |
34 |
set { _Poster = value; } |
35 |
} |
36 |
|
37 |
private bool _AutoPlay = false; |
38 |
public bool AutoPlay |
39 |
{ |
40 |
get { return _AutoPlay; } |
41 |
set { _AutoPlay = value; } |
42 |
} |
43 |
|
44 |
private bool _Controls = true; |
45 |
public bool DisplayControlButtons |
46 |
{ |
47 |
get { return _Controls; } |
48 |
set { _Controls = value; } |
49 |
} |
50 |
|
51 |
private bool _Loop = false; |
52 |
public bool Loop |
53 |
{ |
54 |
get { return _Loop; } |
55 |
set { _Loop = value; } |
56 |
} |
57 |
|
58 |
protected override void RenderContents(HtmlTextWriter output) |
59 |
{ |
60 |
output.AddAttribute(HtmlTextWriterAttribute.Id, this.ID); |
61 |
output.AddAttribute(HtmlTextWriterAttribute.Width, this.Width.ToString()); |
62 |
output.AddAttribute(HtmlTextWriterAttribute.Height, this.Height.ToString()); |
63 |
if (DisplayControlButtons == true) |
64 |
{ |
65 |
output.AddAttribute("controls", "controls"); |
66 |
} |
67 |
|
68 |
if (PosterUrl != null) |
69 |
{ |
70 |
output.AddAttribute("poster", PosterUrl); |
71 |
} |
72 |
|
73 |
if (AutoPlay == true) |
74 |
{ |
75 |
output.AddAttribute("autoplay", "autoplay"); |
76 |
} |
77 |
|
78 |
if (Loop == true) |
79 |
{ |
80 |
output.AddAttribute("loop", "loop"); |
81 |
} |
82 |
|
83 |
output.RenderBeginTag("video"); |
84 |
if (OggUrl != null) |
85 |
{ |
86 |
output.AddAttribute("src", OggUrl); |
87 |
output.AddAttribute("type", "video/ogg"); |
88 |
output.RenderBeginTag("source"); |
89 |
output.RenderEndTag(); |
90 |
} |
91 |
|
92 |
if (Mp4Url != null) |
93 |
{ |
94 |
output.AddAttribute("src", Mp4Url); |
95 |
output.AddAttribute("type", "video/mp4"); |
96 |
output.RenderBeginTag("source"); |
97 |
output.RenderEndTag(); |
98 |
} |
99 |
output.RenderEndTag(); |
100 |
} |
101 |
|
102 |
protected override void Render(HtmlTextWriter writer) |
103 |
{ |
104 |
this.RenderContents(writer); |
105 |
} |
106 |
} |
107 |
} |
108 |
Kontrol kita sekarang selesai! Yang harus kita lakukan adalah membangun proyek sebelum kita menggunakannya pada halaman web ASP.NET.
Langkah 9: Membangun Proyek
Saatnya membangun proyek. Pilih Build
, lalu klik Build Solution
dari menu utama.



Setelah membangun proyek, langkah selanjutnya adalah menambahkan kontrol VideoPlayer ke dalam Toolbox Explorer
.
Langkah 10: Menambahkan Kontrol VideoPlayer ke Toolbox Visual Studio
- Untuk menambahkan kontrol VideoPlayer ke Toolbox, klik kanan di
Toolbox Explorer
-
Choose Items
dari menu konteks - Klik tombol
Browse
di kotak dialog Choose Toolbox Items - Arahkan ke direktori proyek ASP.NET
- Pergi ke direktori
CustomControls
- Buka direktori
Bin\Debug
(Visual Studio membangun versi debug secara default.) - Pilih perakitan
CustomControls.DLL
dan klik tombolOpen



VideoPlayer
akan muncul di kotak dialog Choose Toolbox Items seperti yang ditunjukkan pada gambar di atas. Kotak centang akan menampilkannya sebagai terpilih. Segera setelah Anda mengklik tombol OK
di kotak dialog Choose Toolbox Items, kontrol VideoPlayer baru akan muncul di toolbox.



Langkah 11: Menempatkan Kontrol VideoPlayer di halaman web ASP.NET
Untuk melihat bagaimana kontrol bekerja, kita harus memberikannya sebuah rumah. Tambahkan halaman baru ke situs web. Klik kanan proyek ASP.NET dari Solution Explorer. Pilih Add New Item
, dan tambahkan sebuah Web Form
. Namakan Web Form VideoPlayerTest.aspx
.
Untuk menempatkan kontrol pada halaman, alihkan ke mode Design
. Seret kontrol VideoPlayer
dari Toolbox dan lepaskan ke tampilan desain VideoPlayerTest.aspx
.
Listing berikut menunjukkan bagaimana kontrol dideklarasikan pada halaman:
1 |
|
2 |
<cc1:VideoPlayer ID="VideoPlayer1" runat="server" Mp4Url="videos/movie.mp4" OggUrl="videos/movie.ogg" Width="400" Height="300" /> |
Baris kode berikut adalah apa yang ditambahkan Visual Studio ke file ASPX
untuk mengakomodasi kontrol. Anda dapat melihatnya dengan memilih tab Source
dari bagian bawah jendela kode di Visual Studio. Direktif Register
memberitahu runtime ASP.NET di mana untuk menemukan kontrol kustom (yang perakitan) dan memetakannya ke awalan tag.
1 |
|
2 |
<%@ Register assembly="CustomControls" namespace="CustomControls" tagprefix="cc1" %> |
Kita sekarang dapat menguji kontrolnya.



Ringkasan
Dalam tutorial ini, Anda belajar cara membuat kontrol server kustom ASP.NET sendiri dari awal. Anda sekarang tahu setiap langkah proses - dari cara membuat proyek perpustakaan kontrol kustom web, cara menambahkan properti ke kontrol kustom, cara me-render markup HTML kontrol ke klien, dan akhirnya, cara menggunakan kontrol kustom ASP.NET dalam bentuk web.
Mudah-mudahan, Anda sekarang memiliki keterampilan untuk membuat kontrol kustom yang memiliki semua fungsi dari kontrol sisi-server ASP.NET standar. Terima kasih banyak telah membaca!