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

Autor : Rick Anderson

Ten samouczek zawiera podstawowe informacje na temat pracy z szablonami edytora, szablonami wyświetlania i kalendarzem podręcznym platformy jQuery UI w aplikacji internetowej MVC ASP.NET.

Dodawanie szablonu automatycznej daty/godziny

W pierwszej części tego samouczka przedstawiono sposób dodawania atrybutów do modelu w celu jawnego określenia formatowania oraz jawnego określania szablonu używanego do renderowania modelu. Na przykład atrybut DisplayFormat w poniższym kodzie jawnie określa formatowanie właściwości ReleaseDate .

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

W poniższym przykładzie atrybut DataType przy użyciu Date wyliczenia określa, że szablon daty powinien być używany do renderowania modelu. Jeśli w projekcie nie ma szablonu daty, zostanie użyty wbudowany szablon daty.

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

Jednak ASP. MvC może wykonywać dopasowywanie typów przy użyciu konwencji over-configuration, wyszukując szablon zgodny z nazwą typu. Dzięki temu można utworzyć szablon, który automatycznie formatuje dane bez używania żadnych atrybutów ani kodu. W tej części samouczka utworzysz szablon, który jest automatycznie stosowany do właściwości modelu typu DateTime. Nie trzeba używać atrybutu ani innej konfiguracji, aby określić, że szablon powinien być używany do renderowania wszystkich właściwości modelu typu DateTime.

Dowiesz się również, jak dostosować wyświetlanie poszczególnych właściwości, a nawet poszczególnych pól.

Aby rozpocząć, usuńmy istniejące informacje o formatowaniu i wyświetlmy pełne daty w aplikacji.

Otwórz plik Movie.cs i oznacz atrybut jako komentarz DataType we ReleaseDate właściwości :

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

Naciśnij klawisze CTRL+F5, aby uruchomić aplikację.

Zwróć uwagę, że ReleaseDate właściwość wyświetla teraz zarówno datę, jak i godzinę, ponieważ jest to ustawienie domyślne, gdy nie podano informacji o formatowaniu.

Dodawanie stylów CSS do testowania nowych szablonów

Przed utworzeniem szablonu do formatowania dat dodasz kilka reguł stylu CSS, które można zastosować do nowych szablonów. Ułatwi to sprawdzenie, czy renderowana strona korzysta z nowego szablonu.

Otwórz plik Content\Site.csi dodaj następujące reguły CSS w dolnej części pliku:

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

Dodawanie szablonów wyświetlania daty/godziny

Teraz możesz utworzyć nowy szablon. W folderze Views\Movies utwórz folder DisplayTemplates .

W folderze Views\Shared utwórz folder DisplayTemplates i folder EditorTemplates .

Szablony wyświetlania w folderze Views\Shared\DisplayTemplates będą używane przez wszystkie kontrolery. Szablony wyświetlania w folderze Views\Movie\DisplayTemplates będą używane tylko przez Movie kontroler. (Jeśli szablon o tej samej nazwie pojawia się w obu folderach, szablon w folderze Views\Movie\DisplayTemplates — czyli bardziej szczegółowy szablon — ma pierwszeństwo przed widokami zwróconymi przez Movie kontroler).

W Eksplorator rozwiązań rozwiń folder Widoki, rozwiń folder Udostępnione, a następnie kliknij prawym przyciskiem myszy folder Views\Shared\DisplayTemplates.

Kliknij przycisk Dodaj , a następnie kliknij pozycję Wyświetl. Zostanie wyświetlone okno dialogowe Dodawanie widoku .

W polu Nazwa widoku wpisz DateTime. (Aby dopasować nazwę typu, należy użyć tej nazwy).

Zaznacz pole wyboru Utwórz jako widok częściowy . Upewnij się, że pole wyboru Użyj układu lub strony wzorcowej i Utwórz silnie typizowane pole wyboru widoku nie jest zaznaczone.

Kliknij pozycję Dodaj. Szablon DateTime.cshtml jest tworzony w pliku Views\Shared\DisplayTemplates.

Na poniższej ilustracji przedstawiono folder Views w Eksplorator rozwiązań po utworzeniu szablonów wyświetlania DateTime i edytora.

Otwórz plik Views\Shared\DisplayTemplates\DateTime.cshtml i dodaj następujący znacznik, który używa metody String.Format do formatowania właściwości jako daty bez godziny. (Format {0:d} określa format daty krótkiej).

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

Powtórz ten krok, DateTime aby utworzyć szablon w folderze Views\Movie\DisplayTemplates . Użyj następującego kodu w pliku Views\Movie\DisplayTemplates\DateTime.cshtml .

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

Klasa loud-1 CSS powoduje, że data jest wyświetlana pogrubioną czerwoną czcionką. Dodano klasę loud-1 CSS tak samo jak tymczasową miarę, aby można było łatwo zobaczyć, kiedy ten konkretny szablon jest używany.

Utworzone i dostosowane szablony, które ASP.NET będą używane do wyświetlania dat. Bardziej ogólny szablon (w folderze Views\Shared\DisplayTemplates ) wyświetla prostą datę krótką. Szablon przeznaczony specjalnie dla Movie kontrolera (w folderze Views\Movies\DisplayTemplates ) wyświetla datę krótką sformatowaną jako pogrubiony czerwony tekst.

Naciśnij klawisze CTRL+F5, aby uruchomić aplikację. Przeglądarka renderuje widok Indeks dla aplikacji.

Właściwość ReleaseDate wyświetla teraz datę w pogrubionej czerwonej czcionki bez godziny. Pomaga to potwierdzić, że DateTime w folderze Views\Movies\DisplayTemplates został wybrany DateTime pomocnik szablonu w folderze udostępnionym (Views\Shared\DisplayTemplates).

Teraz zmień nazwę pliku Views\Movies\DisplayTemplates\DateTime.cshtml na Views\Movies\DisplayTemplates\LoudDateTime.cshtml.

Naciśnij klawisze CTRL+F5, aby uruchomić aplikację.

Tym razem ReleaseDate właściwość wyświetla datę bez godziny i bez pogrubionej czerwonej czcionki. Ilustruje to, że szablon o nazwie typu danych (w tym przypadku DateTime) jest automatycznie używany do wyświetlania wszystkich właściwości modelu tego typu. Po zmianie nazwy pliku DateTime.cshtml na LoudDateTime.cshtml ASP.NET nie znaleziono szablonu w folderze Views\Movies\DisplayTemplates , więc użyto szablonu DateTime.cshtml z folderu *Views\Movies\Shared*.

(Dopasowanie szablonu nie uwzględnia wielkości liter, więc można było utworzyć nazwę pliku szablonu z dowolną wielkością liter. Na przykład DATETIME.cshtml, datetime.cshtml i DaTeTiMe.cshtml będą zgodne z typem DateTime ).

Aby przejrzeć: w tym momencie ReleaseDate pole jest wyświetlane przy użyciu szablonu Views\Movies\DisplayTemplates\DateTime.cshtml , który wyświetla dane w formacie daty krótkiej, ale w przeciwnym razie nie dodaje specjalnego formatu.

Określanie szablonu wyświetlania przy użyciu interfejsu użytkownika

Jeśli aplikacja internetowa ma wiele DateTime pól i domyślnie chcesz wyświetlić wszystkie lub większość z nich w formacie tylko do daty, szablon DateTime.cshtml jest dobrym rozwiązaniem. Ale co zrobić, jeśli masz kilka dat, w których chcesz wyświetlić pełną datę i godzinę? Żaden problem. Możesz utworzyć dodatkowy szablon i użyć atrybutu UIHint , aby określić formatowanie dla pełnej daty i godziny. Następnie można selektywnie zastosować ten szablon. Możesz użyć atrybutu UIHint na poziomie modelu lub określić szablon w widoku. W tej sekcji dowiesz się, jak używać atrybutu UIHint do selektywnego zmieniania formatowania dla niektórych wystąpień pól daty i godziny.

Otwórz plik Views\Movies\DisplayTemplates\LoudDateTime.cshtml i zastąp istniejący kod następującym kodem:

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

Powoduje to wyświetlenie pełnej daty i godziny oraz dodanie klasy CSS, która sprawia, że tekst jest zielony i duży.

Otwórz plik Movie.cs i dodaj atrybut UIHint do ReleaseDate właściwości , jak pokazano w poniższym przykładzie:

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

Informuje to ASP.NET MVC, że podczas wyświetlania ReleaseDate właściwości (w szczególności, a nie tylko żadnego DateTime obiektu), należy użyć szablonu LoudDateTime.cshtml .

Naciśnij klawisze CTRL+F5, aby uruchomić aplikację.

Zwróć uwagę, że ReleaseDate właściwość wyświetla teraz datę i godzinę w dużej zielonej czcionki.

Wróć do atrybutu UIHint w pliku Movie.cs i oznacz go jako komentarz, aby szablon LoudDateTime.cshtml nie był używany. Uruchom ponownie aplikację. Data wydania nie jest wyświetlana jako duża i zielona. To sprawdza, czy szablon Views\Shared\DisplayTemplates\DateTime.cshtml jest używany w widokach Indeks i Szczegóły.

Jak wspomniano wcześniej, można również zastosować szablon w widoku, który umożliwia zastosowanie szablonu do pojedynczego wystąpienia niektórych danych. Otwórz widok Views\Movies\Details.cshtml . Dodaj "LoudDateTime" jako drugi parametr wywołania Html.DisplayFor dla ReleaseDate pola. Ukończony kod wygląda następująco:

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

Określa to, że LoudDateTime szablon powinien być używany do wyświetlania właściwości modelu, niezależnie od tego, jakie atrybuty są stosowane do modelu.

Naciśnij klawisze CTRL+F5, aby uruchomić aplikację.

Sprawdź, czy strona indeksu filmu używa szablonu Views\Shared\DisplayTemplates\DateTime.cshtml (pogrubienie czerwone), a strona Movie\Details używa szablonu Views\Movies\DisplayTemplates\LoudDateTime.cshtml (duży i zielony).

W następnej sekcji utworzysz szablon dla typu złożonego.

WsteczDalej