ASP.NET MVC Unobtrusive (ii)

Ditulis oleh Soeleman, dipublikasi pada 08 Aug 2017 dalam kategori Tutorial
ASP.NET MVC Unobtrusive (ii) - CodePolitan.com

Setelah melihat mudahnya mengunakan Unobtrusive di ASP.NET MVC. Tentu kita ingin mendalami, apa yang bisa kita lakukan lagi dengan ini.

Validation

Bila diperhatikan template project MVC, sudah ada package Microsoft jQuery Unobtrusive Validation didalamnya. Dengan package itu, kita bisa membuat form kita menampilkan seperti pada gambar.

Mari kita coba kombinasikan Unobtrusive-Validation dan Unobtrusive-Ajax. Tentu kita buat versi HTML dan Unobtrusive.

alt textASP.NET MVC juga melakukan pengecekan pada Model yang dipakai.

Dalam hal ini, ia melihat property bertype Int32. Maka pada saat razor men-render, informasi atribut data-val-number ke input element.

Sekarang kita coba menambahkan validator untuk required. Di ASP.NET MVC kita cukup menambahkan attribut Required pada property. Hasil dari penambahan atribut ini, akan terlihat di element sebagai atribut data-val-required. Dan atribut-atribut ini yang akan di pakai oleh Unobtrusive-Validation sebagai 'parameter'-nya.

< VB.NET >

alt text

< C# >

alt text

HTML Validation

Melanjutkan form terdahulu, kita buat controller baru dengan tambahan pengecekan pada HttpPost. Selebihnya hampir sama.

< VB.NET >

alt text

< C# >

alt text

Pada section scripts, kita cukup menambahkan jqueryval yang ada di-BundleConfig. Kita tidak perlu script tambahan di bawahnya. Script itu ditambahkan karena kita coba mengintegrasikan dengan css dari bootstrap. Agar Unobtrusive-Validation dapat bekerja cukup dengan jqueryval saja.

Di sisi form-nya, kita tambahkan Html.ValidationMessageFor sebagai mekanisme menampilkan pesan yang ada di atribut element input-nya. Ini tidak mandatory, ini sebagai pelengkap.

< VB.NET >

alt text

< C# >

alt text

Di sini kita melihat form-nya tetap bekerja seperti yang kita harapkan dengan tambahan validasi. Pada saat kita masukkan bukan angka atau kosong, validasi akan muncul. Diluar script untuk bootstrap, kita tidak menulis javascript untuk tugas validasi ini.

Dari response juga terlihat seperti layaknya html-form.

alt text

Unobtrusive Validation

Sekarang kita coba melihat, apakah kedua Unobtrusive dapat bekerja sama?

Seperti yang terlihat di-controller yang ada, kita tidak banyak melakukan perubahan. Bahkan boleh dibilang sama.

< VB.NET >

alt text

< C# >

alt text

Untuk View-nya juga hampir sama. Dan kita tambahkan beberapa perubahan seperti pada versi HTML. Yang berbeda hanya di-section scripts kita tambahkan jqueryuno.

< VB.NET >

alt text

< C# >

alt text

Dan itu bekerja seperti yang kita harapkan. Tentu dengan tambahan validasi, ketika kosong atau di isi bukan angka. Selebihnya cara kerjanya sama, terlihat di response dari ajax-nya.

alt text

Search

Sekarang kita coba kombinasi dari server-render dengan Unobtrusive-Ajax. Tentu kita juga buat versi HTML-nya sebagai bukti, ini bisa dilakukan dari sisi yang berbeda.

Data

Karena ini untuk pencarian, maka kita buatkan class untuk mempermudah menampilkan data.

< VB.NET >

alt text

< C# >

alt text

Sebagai 'database'-nya, kita simulasi dengan class ProviderContext. Ini akan mempermudah kita melakukan pencarian data.

< VB.NET >

alt text

< C# >

alt text

PartialView

Pada demo terdahulu, kita hanya mengirimkan hanya nilainya. Sedangkan kita tidak ada mekanisme untuk komplek element.

Oleh karena itu kita akan menggunakan PartialView dalam razor untuk mempermudah membentuk bagian HTML ke browser.

Kita bisa saja menulis nama property secara langsung. Pada kesempatan ini kita coba membuatnya lebih dynamic, dengan class Helper dibawah.

< VB.NET >

alt text

< C# >

alt text

Di sini kita buat View dengan nama _TableCountryRegion . View ini tugasnya membuat bagian dari HTML yang intinya men-render data ke dalam table element.

< VB.NET >

alt text

< C# >

alt text

HTML Seach

Setelah persiapan diatas, buat controller seperti dibawah.

< VB.NET >

alt text

< C# >

alt text

Karena design kita tidak memiliki element button, maka kita tambahkan sedikit script untuk men-trigger-submit lewat keydown-event. Ini tidak ada hubungannya dengan demo ini, hanya lebih nyaman pencarian dilakukan pada saat tombol enter di tekan.

Yang dilakukan oleh View ini, juga menampilkan table lewat Html.Partial View _TableCountryRegion.

< VB.NET >

alt text

< C# >

alt text

Hasil dari response yang ada, kita dapati hasil dari standart HTML Form. Halaman penuh setiap, kita menekan tombol enter.

alt text

Unobtrusive Form

Mari kita coba optimalkan versi HTML dengan Ajax.

Di-controller, pada saat HttpPost kita akan mengecek juga apakah ini ajax-request atau bukan. Dan bila ini ajax-request maka kita akan men-render-view yang isinya bagian dari html sesuai dengan pencarian dari variable search.

< VB.NET >

alt text

< C# >

alt text

Untuk View-nya, tidak banyak berubah seperti versi HTML. Tentu kita tambahkan Unobtrusive-Ajax dalam section scripts.

Yang lainnya hampir sama bila mana kita menggunakan cara ini.

< VB.NET >

alt text

< C# >

alt text

Kalau pada demo-demo terdahulu, kita hanya mengirimkan hasilnya saja. Maka seperti yang kita lihat, kita mengirimkan bagian html untuk ditambahkan ke halaman yang ada. Cara seperti ini yang twitter juga lakukan, karena ternyata ini lebih bagus daripada di buat di browser -- itu menurut mereka loh.

alt text

Penutup

Banyak variasi yang bisa di lakukan dengan cara ini. Dan ini akan banyak membantu bagi developer bekerja dengan ajax dalam form-nya. Dengan sedikit atau tidak sama sekali menulis JavaScript, kita bisa menggunakannya dengan lebih bersih dan rapi.

Referensi

Perhatian! Code yang ditampilkan dalam tulisan ini merupakan ilustrasi dari yang ingin dipaparkan dan bukan production ready code. Sudah banyak kejadian karena asal meng-copy-and-paste tanpa mengerti code yang diambil itu ke dalam production. Selain itu perlu ada tambahan code dan test sebelum siap untuk digunakan secara utuh.



Berlangganan Informasi CodePolitan Melalui Email

Jangan sampai kamu melewatkan informasi penting tentang pemrograman dan teknologi! Kamu bisa berlangganan Newsletter CodePolitan dengan cara mengisi formulir di samping.