ASP.NET MVC에서 HTML5 및 jQuery UI 날짜 피커 팝업 달력 사용 - 1부

  • 아티클

작성자 : Rick Anderson

이 자습서에서는 ASP.NET MVC 웹 애플리케이션에서 편집기 템플릿, 디스플레이 템플릿 및 jQuery UI 날짜 피커 팝업 달력을 사용하는 방법에 대한 기본 사항을 설명합니다.

이 자습서에서는 ASP.NET MVC 웹 애플리케이션에서 편집기 템플릿, 디스플레이 템플릿 및 jQuery UI 날짜 피커 팝업 달력 을 사용하는 방법에 대한 기본 사항을 설명합니다. 이 자습서에서는 Microsoft Visual Studio의 무료 버전인 Microsoft Visual Web Developer 2010 Express Service Pack 1("Visual Web Developer")을 사용하거나 이미 있는 경우 Visual Studio 2010 SP1을 사용할 수 있습니다.

시작하기 전에 아래에 나열된 필수 구성 요소를 설치했는지 확인합니다. 웹 플랫폼 설치 관리자 링크를 클릭하여 모두 설치할 수 있습니다. 또는 다음 링크를 사용하여 필요한 소프트웨어를 개별적으로 설치할 수 있습니다.

Visual Web Developer 대신 Visual Studio 2010을 사용하는 경우 Visual Studio 2010 필수 구성 요소 링크를 클릭하여 필수 구성 요소를 설치합니다.

이 자습서에서는 MVC 3 자습서를 사용하여 시작 완료했거나 ASP.NET MVC 개발에 익숙하다고 가정합니다. 이 자습서는 MVC 3 자습서를 사용하여 시작 완료된 프로젝트로 시작합니다.

만들 내용

MVC 3 자습서를 사용하여 시작 만든 간단한 동영상 목록 애플리케이션에 템플릿(특히 템플릿 편집 및 표시)을 추가합니다. 또한 jQuery UI 날짜 피커 팝업 달력을 추가하여 날짜를 입력하는 프로세스를 간소화합니다. 다음 스크린샷은 jQuery UI 날짜 피커 팝업 달력이 표시된 수정된 애플리케이션을 보여 줍니다.

제목 필드가 있는 편집 보기와 jQuery UI 날짜 피커 팝업 달력이 있는 릴리스 날짜 필드를 보여 주는 Movie jQuery 창의 스크린샷

학습할 기술

다음 내용을 학습하게 됩니다.

  • DataAnnotations 네임스페이스의 특성을 사용하여 표시될 때와 편집 모드에 있을 때 데이터 형식을 제어하는 방법입니다.
  • 템플릿(템플릿 편집 및 표시)을 만들어 데이터 서식을 제어하는 방법입니다.
  • 날짜 필드를 입력하는 방법으로 jQuery UI datepicker 를 추가하는 방법입니다.

시작하기

시작 프로젝트의 동영상 목록 애플리케이션이 아직 없는 경우 다운로드합니다.

  • 다운로드.
  • Windows ExplorerMvcMovie.zip파일을 마우스 오른쪽 단추 로 클릭하고 속성을 선택합니다.
  • MvcMovie.zip 속성 대화 상자에서 차단 해제를 선택합니다. (차단 해제는 웹에서 다운로드한 .zip 파일을 사용하려고 할 때 발생하는 보안 경고를 막습니다.)

보안 섹션과 차단 해제 단추가 빨간색 사각형으로 강조 표시된 Mvc Movie dot zip 속성 상자를 보여 주는 스크린샷

MvcMovie.zip파일을 마우스 오른쪽 단추 로 클릭하고 모두 추출 을 선택하여 파일 압축을 해제합니다. Visual Web Developer 또는 Visual Studio 2010에서 MvcMovieCS_TU.sln 파일을 엽니다.

솔루션 탐색기Views\Shared\_Layout.cshtml을 두 번 클릭하여 엽니다. 헤더를 H1MVC 무비 앱 에서 Movie jQuery로 변경합니다. Ctrl+F5를 눌러 애플리케이션을 실행하고 홈 탭을 클릭하면 영화 컨트롤러의 메서드로 이동합니다 Index . 애플리케이션을 사용해 보려면 동영상 중 하나에 대한 편집 링크 및 세부 정보 링크를 선택합니다. 인덱스, 편집 및 세부 정보 보기에서 릴리스 날짜 및 가격은 다음과 같은 형식으로 잘 지정되어 있습니다.

선택한 동영상에 대해 설정된 값이 나열된 세부 정보 보기를 보여 주는 동영상 jQuery 창의 스크린샷

날짜 및 가격에 대한 서식은 클래스의 속성 Movie 에서 DisplayFormat 특성을 사용한 결과입니다.

Movie.cs 파일을 열고 및 Price 속성의 DisplayFormat 특성을 주석으로 처리 ReleaseDate 합니다. 결과 Movie 클래스는 다음과 같습니다.

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

Ctrl+F5를 다시 눌러 애플리케이션을 실행하고 홈 탭을 선택하여 동영상 목록을 봅니다. 이번에는 릴리스 날짜에 날짜와 시간이 표시되고 가격 필드에 더 이상 통화 기호가 표시되지 않습니다. 클래스를 Movie 변경하면 앞에서 본 서식이 취소되지만 잠시 후에 수정할 수 있습니다.

Movie dot cs 파일을 편집한 후 표시되는 동영상의 집합 값이 있는 세부 정보 보기를 보여 주는 Movie jQuery 창의 스크린샷.

DataAnnotations DataType 특성을 사용하여 데이터 형식 지정

열거형을 사용하여 속성에 ReleaseDate 대한 주석 처리된 DisplayFormat 특성을 DataType 특성으로 Date 바꿉 있습니다. DisplayFormat 이번에는 열거형을 사용하여 Currency 속성의 Price 특성을 DataType 특성으로 다시 바꿉 있습니다. 완성된 코드는 다음과 같습니다.

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

애플리케이션을 실행합니다. 이제 릴리스 날짜 및 가격 속성의 형식이 올바르게 지정됩니다(즉, 적절한 날짜 및 통화 형식 사용). DataType 특성은 필드가 올바른 형식으로 렌더링되도록 기본 제공 ASP.NET MVC 템플릿에 대한 형식 메타데이터를 제공합니다. DataType 특성을 사용하면 원래 코드 DataType 에 있던 특성을 사용하는 DisplayFormat 것이 좋습니다. 특성은 국제화와 같은 목적을 위해 모델을 더 명확하고 유연하게 만들기 때문입니다.

다음 섹션에서는 날짜 필드를 표시하는 사용자 지정 템플릿을 만드는 방법을 알아보세요.

다음