Tutorial ini adalah sambungan dari Hands On Labs ASP.NET MVC Part1, Part2, Part3

JQuery adalah javascript framework yang saat ini paling popular dan banyak digunakan, karena selain penggunaannya yang relatif mudah JQuery juga menyediakan plugin yang sangat banyak dan dapat digunakan secara “free”. JQuery juga disupport oleh komunitas yang sangat besar dan aktif.
JQuery scara default sudah ditambahkan kedalam ASP.NET MVC Project, letaknya didalam folder “script”.

Saat ini JQuery sudah mencapai versi 1.4, anda dapat mendownload JQuery Plugin di http://jquery.com/plugin/ untuk mendownload plugin-plugin yang disediakan.
Pada contoh kali ini kit akan menggunakan salah satu plugin dari JQuery yaitu “JQuery UI Calendar” untuk menambahkan date picker calendar kedalam program ASP.NET MVC diatas. Pada HOL ini kita menggunakan JQuery 1.3.2.

1.  Untuk menambahkan JQuery UI tambahkan library berikut pada folder “script”

2.  Kemudian tambahkan pula css dan image pada folder “content” 

3.  Kemudian buat “Partial View”. Partial View adalah bagian View yang dapat digunakan pada View yang lain (mirip Web User Control pada Web Form).
4.  Klik kanan pada folder “Home” didalam folder “Views”. Pilih “Add View” – check “Create Partial View (.ascx)” beri nama “VUCDateTime.ascx”. tulis kode berikut:

<link href="../../Content/smoothness/ui.all.css" rel="stylesheet" 

type="text/css" /> 

    <script src="../../Scripts/jquery-1.3.2.min.js" 

type="text/javascript"></script> 

    <script src="../../Scripts/jqueryUI/ui.core.js" 

type="text/javascript"></script> 

    <script src="../../Scripts/jqueryUI/ui.datepicker.js" 

type="text/javascript"></script> 

    <script type="text/javascript"> 

        $(document).ready(function() { 

            $("#BuyDate").datepicker({ 

                showOn: 'button', 

                buttonImage: '../../Content/calendar.gif', 

                buttonImageOnly: true 

            }); 

        }); 

    </script> 

5.  Kode diatas berisi kode JQuery yang digunakan untuk menampilkan date picker.

6.  Tambahkan Partial View yang sudah dibuat kedalam  View Create dan View Edit.

<% Html.RenderPartial("VUCDateTime"); %> 

7.  Maka ketika anda menjalankan Create atau Edit View anda dapat menggunakan date picker yang sudah anda buat.

Sekian tutorial dari saya, semoga dapat membantu teman-teman yang ingin mencoba menggunakan framework ASP.NET MVC