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

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 çalışma hakkında temel bilgiler öğretilecektir.

Karmaşık Türlerle Çalışma

Bu bölümde bir adres sınıfı oluşturacak ve bunu görüntülemek için şablon oluşturmayı öğreneceksiniz.

Models klasöründe person.cs adlı yeni bir sınıf dosyası oluşturun. Burada iki tür koyacaksınız: sınıf Person ve Address sınıf. Person sınıfı olarak Addressyazılan bir özellik içerir. Tür Address karmaşık bir türdür; yani , stringveya doublegibi intyerleşik türlerden biri değildir. Bunun yerine, çeşitli özellikleri vardır. Yeni sınıfların kodu şöyle görünür:

public class Address {
    public string StreetAddress { get; set; }
    public string City { get; set; }
    public string PostalCode { get; set; }
}

public class Person {
    public int ID { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string Phone { get; set; }
    public Address HomeAddress;
}

Denetleyicide Movie , bir kişi örneğini görüntülemek için aşağıdaki PersonDetail eylemi ekleyin:

public ActionResult PersonDetail(int id = 0) {
     return View(GetPerson(id));
}

Ardından, modeli bazı örnek verilerle doldurmak için denetleyiciye Person aşağıdaki kodu Movie ekleyin:

Person GetPerson(int id) {
    var p = new Person
    {
        ID = 1,
        FirstName = "Joe",
        LastName = "Smith",
        Phone = "123-456",
        HomeAddress = new Address
        {
            City = "Great Falls",
            StreetAddress = "1234 N 57th St",
            PostalCode = "95045"
        }
    };
    return p;
}

Views\Movies\PersonDetail.cshtml dosyasını açın ve görünüm için aşağıdaki işaretlemeyi PersonDetail ekleyin.

@model Person
@{
    ViewBag.Title = "PersonDetail";
}
<h2>Person Detail</h2>
@Html.DisplayForModel()

Uygulamayı çalıştırmak için Ctrl+F5 tuşlarına basın ve Filmler/PersonDetail'e gidin.

Bu PersonDetail ekran görüntüsünde Address görebileceğiniz gibi görünüm karmaşık türü içermez. (Adres gösterilmiyor.)

Karmaşık Address bir tür olduğundan model verileri görüntülenmez. Adres bilgilerini görüntülemek için Views\Movies\PersonDetail.cshtml dosyasını yeniden açın ve aşağıdaki işaretlemeyi ekleyin.

@Html.DisplayFor( x => x.HomeAddress )

Şimdi görünümünün tam işaretlemesi PersonDetail şöyle görünür:

@model MvcMovie.Models.Person

@{
    ViewBag.Title = "PersonDetail";
}

<h2>Person Detail</h2>

@Html.DisplayForModel()
@Html.DisplayFor( x => x.HomeAddress )

Uygulamayı yeniden çalıştırın ve görünümü görüntüleyin PersonDetail . Adres bilgileri artık görüntülenir:

Karmaşık Tür için Şablon Oluşturma

Bu bölümde karmaşık türü işlemek Address için kullanılacak bir şablon oluşturacaksınız. Tür için Address bir şablon oluşturduğunuzda, ASP.NET MVC uygulamanın herhangi bir yerinde adres modelini biçimlendirmek için bunu otomatik olarak kullanabilir. Bu, uygulamadaki tek bir yerden türün işlenmesini Address denetlemeniz için bir yol sağlar.

Views\Shared\DisplayTemplates klasöründe, Address adlı kesin olarak belirlenmiş bir kısmi görünüm oluşturun:

Ekle'ye tıklayın ve yeni Views\Shared\DisplayTemplates\Address.cshtml dosyasını açın. Yeni görünüm aşağıdaki oluşturulan işaretlemeyi içerir:

@model MvcMovie.Models.Address

<fieldset>
    <legend>Address</legend>

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

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

    <div class="display-label">PostalCode</div>
    <div class="display-field">
        @Html.DisplayFor(model => model.PostalCode)
    </div>
</fieldset>

Uygulamayı çalıştırın ve görünümü görüntüleyin PersonDetail . Bu kez, Address karmaşık türü görüntülemek için yeni oluşturduğunuz şablon kullanıldığından Address , ekran aşağıdaki gibi görünür:

Özet: Model Görüntüleme Biçimini ve Şablonunu Belirtme Yolları

Aşağıdaki yaklaşımları kullanarak bir model özelliği için biçim veya şablon belirtebileceğinizi gördünüz:

• özniteliğini modeldeki DisplayFormat bir özelliğe uygulama. Örneğin, aşağıdaki kod tarihin saat olmadan görüntülenmesine neden olur:

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

• Modeldeki bir özelliğe DataType özniteliği uygulama ve veri türünü belirtme. Örneğin, aşağıdaki kod tarihin saat olmadan görüntülenmesine neden olur.

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

  Uygulama Views\Shared\DisplayTemplates klasöründe veya Views\Movies\DisplayTemplates klasöründe bir date.cshtml şablonu içeriyorsa, bu şablon özelliği işlemek DateTime için kullanılır. Aksi takdirde yerleşik ASP.NET şablon oluşturma sistemi özelliği tarih olarak görüntüler.

• Views\Shared\DisplayTemplates klasöründe veya Views\Movies\DisplayTemplates klasöründe adı biçimlendirmek istediğiniz veri türüyle eşleşen bir görüntüleme şablonu oluşturma. Örneğin, modele öznitelik eklemeden ve görünümlere işaretleme eklemeden modeldeki özellikleri işlemek DateTime için Views\Shared\DisplayTemplates\DateTime.cshtml dosyasının kullanıldığını gördünüz.

• Model özelliğinin görüntüleneceği şablonu belirtmek için modelde UIHint özniteliğini kullanma.

• Görünümde Html.DisplayFor çağrısına görünen şablon adını açıkça ekleme.

Kullandığınız yaklaşım, uygulamanızda yapmanız gerekenlere bağlıdır. Tam olarak ihtiyacınız olan biçimlendirme türünü elde etmek için bu yaklaşımları karıştırmak yaygın bir durum değildir.

Bir sonraki bölümde, dişlileri biraz değiştirip verilerin görüntülenme şeklini özelleştirmekten nasıl girilmiş olduğunu özelleştirmeye geçeceksiniz. JQuery datepicker'ı uygulamadaki düzenleme görünümlerine bağlayıp tarihleri belirtmek için kaynabilir bir yol sağlayacaksınız.

ÖncekiSonraki