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

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.

Otomatik DateTime Şablonu Ekleme

Bu öğreticinin ilk bölümünde, biçimlendirmeyi açıkça belirtmek için modele öznitelikleri nasıl ekleyebileceğinizi ve modeli işlemek için kullanılan şablonu açıkça nasıl belirtebileceğinizi gördünüz. Örneğin, aşağıdaki koddaki DisplayFormat özniteliği özelliği için biçimlendirmeyi ReleaseDate açıkça belirtir.

[DisplayFormat(DataFormatString = "{0:d}")]
public DateTime  ReleaseDate { get; set; }

Aşağıdaki örnekte, numaralandırmasını Date kullanan DataType özniteliği, modeli işlemek için tarih şablonunun kullanılması gerektiğini belirtir. Projenizde tarih şablonu yoksa, yerleşik tarih şablonu kullanılır.

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

Ancak ASP. MVC, türün adıyla eşleşen bir şablon arayarak, yapılandırma üzerinde kural kullanarak tür eşleştirme gerçekleştirebilir. Bu, hiçbir öznitelik veya kod kullanmadan verileri otomatik olarak biçimlendiren bir şablon oluşturmanıza olanak tanır. Öğreticinin bu bölümünde DateTime türündeki model özelliklerine otomatik olarak uygulanan bir şablon oluşturacaksınız. Şablonun DateTime türündeki tüm model özelliklerini işlemek için kullanılması gerektiğini belirtmek için bir öznitelik veya başka bir yapılandırma kullanmanız gerekmez.

Ayrıca, tek tek özelliklerin ve hatta tek tek alanların görüntülenmesini özelleştirmenin bir yolunu da öğreneceksiniz.

Başlamak için mevcut biçimlendirme bilgilerini kaldıralım ve uygulamada tam tarihleri görüntüleyelim.

Movie.cs dosyasını açın ve özelliğindeki özniteliğine DataType açıklama satırı ekleyinReleaseDate:

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

Uygulamayı çalıştırmak için CTRL+F5'e basın.

Özelliğin ReleaseDate artık hem tarih hem de saat görüntülediğine dikkat edin çünkü biçimlendirme bilgisi sağlanmayan varsayılan değer budur.

Yeni Şablonları Test Etme için CSS Stilleri Ekleme

Tarihleri biçimlendirmek için bir şablon oluşturmadan önce, yeni şablonlara uygulayabileceğiniz birkaç CSS stili kuralı ekleyeceksiniz. Bunlar, işlenen sayfanın yeni şablonu kullandığını doğrulamanıza yardımcı olur.

Content\Site.csdosyasını açın ve dosyanın en altına aşağıdaki CSS kurallarını ekleyin:

/* Styles to test new editor and display templates.
----------------------------------------------------------*/
.loud-1 {
    font-weight: bold;
    color: Red;
}
.loud-2 {
    font-size:  2.0em;
    color:Green;
}
.loud-3 {
    font-style: italic;
    color: yellow;
    background-color: blue;
}

DateTime Görüntüleme Şablonları Ekleme

Artık yeni şablonu oluşturabilirsiniz. Views\Movies klasöründe bir DisplayTemplates klasörü oluşturun.

Views\Shared klasöründe bir DisplayTemplates klasörü ve editorTemplates klasörü oluşturun.

Views\Shared\DisplayTemplates klasöründeki görüntüleme şablonları tüm denetleyiciler tarafından kullanılır. Views\Movie\DisplayTemplates klasöründeki görüntüleme şablonları yalnızca denetleyici tarafından Movie kullanılır. (Her iki klasörde de aynı ada sahip bir şablon görünürse, Views\Movie\DisplayTemplates klasöründeki şablon (yani daha belirgin olan şablon), denetleyici tarafından Movie döndürülen görünümler için önceliklidir.)

Çözüm GezginiGörünümler klasörünü genişletin, Paylaşılan klasörünü genişletin ve ardından Views\Shared\DisplayTemplates 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 yazınDateTime. (Türün adıyla eşleşmesi için bu adı kullanmanız gerekir.)

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\DisplayTemplates içinde bir DateTime.cshtml şablonu oluşturulur.

Aşağıdaki görüntüde, görüntüleme ve düzenleyici şablonları oluşturulduktan sonra DateTimeÇözüm Gezgini'dekiGörünümler klasörü gösterilmektedir.

Views\Shared\DisplayTemplates\DateTime.cshtml dosyasını açın ve özelliği saat olmadan tarih olarak biçimlendirmek için String.Format yöntemini kullanan aşağıdaki işaretlemeyi ekleyin. (Biçim {0:d} kısa tarih biçimini belirtir.)

@String.Format("{0:d}", Model.Date)

Views\Movie\DisplayTemplates klasöründe şablon DateTime oluşturmak için bu adımı yineleyin. Views\Movie\DisplayTemplates\DateTime.cshtml dosyasında aşağıdaki kodu kullanın.

<span class="loud-1">   
@String.Format("{0:d}", Model.Date)
</span>

loud-1 CSS sınıfı, tarihin kalın kırmızı metinle görüntülenmesine neden olur. CSS sınıfını loud-1 yalnızca geçici bir ölçü olarak eklediniz, böylece bu şablonun ne zaman kullanıldığını kolayca görebilirsiniz.

Yaptığınız şey, ASP.NET tarihleri görüntülemek için kullanacağı özelleştirilmiş şablonlar ve oluşturulmuştur. Daha genel bir şablon ( Views\Shared\DisplayTemplates klasöründe) basit bir kısa tarih görüntüler. Özellikle denetleyici için Movie olan şablon ( Views\Movies\DisplayTemplates klasöründe), kalın kırmızı metin olarak da biçimlendirilmiş kısa bir tarih görüntüler.

Uygulamayı çalıştırmak için CTRL+F5'e basın. Tarayıcı, uygulama için Dizin görünümünü işler.

ReleaseDate Özelliği artık tarihi saat olmadan kalın kırmızı yazı tipiyle görüntüler. Bu, Views\Movies\DisplayTemplates klasöründeki şablonlu yardımcının paylaşılan klasördeki şablonlu yardımcı (Views\Shared\DisplayTemplates) üzerinden DateTime seçildiğini onaylamanıza DateTime yardımcı olur.

Şimdi Views\Movies\DisplayTemplates\DateTime.cshtml dosyasını Views\Movies\DisplayTemplates\LoudDateTime.cshtml olarak yeniden adlandırın.

Uygulamayı çalıştırmak için CTRL+F5'e basın.

Bu kez özellik saat ReleaseDate olmadan ve kalın kırmızı yazı tipi olmadan bir tarih görüntüler. Bu, veri türünün (bu örnekte DateTime) adına sahip bir şablonun, bu türdeki tüm model özelliklerini görüntülemek için otomatik olarak kullanıldığını gösterir. DateTime.cshtml dosyasını LoudDateTime.cshtml olarak yeniden adlandırdıktan sonra ASP.NET Views\Movies\DisplayTemplates klasöründe artık bir şablon bulamadığından *Views\Movies\Shared* klasöründeki DateTime.cshtml şablonunu kullandı.

(Şablon eşleştirme büyük/küçük harfe duyarsız olduğundan, şablon dosya adını herhangi bir büyük/küçük harfle oluşturmuş olabilirdiniz. Örneğin DATETIME.cshtml, datetime.cshtml ve DaTeTiMe.cshtml değerlerinin tümü türüyle DateTime eşleşir.)

Gözden geçirmek için: Bu noktada, ReleaseDate alan, kısa bir tarih biçimi kullanarak verileri görüntüleyen, ancak özel bir biçim eklemeyen Views\Movies\DisplayTemplates\DateTime.cshtml şablonu kullanılarak görüntülenir.

Görüntüleme Şablonu Belirtmek için UIHint Kullanma

Web uygulamanızın birçok DateTime alanı varsa ve varsayılan olarak bunların tümünü veya çoğunu yalnızca tarih biçiminde görüntülemek istiyorsanız, DateTime.cshtml şablonu iyi bir yaklaşımdır. Peki tam tarih ve saati görüntülemek istediğiniz birkaç tarih varsa ne olur? Hiç sorun değil. Ek bir şablon oluşturabilir ve UIHint özniteliğini kullanarak tam tarih ve saat için biçimlendirme belirtebilirsiniz. Daha sonra bu şablonu seçmeli olarak uygulayabilirsiniz. UiHint özniteliğini model düzeyinde kullanabilir veya şablonu bir görünüm içinde belirtebilirsiniz. Bu bölümde, bazı tarih-saat alanlarının örneklerinin UIHint biçimlendirmesini seçmeli olarak değiştirmek için özniteliğini nasıl kullanacağınızı göreceksiniz.

Views\Movies\DisplayTemplates\LoudDateTime.cshtml dosyasını açın ve var olan kodu aşağıdakilerle değiştirin:

<span class="loud-2">   
@Model.ToString()
</span>

Bu, tam tarih ve saatin görüntülenmesine neden olur ve metni yeşil ve büyük yapan CSS sınıfını ekler.

Movie.cs dosyasını açın ve aşağıdaki örnekte gösterildiği gibi UIHint özniteliğini ReleaseDate özelliğine ekleyin:

[UIHint("LoudDateTime")]
public DateTime ReleaseDate { get; set; }

Bu, ASP.NET MVC'ye özelliği görüntülendiğinde ReleaseDate (özellikle, yalnızca herhangi bir DateTime nesneyi değil), LoudDateTime.cshtml şablonunu kullanması gerektiğini bildirir.

Uygulamayı çalıştırmak için CTRL+F5'e basın.

Özelliğin ReleaseDate artık tarih ve saati büyük yeşil yazı tipinde görüntülediğine dikkat edin.

Movie.cs dosyasında özniteliğine UIHint dönün ve LoudDateTime.cshtml şablonunun kullanılmaması için açıklama satırı yapma. Uygulamayı yeniden çalıştırın. Sürüm tarihi büyük ve yeşil görüntülenmez. Bu, Dizin ve Ayrıntılar görünümlerinde Views\Shared\DisplayTemplates\DateTime.cshtml şablonunun kullanıldığını doğrular.

Daha önce de belirtildiği gibi, bir görünümde şablon uygulayarak şablonu bazı verilerin tek bir örneğine uygulayabilirsiniz. Views\Movies\Details.cshtml görünümünü açın. Alanı için ReleaseDateHtml.DisplayFor çağrısının ikinci parametresi olarak ekleyin"LoudDateTime". Tamamlanan kod şuna benzer:

<div class="display-label">ReleaseDate</div>
<div class="display-field">
    @Html.DisplayFor(model => model.ReleaseDate,"LoudDateTime")
</div>

Bu, modele LoudDateTime hangi özniteliklerin uygulandığından bağımsız olarak şablonun model özelliğini görüntülemek için kullanılması gerektiğini belirtir.

Uygulamayı çalıştırmak için CTRL+F5'e basın.

Film dizini sayfasının Views\Shared\DisplayTemplates\DateTime.cshtml şablonunu (kırmızı kalın) ve Movie\Details sayfasının Views\Movies\DisplayTemplates\LoudDateTime.cshtml şablonunu (büyük ve yeşil) kullandığını doğrulayın.

Sonraki bölümde karmaşık tür için bir şablon oluşturacaksınız.

ÖncekiSonraki