Korzystanie z kalendarza podręcznego interfejsu użytkownika HTML5 i jQuery UI z ASP.NET MVC — część 3

Autor: Rick Anderson

W tym samouczku przedstawiono podstawy pracy z szablonami edytora, szablonami wyświetlania i kalendarzem podręcznym platformy jQuery UI w aplikacji internetowej ASP.NET MVC.

Praca z typami złożonymi

W tej sekcji utworzysz klasę adresową i dowiesz się, jak utworzyć szablon, aby go wyświetlić.

W folderze Models utwórz nowy plik klasy o nazwie Person.cs , w którym umieścisz dwa typy: klasę i klasę PersonAddress . Klasa Person będzie zawierać właściwość, która jest typowana jako Address. Typ Address jest typem złożonym, co oznacza, że nie jest jednym z wbudowanych typów, takich jak int, stringlub double. Zamiast tego ma kilka właściwości. Kod nowych klas wygląda następująco:

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;
}

W kontrolerze Movie dodaj następującą PersonDetail akcję, aby wyświetlić wystąpienie osoby:

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

Następnie dodaj następujący kod do kontrolera, Movie aby wypełnić Person model przykładowymi danymi:

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;
}

Otwórz plik Views\Movies\PersonDetail.cshtml i dodaj następujący znacznik dla PersonDetail widoku.

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

Naciśnij klawisze Ctrl+F5, aby uruchomić aplikację i przejdź do pozycji Filmy/PersonDetail.

Widok PersonDetail nie zawiera typu złożonego Address , jak widać na tym zrzucie ekranu. (Nie jest wyświetlany żaden adres).

Dane Address modelu nie są wyświetlane, ponieważ jest to typ złożony. Aby wyświetlić informacje o adresie, otwórz ponownie plik Views\Movies\PersonDetail.cshtml i dodaj następujący znacznik.

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

Kompletny znacznik dla PersonDetail widoku wygląda następująco:

@model MvcMovie.Models.Person

@{
    ViewBag.Title = "PersonDetail";
}

<h2>Person Detail</h2>

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

Uruchom ponownie aplikację i wyświetl PersonDetail widok. Informacje o adresie są teraz wyświetlane:

Tworzenie szablonu dla typu złożonego

W tej sekcji utworzysz szablon, który będzie używany do renderowania typu złożonego Address . Podczas tworzenia szablonu Address dla typu ASP.NET MVC można go automatycznie używać do formatowania modelu adresów w dowolnym miejscu w aplikacji. Dzięki temu można kontrolować renderowanie Address typu z jednego miejsca w aplikacji.

W folderze Views\Shared\DisplayTemplates utwórz silnie typizowanego widoku częściowego o nazwie Adres:

Kliknij przycisk Dodaj, a następnie otwórz nowy plik Views\Shared\DisplayTemplates\Address.cshtml . Nowy widok zawiera następujące wygenerowane znaczniki:

@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>

Uruchom aplikację i wyświetl PersonDetail widok. Tym razem Address utworzony szablon jest używany do wyświetlania typu złożonego Address , więc ekran wygląda następująco:

Podsumowanie: Sposoby określania formatu wyświetlania modelu i szablonu

Wiesz już, że można określić format lub szablon dla właściwości modelu przy użyciu następujących metod:

• Zastosowanie atrybutu DisplayFormat do właściwości w modelu. Na przykład następujący kod powoduje wyświetlenie daty bez godziny:

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

• Zastosowanie atrybutu DataType do właściwości w modelu i określenie typu danych. Na przykład poniższy kod powoduje wyświetlenie daty bez godziny.

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

  Jeśli aplikacja zawiera szablon date.cshtml w folderze Views\Shared\DisplayTemplates lub w folderze Views\Movies\DisplayTemplates , ten szablon zostanie użyty do renderowania DateTime właściwości. W przeciwnym razie wbudowany system tworzenia szablonów ASP.NET wyświetla właściwość jako datę.

• Tworzenie szablonu wyświetlania w folderze Views\Shared\DisplayTemplates lub w folderze Views\Movies\DisplayTemplates , którego nazwa jest zgodna z typem danych, który chcesz sformatować. Na przykład zobaczyliśmy, że element Views\Shared\DisplayTemplates\DateTime.cshtml został użyty do renderowania DateTime właściwości w modelu bez dodawania atrybutu do modelu i bez dodawania znaczników do widoków.

• Za pomocą atrybutu UIHint w modelu określ szablon do wyświetlenia właściwości modelu.

• Jawne dodanie nazwy szablonu wyświetlania do wywołania Html.DisplayFor w widoku.

Używane podejście zależy od tego, co należy zrobić w aplikacji. Nie jest rzadkością mieszanie tych podejść, aby uzyskać dokładnie taki rodzaj formatowania, którego potrzebujesz.

W następnej sekcji przełączysz nieco koła zębate i przejdziesz z dostosowywania sposobu wyświetlania danych w celu dostosowania sposobu ich wprowadzenia. Podpinasz platformę jQuery datepicker do widoków edycji w aplikacji, aby zapewnić prosty sposób określania dat.

WsteczDalej