Asp.Net MVC 4 uygulamalarında tarih biçimli form elemanlarını seçenekli bir şekilde kullanıcıya sunmak için en etkili yöntem JQuery datepicker UI elementini kullanmaktır. JQuery datepicker elementi ile detaylı bilgiye buradan ulaşabilirsiniz. Dil seçeneklerine kadar bir çok özelliği bu siteden bulabilrsiniz.
Asp.net MVC 4 uygulamamızda tarih biçimindeki bir form elemanına nasıl datepicker özelliği eklendiğini incelemeye çalışacağız.
Hemen bir MVC 4 projesi oluşturarak işe başlayabiliriz. Uygulamımızda formu temsil etmek için rezervasyon adında bir Model tanımlıyoruz.
namespace DatepickerJQueryDemo.Models
{
public class Reservation
{
public string Name { get; set; }
public DateTime Date { get; set; }
}
}
Modelimizi kullanmak adına ReservationController adında bir controller ekleyerek devam edebiliriz.
public class ReservationController : Controller
{
public ActionResult Create()
{
return View();
}
}
ReservationController sınıfımınız Create action metodu bir view döndürmektedir. Bu view içerisinde de create formu ve içierisinde de Name ve Date şeklinde iki metin kutusu olacaktır. Bundan sonraki adımınız Date şeklindeki metin kutusuna datepicker özelliğini katmak olacaktır.
Yapacağımız ilk hamle SolutionExplorer penceresindeki projemizin Views dizinindebulunan Shared dizini içerisine EditorTemplates adında bir klasör ekleyip içerisine DateTime adında bir PartialView eklemek olacaktır.
EditorRemplates ve DisplayTemplates hakkında daha önceden yazılmış makaleleri buradan inceleyebilirsiniz. Bu işlemi yaptığımızda artık bütün view sayfalarındaki DateTime tipinde olan form elemanları (Html.EditorFor extension metodundan) tanımladığımız bu editör template dosyasını kullanır. Burada dikkat edecek olursak “model DateTime?” şeklinde modelin Nullable tipinde olduğunu belirtiyoruz. Bu belirtimi yapmadığımızda karşılaşacağımız hata mesajı şu şeklide olacaktır.
Hata: The model item passed into the dictionary is null, but this dictionary requires a non-null model item of type ‘System.DateTime’.
Bu hatanın sebebi Create action metodunun view sayfası bir reservation modeline bağlı olamsı, ancak create view sayfasına herhangi bir model nesnesi gönderilmediğinden modelin null olmasıdır. Bu sebeple Datetime nesnesi null şeklinde bir hata mesajı karşımıza çıkar.
Bu ince noktayı belirttikten sonra artık ikinci hamleye geçebiliriz. Bu hamlemiz ise formumuzdaki Date tipindeki text kutusuna JQuery datepicker tarafından kullanılacak olan “data-datepicker” adında bir class eklemek olacaktır. JQuery UI scripti bir elementte bu sınıfı gördüğünde, o elemente datepicker özelliğini yapıştırır.
Bu javascript kodu, input tipinde olan ve “data-datepicker” sınıfını içieren elementlere datepicker özelliğini ekler. Bir önceki adımımızda TextBox tipine “new{data_datepicker=true}” şeklinde sınıf eklemesini yapmıştık.
Bu javascript kodunu bir js dosyasına kaydedip Create viewe sayfasına refereans olarak gösterebilirsiniz. Ya da direk Create sayfası içerisine yazabilirsiniz.
Son adımda ise Create view sayfasına jquery.ui dosyasını referens olarak vermek gerekmektedir. Bu dosya isteğe göre _Layout.cshtml sayfasına da referans verebilirsiz. Jquery datepicker elementinin rengi ve şekline bağlı görünüm özellikleri de Content/themes/base/ jquery-ui.css dosyasında bulunmaktadır. Bu dosyayı da refereans olarak eklemeliyiz.
<link href=”~/Content/themes/base/jquery-ui.css” rel=”stylesheet” />
<script src=”~/Scripts/myscripts.js”></script>
<script src=”~/Scripts/jquery-ui-1.8.20.js”></script>
Not: Eğer jquery-ui.js refereansını eklemeyi unutursanız aşağıdaki gibi javascript hataları alabilirsiniz.
Hata: 0x800a01b6 – Microsoft JScript çalışma hatası: Nesne, ‘datepicker’ özelliğini veya yöntemini desteklemez.
Çalışan örnek uygulamaya buradan ulaşabilirsiniz.
Bir sonraki yazıda görüşmek dileğiyle.
