Formulir merupakan salah satu fitur HTML yang sangat sering digunakan untuk memasukan atau mengirim data ke server. Semua bahasa pemrograman yang digunakan untuk membangun applikasi web sering menggunakan fitur ini. Lalu bagaimanakah formulir di ASP.Net MVC 5?. Agar anda mudah mengikuti tutorial ini, sebaiknya anda sudah memahami dulu cara membuat model di ASP.NET MVC 5.
Pada tutorial ini, kita akan membuat formulir di ASP.Net MVC 5. Mari kita coba membuat formulir dengan langkah-langkah berikut ini.
1. Membuat Action di Controller.
Kita buka controller Profile terlebih dahulu. Kemudian kita tambahkan action AddProfile didalam ProfileController. Agar lebih jelas anda dapat melihat ilustrasi pada gambar berikut ini.
2. Menambahkan View AddProfile.
Langkah berikutnya kita akan menambahkan View AddProfile dengan template Create dan Model Class Profile. Agar lebih jelas anda dapat melihat ilustrasi pada gambar berikut ini.
Klik tombol Add untuk menambahkan View. Pada gambar berikut ini adalah hasil view dari AddProfile.
3. Run Applikasi
Setelah berhasil kita menambahkan View AddProfile kedalam folder Views/Profile, mari kita coba menjalankan web applikasi ASP.Net MVC 5. Klik tombol Run untuk menjalankan ASP.NET MVC, gambar berikut ini adalah hasil dari View AddProfile.
Setelah berhasil menjalankan web aplikasi, mari kita coba isi formulir dari AddProfile dan klik tombol Create. Maka formulir yang kita isi akan kosong kembali. Hal ini terjadi karena tidak ada action yang menangani request POST dari formulir. Bagaimana cara menangani request POST akan kita bahas pada tahap berikutnya.
4. Menangi Request Post
Pada saat anda mengisi formulir dari AddProfile kemudian anda menekan tombol Create, itu berarti formulir akan mengirim data melalui HTTP Post. Sedangkan jika anda langsung mengakses Action AddProfile melalui web browser maka Request yang diminta adalah HTTP Get. Karena kedua permintaan tersebut menggunakn HTTP Request yang berbeda, maka ASP.NET MVC akan membedakan request dengan ActionVerb. Untuk memahami HTTP Get dan HTTP Post pada ASP.NET MVC 5 mari kita tambahkan action AddProfile untuk mengani request dengan HTTP Post. Anda dapat membuat action pada Profile controller seperti gambar berikut ini.
Nah sekarang kita sudah memiliki dua action AddProfile. Action yang pertama akan mengani HTTP Get yang akan me-render view AddProfile. Sedangkan action yang kedua akan menerima input formulir AddProfile melalui HTTP Post kemudian meneruskan datanya ke view Detail. Agar lebih jelas anda dapat melihat ilustrasi pada gambar berikut ini.
View Detail sudah kita buat pada tutorial ASP.NET MVC 5 - [Part 04] Mebuat Model. Karena View Detail sudah menggunakan Model Profile, dan data yang kita kirim adalah objek dari model class Profile. Maka data tersebut akan ditampilkan langsung oleh View Detail. Gambar berikut ini adalah hasil dari aplikasi web ASP.NET MVC 5 yang menangani HTTP Post.
Berikut adalah data yang diterima oleh View Detail.
Bagaimana menurut anda? mudah bukan menggunakan formulir di ASP.NET MVC 5. Semoga anda dapat mempraktekkan tutorial ini sebelum anda lanjut ke tutorial selanjuta.
Terimakasih telah bersedia membaca tutorial ini, silahkan beri pendapat anda tentang tutorial ini dengan menulis komentar dibawah ini. ^_^
Pak untuk validasinya kalo inputan null, kenapa message validationsummarynya tidak mau muncul ya pak, sudah ditambahkan di view dan di modelnya juga sudah ditambahkan data anotation [required]
BalasHapus