ASP.NET MVC Unobtrusive (ii)

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.

Model Validation

Ketika men-response, ASP.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 >

< C# >

HTML Validation

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

< VB.NET >

< C# >

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 >

< C# >

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.

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 >

< C# >

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 >

< C# >

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.

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 >

< C# >

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

< VB.NET >

< C# >

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 >

< C# >

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 >

< C# >

HTML Seach

Setelah persiapan diatas, buat controller seperti dibawah.

< VB.NET >

< C# >

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 >

< C# >

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

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 >

< C# >

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 >

< C# >

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.

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

• ASP.NET MVC
• NuGet
• NuGet: Microsoft jQuery Unobtrusive Ajax
• NuGet: Microsoft jQuery Unobtrusive Validation
• Wikipedia: Unobtrusive JavaScript

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.