MVC Saat Seçmek İçin Komponent Eklemek

MVC mimarisini kullanan bir web uygulaması geliştiriyorsanız önceden kullanacağınız komponentleri seçmeniz size ciddi anlamda hız kazandıracaktır. Bu konu ile ilgili size Aranabilir Combobox önerisinde bulunmuştum. Şimdi de kullanıcıya saat ile ilgili bilgiler gösterecekseniz ya da saat ile ilgili kullanıcıdan bilgi alacaksanız MVC saat seçmek için komponent önerisinde bulunacağım. Kısaca mvc clockpicker component !

MVC Saat Seçmek İçin Komponent

Bahsedeceğim bu componenti Javascript destekleyen bütün web uygulamalarında kullanabilirsiniz. Ben şu anda bir MVC mimarisini kullanan proje geliştirdiğim için MVC projesine nasıl bu komponentin ekleneceğini anlatacağım. Siz kendi proje mimarinize bu komponenti ekleyebilirsiniz. Bunun için benimle iletişime geçebilir ya da Google aramasında bulunabilirsiniz.

İlk olarak kullanacağımız komponentin kodlarını indirelim. Bu indirme işlemi için ClockPicker’ın kendi sitesine sizi yönlendiriyorum. Projede kullandığınız Javascript sürümü ile uyumlu bir sürümü ya da en güncel sürümü indirmenizi tavsiye ederim. İndirme işleminin ardından arşivi açık dosyaları projenize dahil edin.

Ardından bu komponenti kullanacağınız View’e ya da paylaşılan viewe aşağıda listesini paylaştığım dosyaların yolunu belirtin. (Kısaca sürükleyip bırakın)

• assets/css/github.min.css
• assets/css/bootstrap.min.css
• dist/bootstrap-clockpicker.min.css
• assets/js/bootstrap.min.js
• assets/js/jquery.min.js
• assets/js/highlight.min.js
• dist/jquery-clockpicker.min.js

Saat komponentini sayfanın eklemek istediğiniz kısmına gidip aşağıdaki kod bloğunu yapıştırırsanız saat komponenti ilgili yerde gözükecektir.

 <div class="input-group clockpicker" data-align="top" data-autoclose="true">
                @Html.TextBoxFor(model => model.IseGirisSaat,
    new { @class="form-control", @Value = Model.IseGirisSaat.ToString() })
            </div>

Ve sayfaya bu komponent için clockpicker fonksiyonunun çalışması gerektiğini söylemeniz gerekiyor. Bunu yapmak için de aşağıdaki Javascript kodunu yazmanız yeterli olacaktır.

<script type="text/javascript">
    $('.clockpicker').clockpicker();
</script>