ASP.NET MVC ile HTML5 ve jQuery Ui Datepicker Açılan Takvimini Kullanma - Bölüm 4

tarafından Rick Anderson

Bu öğreticide, bir ASP.NET MVC Web uygulamasında düzenleyici şablonları, görüntüleme şablonları ve jQuery UI datepicker açılır takvimiyle nasıl çalışılacağı hakkında temel bilgiler öğretilecektir.

Tarihleri Düzenlemek için Şablon Ekleme

Bu bölümde, ASP.NET MVC, DataType özniteliğinin Tarih numaralandırmasıyla işaretlenmiş model özelliklerini düzenlemek için kullanıcı arabirimini görüntülediğinde uygulanacak tarihleri düzenlemek için bir şablon oluşturacaksınız. Şablon yalnızca tarihi işler; saat görüntülenmez. Şablonda, tarihleri düzenlemek için bir yol sağlamak için jQuery Kullanıcı Arabirimi Datepicker açılır takvimini kullanacaksınız.

Başlamak için Movie.cs dosyasını açın ve aşağıdaki kodda gösterildiği gibi Date sabit listesi ReleaseDate ile DataType özniteliğini özelliğine ekleyin:

[DataType(DataType.Date)]
public DateTime ReleaseDate { get; set; }

Bu kod, ReleaseDate alanın hem görüntüleme şablonlarında hem de düzenleme şablonlarında zaman olmadan görüntülenmesine neden olur. Uygulamanız Views\Shared\EditorTemplates klasöründe veya Views\Movies\EditorTemplates klasöründe bir date.cshtml şablonu içeriyorsa, bu şablon düzenleme sırasında herhangi bir DateTime özelliği işlemek için kullanılır. Aksi takdirde yerleşik ASP.NET şablon oluşturma sistemi özelliği tarih olarak görüntüler.

Uygulamayı çalıştırmak için CTRL+F5'e basın. Yayın tarihinin giriş alanının yalnızca tarihi gösterdiğini doğrulamak için bir düzenleme bağlantısı seçin.

Çözüm Gezgini'daGörünümler klasörünü genişletin, Paylaşılan klasörünü genişletin ve ardından Views\Shared\EditorTemplates klasörüne sağ tıklayın.

Ekle'ye ve ardından Görünüm'e tıklayın. Görünüm Ekle iletişim kutusu görüntülenir.

Görünüm adı kutusuna "Tarih" yazın.

Kısmi görünüm olarak oluştur onay kutusunu seçin. Düzen veya ana sayfa kullan ve Kesin olarak belirlenmiş görünüm oluştur onay kutularının seçili olmadığından emin olun.

Ekle'ye tıklayın. Views\Shared\EditorTemplates\Date.cshtml şablonu oluşturulur.

Views\Shared\EditorTemplates\Date.cshtml şablonuna aşağıdaki kodu ekleyin.

@model DateTime
Using Date Template
@Html.TextBox("", String.Format("{0:d}", Model.ToShortDateString()),
  new { @class = "datefield", type = "date"  })

İlk satır modeli bir DateTime tür olarak bildirir. Düzenleme ve görüntüleme şablonlarında model türünü bildirmeniz gerekmeyecek olsa da, görünüme geçirilen modelin derleme zamanı denetimini almanız en iyi yöntemdir. (Daha sonra Visual Studio görünümünde model için IntelliSense edinmeniz de bir diğer avantajdır.) Model türü bildirilmemişse, ASP.NET MVC bunu dinamik bir tür olarak değerlendirir ve derleme zamanı türü denetimi yoktur. Modelin bir DateTime tür olduğunu bildirirseniz, kesin olarak türlenir.

İkinci satır, bir tarih alanından önce "Tarih Şablonu Kullanma" ifadesini görüntüleyen değişmez HTML işaretlemesidir. Bu tarih şablonunun kullanıldığını doğrulamak için bu satırı geçici olarak kullanacaksınız.

Sonraki satır, metin kutusu olan bir alanı işleyen bir inputHtml.TextBox yardımcısıdır. Yardımcının üçüncü parametresi, metin kutusunun datefield sınıfını olarak ve türünü olarak ayarlamak için anonim bir tür datekullanır. class(C# dilinde ayrılmış olduğundan, C# ayrıştırıcısında özniteliğinden class kaçmak için karakterini kullanmanız @ gerekir.)

Tür date , HTML5 kullanan tarayıcıların bir HTML5 takvim denetimini işlemesini sağlayan bir HTML5 giriş türüdür. Daha sonra sınıfını kullanarak jQuery datepicker'ı öğesine bağlamak için Html.TextBox bazı JavaScript'ler datefield ekleyeceksiniz.

Uygulamayı çalıştırmak için CTRL+F5'e basın. Düzenleme görünümündeki ReleaseDate özelliğin düzenleme şablonunu kullandığını doğrulayabilirsiniz çünkü şablon, bu görüntüde gösterildiği gibi metin giriş kutusunun hemen önünde ReleaseDate "Tarih Şablonu Kullanılıyor" ifadesini görüntüler:

Tarayıcınızda sayfanın kaynağını görüntüleyin. (Örneğin, sayfaya sağ tıklayın ve Kaynağı görüntüle'yi seçin.) Aşağıdaki örnekte, class işlenen HTML'deki ve type özniteliklerini gösteren, sayfaya ilişkin işaretlemelerden bazıları gösterilmektedir.

<input class="datefield" data-val="true" data-val-required="Date is required" 
      id="ReleaseDate" name="ReleaseDate" type="date" value="1/11/1989" />

Views\Shared\EditorTemplates\Date.cshtml şablonuna dönün ve "Tarih Şablonunu Kullanma" işaretlemesini kaldırın. Tamamlanmış şablon şu şekilde görünür:

@model DateTime
@Html.TextBox("", String.Format("{0:d}", Model.ToShortDateString()),
  new { @class = "datefield", type = "date" })

NuGet kullanarak jQuery Ui Datepicker Açılan Takvimi ekleme

Bu bölümde jQuery ui datepicker açılır takvimini tarih düzenleme şablonuna ekleyeceksiniz. jQuery kullanıcı arabirimi kitaplığı animasyon, gelişmiş efektler ve özelleştirilebilir pencere öğeleri için destek sağlar. jQuery JavaScript kitaplığının üzerine kurulmuştur. Datepicker açılan takvimi, bir dize girmek yerine takvim kullanarak tarihleri girmeyi kolaylaştırır ve doğal hale getirir. Açılan takvim ayrıca kullanıcıları yasal tarihler ile sınırlar; bir tarih için normal metin girişi ( 33 Şubat 1999) gibi 2/33/1999 bir şey girmenize olanak sağlar, ancak jQuery UI datepicker açılır takvimi buna izin vermez.

İlk olarak jQuery kullanıcı arabirimi kitaplıklarını yüklemeniz gerekir. Bunu yapmak için, Visual Studio 2010 ve Visual Web Developer'ın SP1 sürümlerinde bulunan bir paket yöneticisi olan NuGet'i kullanacaksınız.

Visual Web Developer'da Araçlar menüsünde NuGet Paket Yöneticisi'ni ve ardından NuGet Paketlerini Yönet'i seçin.

Not: Araçlar menüsünde NuGet Paket Yöneticisi komutu görüntülenmiyorsa, NuGet web sitesinin NuGet'i Yükleme sayfasındaki yönergeleri izleyerek NuGet'i yüklemeniz gerekir.

Visual Web Developer yerine Visual Studio kullanıyorsanız Araçlar menüsünde NuGet Paket Yöneticisi'ni ve ardından Kitaplık Paketi Başvurusu Ekle'yi seçin.

MVCMovie - NuGet Paketlerini Yönet iletişim kutusunda, soldaki Çevrimiçi sekmesine tıklayın ve arama kutusuna "jQuery.UI" yazın. j Query Ui Widgets:Datepicker öğesini ve ardından Yükle düğmesini seçin.

NuGet, projenize şu hata ayıklama sürümlerini ve jQuery UI Core ve jQuery UI tarih seçicisinin küçültülmiş sürümlerini ekler:

• jquery.ui.core.js
• jquery.ui.core.min.js
• jquery.ui.datepicker.js
• jquery.ui.datepicker.min.js

Not: Hata ayıklama sürümleri ( .min.js uzantısı olmayan dosyalar) hata ayıklama için kullanışlıdır, ancak üretim sitesinde yalnızca küçültülen sürümleri eklersiniz.

JQuery tarih seçicisini gerçekten kullanmak için, takvim pencere öğesini düzenleme şablonuna bağlayacak bir jQuery betiği oluşturmanız gerekir. Çözüm Gezgini'daBetikler klasörüne sağ tıklayın ve Ekle'yi, ardından Yeni Öğe'yi ve ardından JScript Dosyası'nı seçin. dosyayı DatePickerReady.jsolarak adlandırın.

DatePickerReady.js dosyasına aşağıdaki kodu ekleyin:

$(function () {
    $(".datefield").datepicker(); 
});

jQuery hakkında bilginiz yoksa, bunun ne yaptığına ilişkin kısa bir açıklama aşağıda verilmiştir: İlk satır, sayfadaki tüm DOM öğeleri yüklendiğinde çağrılan "jQuery hazır" işlevidir. İkinci satır, sınıf adına datefieldsahip tüm DOM öğelerini seçer ve her biri için işlevini çağırır datepicker . (Sınıfı öğreticinin datefield önceki bölümlerinde Views\Shared\EditorTemplates\Date.cshtml şablonuna eklediğinizi unutmayın.)

Ardından Views\Shared\_Layout.cshtml dosyasını açın. Tarih seçiciyi kullanabilmeniz için gerekli olan aşağıdaki dosyalara başvuru eklemeniz gerekir:

• İçerik/temalar/base/jquery.ui.core.css
• content/themes/base/jquery.ui.datepicker.css
• İçerik/temalar/base/jquery.ui.theme.css
• jquery.ui.core.min.js
• jquery.ui.datepicker.min.js
• DatePickerReady.js

Aşağıdaki örnek, Views\Shared\_Layout.cshtml dosyasındaki öğesinin head en altına eklemeniz gereken gerçek kodu gösterir.

<link href="@Url.Content("~/Content/themes/base/jquery.ui.core.css")" 
        rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.datepicker.css")" 
        rel="stylesheet"  type="text/css" />
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.theme.css")" 
        rel="stylesheet" type="text/css" />

    <script src="@Url.Content("~/Scripts/jquery.ui.core.min.js")" 
        type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.datepicker.min.js")" 
        type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/DatePickerReady.js")" 
        type="text/javascript"></script>

Bölümün tamamı head burada gösterilmiştir:

<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" 
        rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" 
        type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" 
        type="text/javascript"></script>

    <link href="@Url.Content("~/Content/themes/base/jquery.ui.core.css")" 
        rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.datepicker.css")" 
        rel="stylesheet"  type="text/css" />
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.theme.css")" 
        rel="stylesheet" type="text/css" />

    <script src="@Url.Content("~/Scripts/jquery.ui.core.min.js")" 
        type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.datepicker.min.js")" 
        type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/DatePickerReady.js")" 
        type="text/javascript"></script>
</head>

URL içerik yardımcı yöntemi, kaynak yolunu mutlak bir yola dönüştürür. Uygulama IIS üzerinde çalışırken bu kaynaklara doğru şekilde başvurmak için komutunu kullanmanız @URL.Content gerekir.

Uygulamayı çalıştırmak için CTRL+F5'e basın. Bir düzenleme bağlantısı seçin ve ekleme noktasını ReleaseDate alanına yerleştirin. jQuery kullanıcı arabirimi açılan takvimi görüntülenir.

Çoğu jQuery denetiminde olduğu gibi datepicker da bunu kapsamlı bir şekilde özelleştirmenize olanak tanır. Daha fazla bilgi için bkz. Görsel Özelleştirme: jQuery kullanıcı arabirimi sitesinde jQuery kullanıcı arabirimi teması tasarlama.

HTML5 Tarih Giriş Denetimini Destekleme

Daha fazla tarayıcı HTML5'i desteklediğinden, giriş öğesi gibi date yerel HTML5 girişini kullanmak ve jQuery UI takvimini kullanmamak istersiniz. Tarayıcı tarafından desteklenip desteklenmediğini html5 denetimlerini otomatik olarak kullanmak için uygulamanıza mantık ekleyebilirsiniz. Bunu yapmak için DatePickerReady.js dosyasının içeriğini aşağıdakilerle değiştirin:

if (!Modernizr.inputtypes.date) {
    $(function () {
        $(".datefield").datepicker();
    });
}

Bu betiğin ilk satırında, HTML5 tarih girişinin desteklendiğini doğrulamak için Modernizr kullanılır. Desteklenmiyorsa jQuery kullanıcı arabirimi tarih seçicisi bağlı olur. (Modernizr , HTML5 ve CSS3'ün yerel uygulamalarının kullanılabilirliğini algılayan açık kaynaklı bir JavaScript kitaplığıdır. Modernizr, oluşturduğunuz tüm yeni ASP.NET MVC projelerine dahil edilir.)

Bu değişikliği yaptıktan sonra, Opera 11 gibi HTML5'i destekleyen bir tarayıcı kullanarak test edebilirsiniz. UYGULAMAYı HTML5 uyumlu bir tarayıcı kullanarak çalıştırın ve bir film girdisini düzenleyin. jQuery kullanıcı arabirimi açılan takvimi yerine HTML5 tarih denetimi kullanılır:

Tarayıcıların yeni sürümleri HTML5'i artımlı olarak uyguladığından, şimdilik web sitenize çok çeşitli HTML5 desteği sağlayan kod eklemek iyi bir yaklaşımdır. Örneğin, aşağıda sitenizin HTML5 tarih denetimini kısmen destekleyen tarayıcıları desteklemesini sağlayan daha sağlam bir DatePickerReady.js betiği gösterilmiştir.

if (!Modernizr.inputtypes.date) {
    $(function () {
        $("input[type='date']")
                    .datepicker()
                    .get(0)
                    .setAttribute("type", "text");
    })
}

Bu betik, HTML5 input tarih denetimini tam olarak desteklemeyen türdeki date HTML5 öğelerini seçer. Bu öğeler için jQuery kullanıcı arabirimi açılır takvimini bağlar ve ardından özniteliğini type olarak datetextdeğiştirir. özniteliği olarak typedatetextdeğiştirilerek kısmi HTML5 tarih desteği ortadan kalkar. JSFIDDLE'da daha sağlam birDatePickerReady.js betiği bulunabilir.

Şablonlara Boş Değer Atanabilir Tarihler Ekleme

Mevcut tarih şablonlarından birini kullanır ve null tarih geçirirseniz çalışma zamanı hatası alırsınız. Tarih şablonlarını daha sağlam hale getirmek için bunları null değerleri işleyecek şekilde değiştireceksiniz. Null atanabilir tarihleri desteklemek için Views\Shared\DisplayTemplates\DateTime.cshtml içindeki kodu aşağıdaki şekilde değiştirin:

@model Nullable<DateTime>
@(Model != null ? string.Format("{0:d}", Model) : string.Empty)

Model null olduğunda kod boş bir dize döndürür.

Views\Shared\EditorTemplates\Date.cshtml dosyasındaki kodu aşağıdakiyle değiştirin:

@model Nullable<DateTime>

 @{
    DateTime dt = DateTime.Now;
    if (Model != null)
    {
       dt  = (System.DateTime) Model;
   
    }
    @Html.TextBox("", String.Format("{0:d}", dt.ToShortDateString()), new { @class = "datefield", type = "date"  })
}

Bu kod çalıştırıldığında, model null değilse modelin DateTime değeri kullanılır. Model null ise, bunun yerine geçerli tarih kullanılır.

Wrapup

Bu öğreticide şablonlu ASP.NET yardımcıların temelleri ele alınmıştır ve ASP.NET MVC uygulamasında jQuery UI datepicker açılır takvimini nasıl kullanacağınız gösterilmektedir. Daha fazla bilgi için şu kaynakları deneyin:

• jQuery kullanıcı arabirimi hakkında bilgi için bkz. jQuery Kullanıcı Arabirimi.
• Datepicker denetimini yerelleştirme hakkında bilgi için bkz. UI/Datepicker/Localization.
• ASP.NET MVC şablonları hakkında daha fazla bilgi için Brad Wilson'ın ASP.NET MVC 2 Şablonları hakkındaki blog serisine bakın. Seri ASP.NET MVC 2 için yazılmış olsa da, malzeme hala ASP.NET MVC'nin geçerli sürümü için geçerlidir.

Önceki