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

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.

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ğına ilişkin temel bilgiler öğretilecektir. Bu öğretici için, Microsoft Visual Studio'nun ücretsiz sürümü olan Microsoft Visual Web Developer 2010 Express Service Pack 1 ("Visual Web Developer") kullanabilir veya zaten varsa Visual Studio 2010 SP1'i kullanabilirsiniz.

Başlamadan önce, aşağıda listelenen önkoşulları yüklediğinizden emin olun. Aşağıdaki bağlantıya tıklayarak bunların tümünü yükleyebilirsiniz: Web Platformu Yükleyicisi. Alternatif olarak, aşağıdaki bağlantıları kullanarak gerekli yazılımı tek tek yükleyebilirsiniz:

• Visual Studio Web Developer Express SP1 önkoşulları
• ASP.NET MVC 3 Araçları Güncelleştirmesi
• SQL Server Compact 4.0(çalışma zamanı + araçlar desteği)

Visual Web Developer yerine Visual Studio 2010 kullanıyorsanız, şu bağlantıya tıklayarak önkoşulları yükleyin: Visual Studio 2010 önkoşulları.

Bu öğreticide , MVC 3 ile Çalışmaya Başlama öğreticisini tamamladığınız veya MVC geliştirme ASP.NET bildiğiniz varsayılır. Bu öğretici , MVC 3 ile Çalışmaya Başlama öğreticisinin tamamlanmış projesiyle başlar.

Oluşturacakların

MVC 3 ile Çalışmaya Başlama öğreticisinde oluşturulan basit film listeleme uygulamasına şablonlar (özel olarak, düzenleme ve görüntüleme şablonları) ekleyeceksiniz. Tarih girme işlemini basitleştirmek için bir jQuery UI datepicker açılır takvimi de ekleyebilirsiniz. Aşağıdaki ekran görüntüsünde jQuery UI datepicker açılır takviminin görüntülendiği değiştirilmiş uygulama gösterilmektedir.

Öğreneceğiniz Beceriler

Şunları öğreneceksiniz:

• DataAnnotations ad alanında görüntülenen ve düzenleme modunda olan verilerin biçimini denetlemek için öznitelikleri kullanma.
• Verilerin biçimlendirmesini denetlemek için şablonlar oluşturma (şablonları düzenleme ve görüntüleme).
• Tarih alanlarını girmenin bir yolu olarak jQuery UI datepicker'ı ekleme.

Başlarken

Başlangıç projesinden film listeleme uygulamasına henüz sahip değilseniz indirin:

• İndir'i seçin.
• Windows Gezgini'nde MvcMovie.zip dosyasına sağ tıklayın ve Özellikler'i seçin.
• MvcMovie.zip Özellikleri iletişim kutusunda Engellemeyi Kaldır'ı seçin. (Engellemeyi kaldırma, web'den indirdiğiniz bir .zip dosyası kullanmaya çalıştığınızda oluşan bir güvenlik uyarısının oluşmasını önler.)

MvcMovie.zip dosyasına sağ tıklayın ve dosyanın sıkıştırmasını açmak için Tümünü Ayıkla'yı seçin. Visual Web Developer veya Visual Studio 2010'da MvcMovieCS_TU.sln dosyasını açın.

Çözüm Gezgini'daViews\Shared\_Layout.cshtml dosyasına çift tıklayarak açın. H1MVC Movie App üst bilgisini Movie jQuery olarak değiştirin. Uygulamayı çalıştırmak için CTRL+F5 tuşlarına basın ve sizi film denetleyicisinin yöntemine götüren Giriş sekmesine Index tıklayın. Uygulamayı denemek için filmlerden birinin Düzenle bağlantısını ve Ayrıntılar bağlantısını seçin. Dizin, Düzenle ve Ayrıntılar görünümlerinde sürüm tarihi ve fiyatının düzgün biçimlendirildiğini unutmayın:

Tarih ve fiyat biçimlendirmesi, sınıfın özelliklerinde DisplayFormat özniteliğinin kullanılmasının Movie sonucudur.

Movie.cs dosyasını açın ve ve Price özelliklerindeki DisplayFormat özniteliğine ReleaseDate açıklama satırı ekleyin. Sonuçta elde edilen Movie sınıf şöyle görünür:

public class Movie {
    public int ID { get; set; }

    [Required(ErrorMessage = "Title is required")]
    public string Title { get; set; }

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

    [Required(ErrorMessage = "Genre must be specified")]
    public string Genre { get; set; }

    [Range(1, 100, ErrorMessage = "Price must be between $1 and $100")]
    //[DisplayFormat(DataFormatString = "{0:c}")]
    public decimal Price { get; set; }

    [StringLength(5)]
    public string Rating { get; set; }
}

Uygulamayı çalıştırmak için CTRL+F5 tuşlarına yeniden basın ve film listesini görüntülemek için Giriş sekmesini seçin. Bu kez yayın tarihi tarih ve saati gösterirken, fiyat alanında artık para birimi simgesi gösterilsin. Sınıfta yaptığınız Movie değişiklik, daha önce gördüğünüz güzel biçimlendirmeyi geri alır, ancak bunu birazdan düzeltirsiniz.

Veri Türünü Belirtmek için DataAnnotations DataType Özniteliğini Kullanma

numaralandırmasını kullanarak Date özelliğin ReleaseDate commented-out DisplayFormat özniteliğini DataType özniteliğiyle değiştirin. özelliğinin DisplayFormat özniteliğini Pricedatatype özniteliğiyle yeniden değiştirin. Bu kez numaralandırmayı Currency kullanın. Tamamlanmış kod şöyle görünür:

public class Movie {
    public int ID { get; set; }

    [Required(ErrorMessage = "Title is required")]
    public string Title { get; set; }

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

    [Required(ErrorMessage = "Genre must be specified")]
    public string Genre { get; set; }

    [Range(1, 100, ErrorMessage = "Price must be between $1 and $100")]
    [DataType(DataType.Currency)]
    public decimal Price { get; set; }

    [StringLength(5)]
    public string Rating { get; set; }
}

Uygulamayı çalıştırın. Artık sürüm tarihi ve fiyat özellikleri doğru biçimlendirilmiştir (uygun tarih ve para birimi biçimleri kullanılarak). DataType özniteliği, alanların doğru biçimde işlenmesi için yerleşik ASP.NET MVC şablonları için tür meta verileri sağlar. özniteliği, DataType modeli uluslararasılaştırma gibi amaçlar için daha temiz ve daha esnek hale getirdiğinden, DataType başlangıçta kodda bulunan özniteliğini kullanmak DisplayFormat için tercih edilir.

Sonraki bölümde, tarih alanlarını görüntülemek için özel şablonlar oluşturma işlemini göreceksiniz.

Sonraki