ASP.NET MVC에서 HTML5 및 jQuery UI 날짜 피커 팝업 달력 사용 - 2부
작성자 : Rick Anderson
이 자습서에서는 ASP.NET MVC 웹 애플리케이션에서 편집기 템플릿, 디스플레이 템플릿 및 jQuery UI 날짜 피커 팝업 달력을 사용하는 방법에 대한 기본 사항을 설명합니다.
자동 DateTime 템플릿 추가
이 자습서의 첫 번째 부분에서는 모델에 특성을 추가하여 서식을 명시적으로 지정하는 방법과 모델을 렌더링하는 데 사용되는 템플릿을 명시적으로 지정하는 방법을 알아보았습니다. 예를 들어 다음 코드의 DisplayFormat 특성은 속성의 서식을 ReleaseDate 명시적으로 지정합니다.
[DisplayFormat(DataFormatString = "{0:d}")]
public DateTime ReleaseDate { get; set; }
다음 예제에서 열거형을 사용하는 DateDataType 특성은 날짜 템플릿을 사용하여 모델을 렌더링하도록 지정합니다. 프로젝트에 날짜 템플릿이 없는 경우 기본 제공 날짜 템플릿이 사용됩니다.
[DataType(DataType.Date)]
public DateTime ReleaseDate { get; set; }
그러나 ASP입니다. MVC는 형식 이름과 일치하는 템플릿을 찾아 규칙 오버 구성을 사용하여 형식 일치를 수행할 수 있습니다. 이렇게 하면 특성이나 코드를 전혀 사용하지 않고 데이터 서식을 자동으로 지정하는 템플릿을 만들 수 있습니다. 자습서의 이 부분에서는 DateTime 형식의 모델 속성에 자동으로 적용되는 템플릿을 만듭니다. 특성 또는 다른 구성을 사용하여 DateTime 형식의 모든 모델 속성을 렌더링하는 데 템플릿을 사용하도록 지정할 필요가 없습니다.
개별 속성 또는 개별 필드의 표시를 사용자 지정하는 방법도 알아봅니다.
시작하려면 기존 서식 정보를 제거하고 애플리케이션에 전체 날짜를 표시해 보겠습니다.
Movie.cs 파일을 열고 속성의 DataType 특성을 주석으로 처리 ReleaseDate 합니다.
// [DataType(DataType.Date)]
public DateTime ReleaseDate { get; set; }
Ctrl+F5를 눌러 애플리케이션을 실행합니다.
이제 속성에 ReleaseDate 날짜와 시간이 모두 표시됩니다. 이는 서식 정보가 제공되지 않는 경우 기본값이기 때문입니다.
새 템플릿을 테스트하기 위한 CSS 스타일 추가
날짜 서식 지정을 위한 템플릿을 만들기 전에 새 템플릿에 적용할 수 있는 몇 가지 CSS 스타일 규칙을 추가합니다. 이렇게 하면 렌더링된 페이지가 새 템플릿을 사용하고 있는지 확인하는 데 도움이 됩니다.
Content\Site.cs의 파일을 열고 파일 아래쪽에 다음 CSS 규칙을 추가합니다.
/* 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 표시 템플릿 추가
이제 새 템플릿을 만들 수 있습니다. Views\Movies 폴더에서 DisplayTemplates 폴더를 만듭니다.
Views\Shared 폴더에서 DisplayTemplates 폴더와 EditorTemplates 폴더를 만듭니다.
Views\Shared\DisplayTemplates 폴더의 표시 템플릿은 모든 컨트롤러에서 사용됩니다. Views\Movie\DisplayTemplates 폴더의 표시 템플릿은 컨트롤러에서 Movie 만 사용됩니다. (이름이 같은 템플릿이 두 폴더에 모두 표시되는 경우 Views\Movie\DisplayTemplates 폴더의 템플릿( 즉, 보다 구체적인 템플릿)이 컨트롤러에서 반환하는 Movie 보기보다 우선합니다.)
솔루션 탐색기보기 폴더를 확장하고 공유 폴더를 확장한 다음 Views\Shared\DisplayTemplates 폴더를 마우스 오른쪽 단추로 클릭합니다.
추가를 클릭한 다음 보기를 클릭합니다. 보기 추가 대화 상자가 표시됩니다.
보기 이름 상자에 를 입력합니다DateTime. 형식의 이름과 일치하려면 이 이름을 사용해야 합니다.
부분 보기로 만들기 검사 상자를 선택합니다. 레이아웃 또는 master 사용 페이지와 강력한 형식의 보기 만들기 검사 상자가 선택되어 있지 않은지 확인합니다.
추가를 클릭합니다. DateTime.cshtml 템플릿은 Views\Shared\DisplayTemplates에 만들어집니다.
다음 이미지는 표시 및 편집기 템플릿을 만든 후 DateTime솔루션 탐색기Views 폴더를 보여 줍니다.
Views\Shared\DisplayTemplates\DateTime.cshtml 파일을 열고 String.Format 메서드를 사용하여 속성의 형식을 시간 없이 날짜로 지정하는 다음 태그를 추가합니다. (형식은 {0:d} 짧은 날짜 형식을 지정합니다.)
@String.Format("{0:d}", Model.Date)
Views\Movie\DisplayTemplates 폴더에 템플릿을 만들 DateTime 려면 이 단계를 반복합니다. Views\Movie\DisplayTemplates\DateTime.cshtml 파일에서 다음 코드를 사용합니다.
<span class="loud-1">
@String.Format("{0:d}", Model.Date)
</span>
CSS 클래스를 loud-1 사용하면 날짜가 굵은 빨간색 텍스트로 표시됩니다. 이 특정 템플릿이 loud-1 사용되는 시기를 쉽게 확인할 수 있도록 CSS 클래스를 임시 측정값으로 추가했습니다.
ASP.NET 날짜를 표시하는 데 사용할 템플릿을 만들고 사용자 지정했습니다. Views\Shared\DisplayTemplates 폴더에 있는 보다 일반적인 템플릿은 간단한 짧은 날짜를 표시합니다. 컨트롤러용 Movie 템플릿( Views\Movies\DisplayTemplates 폴더)에는 굵은 빨간색 텍스트로 서식이 지정된 짧은 날짜가 표시됩니다.
Ctrl+F5를 눌러 애플리케이션을 실행합니다. 브라우저는 애플리케이션에 대한 인덱스 뷰를 렌더링합니다.
이제 속성은 ReleaseDate 시간 없이 날짜를 굵은 빨간색 글꼴로 표시합니다. 이렇게 하면 Views\Movies\DisplayTemplates 폴더의 템플릿 도우미가 공유 폴더(Views\Shared\DisplayTemplates)의 템플릿 도우미를 통해 DateTime 선택되어 있는지 확인할 DateTime 수 있습니다.
이제 Views\Movies\DisplayTemplates\DateTime.cshtml 파일의 이름을 Views\Movies\DisplayTemplates\LoudDateTime.cshtml로 바꿉니다.
Ctrl+F5를 눌러 애플리케이션을 실행합니다.
이번에는 속성이 ReleaseDate 시간 없이 굵은 빨간색 글꼴 없이 날짜를 표시합니다. 이는 데이터 형식의 이름을 가진 템플릿(이 경우 DateTime)이 해당 형식의 모든 모델 속성을 표시하는 데 자동으로 사용됨을 보여 줍니다. DateTime.cshtml 파일의 이름을 LoudDateTime.cshtml로 변경한 후 ASP.NET Views\Movies\DisplayTemplates 폴더에서 템플릿을 더 이상 찾을 수 없으므로 *Views\Movies\Shared* 폴더의 DateTime.cshtml 템플릿을 사용했습니다.
(템플릿 일치는 대/소문자를 구분하지 않으므로 대/소문자를 구분하여 템플릿 파일 이름을 만들 수 있습니다. 예를 들어 DATETIME.cshtml, datetime.cshtml 및 DaTeTiMe.cshtml 은 모두 형식과 DateTime 일치합니다.)
검토: 이 시점에서 ReleaseDate 짧은 날짜 형식을 사용하여 데이터를 표시하는 Views\Movies\DisplayTemplates\DateTime.cshtml 템플릿을 사용하여 필드가 표시되지만, 그렇지 않으면 특별한 형식을 추가하지 않습니다.
UIHint를 사용하여 표시 템플릿 지정
웹 애플리케이션에 많은 DateTime 필드가 있고 기본적으로 전체 또는 대부분을 날짜 전용 형식으로 표시하려는 경우 DateTime.cshtml 템플릿이 좋은 방법입니다. 그러나 전체 날짜와 시간을 표시하려는 날짜가 몇 가지 있는 경우 어떻게 해야 할까요? 문제가 되지 않습니다. 추가 템플릿을 만들고 UIHint 특성을 사용하여 전체 날짜 및 시간에 대한 서식을 지정할 수 있습니다. 그런 다음, 해당 템플릿을 선택적으로 적용할 수 있습니다. 모델 수준에서 UIHint 특성을 사용하거나 보기 내에서 템플릿을 지정할 수 있습니다. 이 섹션에서는 특성을 사용하여 UIHint 날짜-시간 필드의 일부 인스턴스에 대한 서식을 선택적으로 변경하는 방법을 알아봅니다.
Views\Movies\DisplayTemplates\LoudDateTime.cshtml 파일을 열고 기존 코드를 다음으로 바꿉니다.
<span class="loud-2">
@Model.ToString()
</span>
이렇게 하면 전체 날짜와 시간이 표시되고 텍스트를 녹색과 크게 만드는 CSS 클래스가 추가됩니다.
다음 예제와 같이 Movie.cs 파일을 열고 속성에 ReleaseDateUIHint 특성을 추가합니다.
[UIHint("LoudDateTime")]
public DateTime ReleaseDate { get; set; }
이렇게 하면 ASP.NET MVC가 속성을 표시 ReleaseDate 할 때(특히 개체 DateTime 뿐만 아니라) LoudDateTime.cshtml 템플릿을 사용해야 한다는 것을 알 수 있습니다.
Ctrl+F5를 눌러 애플리케이션을 실행합니다.
이제 속성에 ReleaseDate 날짜와 시간이 큰 녹색 글꼴로 표시됩니다.
Movie.cs 파일의 UIHint 특성으로 돌아가서 LoudDateTime.cshtml 템플릿이 사용되지 않도록 주석 처리합니다. 애플리케이션을 다시 실행합니다. 릴리스 날짜가 크고 녹색으로 표시되지 않습니다. 이렇게 하면 Views\Shared\DisplayTemplates\DateTime.cshtml 템플릿이 인덱스 및 세부 정보 보기에서 사용되는지 확인합니다.
앞에서 설명한 대로 보기에 템플릿을 적용하여 일부 데이터의 개별 instance 템플릿을 적용할 수도 있습니다. Views\Movies\Details.cshtml 보기를 엽니다. 필드에 대한 Html.DisplayFor 호출의 두 번째 매개 변수로 를 추가 "LoudDateTime" 합니다ReleaseDate. 완성된 코드는 다음과 같습니다.
<div class="display-label">ReleaseDate</div>
<div class="display-field">
@Html.DisplayFor(model => model.ReleaseDate,"LoudDateTime")
</div>
LoudDateTime 이렇게 하면 모델에 적용되는 특성에 관계없이 템플릿을 사용하여 모델 속성을 표시해야 합니다.
Ctrl+F5를 눌러 애플리케이션을 실행합니다.
영화 인덱스 페이지가 Views\Shared\DisplayTemplates\DateTime.cshtml 템플릿(빨간색 굵게)을 사용하고 있고 Movie\Details 페이지에서 Views\Movies\DisplayTemplates\LoudDateTime.cshtml 템플릿(크고 녹색)을 사용하고 있는지 확인합니다.
다음 섹션에서는 복합 형식에 대한 템플릿을 만듭니다.