Veysel Uğur KIZMAZ

Asp.Net MVC ile JQuery UI Elemanlarını Kullanma

16.06.2012Okunma Sayısı: 6856Kategori: ASP.NET MVC

 Bu makalemizde Asp.Net MVC ile Jquery UI componentleri nasıl kullanacağımızı inceleyelim. Bu işlemi bir örnek uygualama üzerinde gerçekleştirelim. Örneğimizde bir DatePicker olsun, bu control’de seçilen tarihi “Kaydet” isimli butona tıkladığımızda Controller’da nasıl kullanacağımızı inceleyelim.

Yeni bir Asp.Net MVC 3 Web Application – Empty Applicaton oluşturalım.
 
Sayfamızdan alacağımız veriyi model ile alacağımız için “Models” klasörünün altına DenemeModel isminde bir model ekleyelim.
 
 
  1. namespace UgurKizmaz.Models
  2. {
  3.     public class DenemeModel
  4.     {
  5.         public string Tarih { get; set; }
  6.     }
  7. }
 
Sadece string olarak Tarih bilgisini tutalım.
 
Şimdi Model’i kullanacağımız Controller’ı ekleyelim. İsmi JQueryController olsun.
 
 
  1. namespace UgurKizmaz.Controllers
  2. {
  3.     public class JQueryController : Controller
  4.     {
  5.         public ActionResult DatePicker()
  6.         {
  7.             return View();
  8.         }
  9.  
  10.         [HttpPost]
  11.         public ActionResult DatePicker(DenemeModel model)
  12.         {
  13.             return View();
  14.         }
  15.     }
  16. }
 
İlk methodumuz, sayfamızı oluşturan methodumuzdur. İkinci methodumuz ise HttpPost attribute’undan da anlaşılacağı üzere sayfadan post edilen veriyi alıp işleyen methodumuzdur.
 
Şimdi DatePicker() methodumuza sağ tıklayıp Add View diyelim ve modelimizi ekleyelim.
 
DatePicker.cshtml dosyamızın kodlarını aşağıdaki gibi düzenleyelim ve yapılan işlemleri inceleyelim.
 
 
  1. @model UgurKizmaz.Models.DenemeModel
  2.  
  3. @{
  4.     Layout = "~/Views/Shared/_Layout.cshtml";
  5. }
  6.  
  7. <link href="../../Content/themes/base/jquery.ui.datepicker.css" rel="stylesheet"
  8.     type="text/css" />
  9. <link href="../../Content/themes/base/jquery.ui.theme.css" rel="stylesheet" type="text/css" />
  10. <link href="../../Content/themes/base/jquery.ui.core.css" rel="stylesheet" type="text/css" />
  11.  
  12. <script src="../../Scripts/jquery-ui-1.8.11.js" type="text/javascript"></script>
  13. <script type="text/javascript">
  14.     $(function () {
  15.         $("#dtptarih").datepicker();
  16.     });
  17. </script>
  18.  
  19. @using (Html.BeginForm()) {
  20.     @Html.ValidationSummary(true)
  21.     <fieldset>
  22.         <p>
  23.             @Html.TextBoxFor(model => model.Tarih, new { @id = "dtptarih" })
  24.             <input type="submit" value="Tikla" runat="server"/>
  25.         </p>
  26.     </fieldset>
  27. }
  28.  

 

 
1.       1. Modelimizi belirliyoruz.
@model UgurKizmaz.Models.DenemeModel
 
2.  Layout’u belirliyoruz.
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
 
3.       3. Date picker’ın düzgün görünümü için gerekli CSS dosyalarını yüklüyoruz.
 
  1. <link href="../../Content/themes/base/jquery.ui.datepicker.css" rel="stylesheet"
  2.     type="text/css" />
  3. <link href="../../Content/themes/base/jquery.ui.theme.css" rel="stylesheet" type="text/css" />
  4. <link href="../../Content/themes/base/jquery.ui.core.css" rel="stylesheet" type="text/css" />
 
4.      4.  Jquery’nin javascript dosyasını ekliyoruz.
 
  1. <script src="../../Scripts/jquery-ui-1.8.11.js" type="text/javascript"></script>
 
5.      5.  DatePicker’ı, ID’si “dtTarih” olan HTML elemanınıa bağlıyoruz.
 
  1. <script type="text/javascript">
  2.     $(function () {
  3.         $("#dtTarih").datepicker();
  4.     });
  5. </script>

 

 
6.       6. Modelimizi kullanarak HTML formumuzu oluşturuyruz.
@using (Html.BeginForm()) {
 
}
 
7.       7. Post işlemine dahil edeceğimiz model elemanlarının bulunacağı alanı belirliyoruz.
 
  1. <fieldset>
  2.    
  3. </fieldset>
 
8.      8.  Model’imizin özelliklerinin (modelimizde sadece Tarih property’si olduğu için bu özelliğinin) TextBox’larını oluşturuyoruz (Buraya girilecek verileri Conttoller’a göndereceğiz.) Burada dikkat etmeniz gereken nokta, bu textBox’a Html Attribute’u (HTML Özelliği) verdik : @id = “dtTarih”. Yani bu HTML elemanımızın adı “dtTarih” olsun dedik. Bu sayede 5. maddede yazdığımız durumu gerçekleştirmek için gerekli HTML elemanını da oluşturmuş oluyoruz.
 
@Html.TextBoxFor(model => model.Tarih, new { @id = "dtTarih" })
 
9.      9.  Post işlemini gerçekleştirecek butonumuzu yerleştiriyoruz.
 
 
  1. <input type="submit" value="Tikla" runat="server"/>
 
10. Şimdi projemizi çalıştıralım ve JQuery/DatePicker linkine gidelim.
 
Description: C:\Users\ugur\Desktop\Capture.JPG
 
TextBox’a tıkladığımızda hemen altında DatePicker açıldı. Şimdi picker’dan bir tarih seçelim.
 
 
Şimdi, ControlleR’a dönelim ve post işlemini gerçekleştirdiğimizde çalışacak kodumuza breakpoint koyalım ve Tıkla butonuna tıklayalım.
 
 
Modelimizin Tarih değerinde 04/28/2011 değerinin yazdığını görebiliyoruz. Bu değeri artık controller’da kullanabiliriz.
 
 
 
 Veysel Uğur KIZMAZ

 

Bilgisayar Mühendisi
veysel@ugurkizmaz.com