ASP.NET MVC에서 HTML5 및 jQuery UI Datepicker 팝업 달력 사용 - 4부

아티클
06/16/2023

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

날짜 편집을 위한 템플릿 추가

이 섹션에서는 ASP.NET MVC가 DataType 특성의 Date 열거형으로 표시된 모델 속성을 편집하기 위한 UI를 표시할 때 적용되는 날짜 편집을 위한 템플릿을 만듭니다. 템플릿은 날짜만 렌더링합니다. 시간이 표시되지 않습니다. 템플릿에서는 jQuery UI Datepicker 팝업 달력을 사용하여 날짜를 편집하는 방법을 제공합니다.

시작하려면 다음 코드와 같이 Movie.cs 파일을 열고 Date 열거형을 사용하여 ReleaseDateDataType 특성을 속성에 추가합니다.

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

이 코드를 사용하면 ReleaseDate 표시 템플릿과 편집 템플릿 모두에서 시간 없이 필드가 표시됩니다. 애플리케이션에 Views\Shared\EditorTemplates 폴더 또는 Views\Movies\EditorTemplates 폴더에 date.cshtml 템플릿이 포함된 경우 해당 템플릿은 편집하는 동안 속성을 DateTime 렌더링하는 데 사용됩니다. 그렇지 않으면 기본 제공 ASP.NET 템플릿 시스템에서 속성을 날짜로 표시합니다.

Ctrl+F5를 눌러 애플리케이션을 실행합니다. 편집 링크를 선택하여 릴리스 날짜의 입력 필드에 날짜만 표시되는지 확인합니다.

솔루션 탐색기Views 폴더를 확장하고 공유 폴더를 확장한 다음 Views\Shared\EditorTemplates 폴더를 마우스 오른쪽 단추로 클릭합니다.

추가를 클릭한 다음 보기를 클릭합니다. 보기 추가 대화 상자가 표시됩니다.

보기 이름 상자에 "Date"를 입력합니다.

부분 보기로 만들기 검사 상자를 선택합니다. 레이아웃 또는 master 사용 페이지와 강력한 형식의 보기 만들기 검사 상자가 선택되어 있지 않은지 확인합니다.

추가를 클릭합니다. Views\Shared\EditorTemplates\Date.cshtml 템플릿이 만들어집니다.

Views\Shared\EditorTemplates\Date.cshtml 템플릿에 다음 코드를 추가합니다.

@model DateTime
Using Date Template
@Html.TextBox("", String.Format("{0:d}", Model.ToShortDateString()),
  new { @class = "datefield", type = "date"  })

첫 번째 줄은 모델을 형식으로 DateTime 선언합니다. 템플릿 편집 및 표시에서 모델 형식을 선언할 필요는 없지만 보기에 전달되는 모델을 컴파일 시간 검사하는 것이 가장 좋습니다. (또 다른 이점은 Visual Studio의 보기에서 모델에 대한 IntelliSense를 얻을 수 있다는 것입니다.) 모델 형식이 선언되지 않은 경우 ASP.NET MVC는 이를 동적 형식으로 간주하며 컴파일 시간 형식 검사가 없습니다. 모델을 형식으로 DateTime 선언하면 강력한 형식이 됩니다.

두 번째 줄은 날짜 필드 앞에 "날짜 템플릿 사용"을 표시하는 리터럴 HTML 태그일 뿐입니다. 이 줄을 일시적으로 사용하여 이 날짜 템플릿이 사용되고 있는지 확인합니다.

다음 줄은 텍스트 상자인 필드를 렌더링 input 하는 Html.TextBox 도우미입니다. 도우미의 세 번째 매개 변수는 익명 형식을 사용하여 텍스트 상자의 클래스를 로 datefield 설정하고 형식을 로 date설정합니다. 는 C#에서 예약되어 있으므로 class 문자를 사용하여 @ C# 파서의 class 특성을 이스케이프해야 합니다.

형식은 date HTML5 인식 브라우저가 HTML5 일정 컨트롤을 렌더링할 수 있도록 하는 HTML5 입력 형식입니다. 나중에 클래스를 사용하여 jQuery datepicker Html.TextBox 를 요소에 연결하는 JavaScript를 datefield 추가합니다.

Ctrl+F5를 눌러 애플리케이션을 실행합니다. 이 이미지와 같이 템플릿이 ReleaseDate 텍스트 입력 상자 바로 앞에 "날짜 템플릿 사용"을 표시하기 때문에 편집 보기의 ReleaseDate 속성이 편집 템플릿을 사용하고 있는지 확인할 수 있습니다.

브라우저에서 페이지의 원본을 봅니다. 예를 들어 페이지를 마우스 오른쪽 단추로 클릭하고 원본 보기를 선택합니다. 다음 예제에서는 렌더링된 HTML의 및 type 특성을 보여 주는 class 페이지에 대한 태그 중 일부를 보여 줍니다.

<input class="datefield" data-val="true" data-val-required="Date is required" 
      id="ReleaseDate" name="ReleaseDate" type="date" value="1/11/1989" />

Views\Shared\EditorTemplates\Date.cshtml 템플릿으로 돌아가서 "날짜 템플릿 사용" 태그를 제거합니다. 이제 완료된 템플릿은 다음과 같습니다.

@model DateTime
@Html.TextBox("", String.Format("{0:d}", Model.ToShortDateString()),
  new { @class = "datefield", type = "date" })

이 섹션에서는 jQuery UI datepicker 팝업 달력을 날짜 편집 템플릿에 추가합니다. jQuery UI 라이브러리는 애니메이션, 고급 효과 및 사용자 지정 가능한 위젯을 지원합니다. jQuery JavaScript 라이브러리를 기반으로 빌드됩니다. datepicker 팝업 달력을 사용하면 문자열을 입력하는 대신 달력을 사용하여 날짜를 쉽고 자연스럽게 입력할 수 있습니다. 팝업 달력은 사용자를 법적 날짜로 제한합니다. 날짜에 대한 일반 텍스트 항목을 사용하면 (1999년 2월 33일) 같은 2/33/1999 항목을 입력할 수 있지만 jQuery UI 날짜 피커 팝업 달력에서는 이를 허용하지 않습니다.

먼저 jQuery UI 라이브러리를 설치해야 합니다. 이렇게 하려면 Visual Studio 2010 및 Visual Web Developer의 SP1 버전에 포함된 패키지 관리자인 NuGet을 사용합니다.

Visual Web Developer의 도구 메뉴에서 NuGet 패키지 관리자 를 선택한 다음 , NuGet 패키지 관리를 선택합니다.

참고: 도구 메뉴에 NuGet 패키지 관리자 명령이 표시되지 않는 경우 NuGet 웹 사이트의 NuGet 설치 페이지의 지침에 따라 NuGet을 설치 해야 합니다.

Visual Web Developer 대신 Visual Studio를 사용하는 경우 도구 메뉴에서 NuGet 패키지 관리자 를 선택한 다음 라이브러리 패키지 참조 추가를 선택합니다.

MVCMovie - NuGet 패키지 관리 대화 상자에서 왼쪽의 온라인 탭을 클릭한 다음 검색 상자에 "jQuery.UI"를 입력합니다. j 쿼리 UI 위젯:Datepicker를 선택한 다음 설치 단추를 선택합니다.

NuGet은 이러한 디버그 버전 및 축소된 버전의 jQuery UI Core 및 jQuery UI 날짜 선택기를 프로젝트에 추가합니다.

jquery.ui.core.js
jquery.ui.core.min.js
jquery.ui.datepicker.js
jquery.ui.datepicker.min.js

참고: 디버그 버전( .min.js 확장이 없는 파일)은 디버깅에 유용하지만 프로덕션 사이트에서는 축소된 버전만 포함합니다.

실제로 jQuery 날짜 선택기를 사용하려면 일정 위젯을 편집 템플릿에 연결하는 jQuery 스크립트를 만들어야 합니다. 솔루션 탐색기Scripts 폴더를 마우스 오른쪽 단추로 클릭하고 추가, 새 항목, JScript 파일을 차례로 선택합니다. 파일 이름을 로DatePickerReady.js.

DatePickerReady.js 파일에 다음 코드를 추가합니다.

$(function () {
    $(".datefield").datepicker(); 
});

jQuery에 익숙하지 않은 경우 첫 번째 줄은 페이지의 모든 DOM 요소가 로드될 때 호출되는 "jQuery ready" 함수입니다. 두 번째 줄은 클래스 이름이 datefield인 모든 DOM 요소를 선택한 다음 각 요소에 대한 함수를 datepicker 호출합니다. (자습서의 datefield 앞부분에서 Views\Shared\EditorTemplates\Date.cshtml 템플릿에 클래스를 추가했습니다.)

그런 다음 Views\Shared\_Layout.cshtml 파일을 엽니다. 날짜 선택기를 사용할 수 있도록 필요한 다음 파일에 대한 참조를 추가해야 합니다.

Content/themes/base/jquery.ui.core.css
Content/themes/base/jquery.ui.datepicker.css
Content/themees/base/jquery.ui.theme.css
jquery.ui.core.min.js
jquery.ui.datepicker.min.js
DatePickerReady.js

다음 예제에서는 Views\Shared\_Layout.cshtml 파일의 head 요소 아래쪽에 추가해야 하는 실제 코드를 보여 줍니다.

<link href="@Url.Content("~/Content/themes/base/jquery.ui.core.css")" 
        rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.datepicker.css")" 
        rel="stylesheet"  type="text/css" />
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.theme.css")" 
        rel="stylesheet" type="text/css" />

    <script src="@Url.Content("~/Scripts/jquery.ui.core.min.js")" 
        type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.datepicker.min.js")" 
        type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/DatePickerReady.js")" 
        type="text/javascript"></script>

전체 head 섹션은 다음과 같습니다.

<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" 
        rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" 
        type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" 
        type="text/javascript"></script>

    <link href="@Url.Content("~/Content/themes/base/jquery.ui.core.css")" 
        rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.datepicker.css")" 
        rel="stylesheet"  type="text/css" />
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.theme.css")" 
        rel="stylesheet" type="text/css" />

    <script src="@Url.Content("~/Scripts/jquery.ui.core.min.js")" 
        type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.datepicker.min.js")" 
        type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/DatePickerReady.js")" 
        type="text/javascript"></script>
</head>

URL 콘텐츠 도우미 메서드는 리소스 경로를 절대 경로로 변환합니다. 애플리케이션이 IIS에서 실행 중일 때 를 사용하여 @URL.Content 이러한 리소스를 올바르게 참조해야 합니다.

Ctrl+F5를 눌러 애플리케이션을 실행합니다. 편집 링크를 선택한 다음 삽입 지점을 ReleaseDate 필드에 넣습니다. jQuery UI 팝업 달력이 표시됩니다.

대부분의 jQuery 컨트롤과 마찬가지로 datepicker를 사용하면 광범위하게 사용자 지정할 수 있습니다. 자세한 내용은 시각적 사용자 지정: jQuery UI 사이트에서 jQuery UI 테마 디자인을 참조하세요.

HTML5 날짜 입력 컨트롤 지원

HTML5를 지원하는 브라우저가 많을수록 입력 요소와 같은 네이티브 HTML5 입력을 date 사용하고 jQuery UI 달력을 사용하지 않는 것이 좋습니다. 브라우저에서 지원하는 경우 HTML5 컨트롤을 자동으로 사용하도록 애플리케이션에 논리를 추가할 수 있습니다. 이렇게 하려면 DatePickerReady.js 파일의 내용을 다음으로 바꿉니다.

if (!Modernizr.inputtypes.date) {
    $(function () {
        $(".datefield").datepicker();
    });
}

이 스크립트의 첫 번째 줄은 Modernizr를 사용하여 HTML5 날짜 입력이 지원되는지 확인합니다. 지원되지 않는 경우 jQuery UI 날짜 선택기가 대신 연결됩니다. (Modernizr 는 HTML5 및 CSS3의 네이티브 구현의 가용성을 검색하는 오픈 소스 JavaScript 라이브러리입니다. Modernizr는 사용자가 만든 새 ASP.NET MVC 프로젝트에 포함됩니다.)

이 변경 내용을 변경한 후에는 Opera 11과 같은 HTML5를 지원하는 브라우저를 사용하여 테스트할 수 있습니다. HTML5 호환 브라우저를 사용하여 애플리케이션을 실행하고 영화 항목을 편집합니다. HTML5 날짜 컨트롤은 jQuery UI 팝업 달력 대신 사용됩니다.

새 버전의 브라우저가 HTML5를 증분 방식으로 구현하기 때문에 지금은 다양한 HTML5 지원을 수용하는 코드를 웹 사이트에 추가하는 것이 좋습니다. 예를 들어 사이트에서 HTML5 날짜 컨트롤을 부분적으로만 지원하는 브라우저를 지원할 수 있는 보다 강력한 DatePickerReady.js 스크립트가 아래에 표시됩니다.

if (!Modernizr.inputtypes.date) {
    $(function () {
        $("input[type='date']")
                    .datepicker()
                    .get(0)
                    .setAttribute("type", "text");
    })
}

이 스크립트는 HTML5 input 날짜 컨트롤을 완전히 지원하지 않는 형식 date 의 HTML5 요소를 선택합니다. 이러한 요소의 경우 jQuery UI 팝업 달력을 후크한 다음 특성을 에서 datetext로 변경 type 합니다. 특성을 에서 typedatetext로 변경하면 부분 HTML5 날짜 지원이 제거됩니다. 훨씬 더 강력한 DatePickerReady.js 스크립트는 JSFIDDLE에서 찾을 수 있습니다.

템플릿에 Null 허용 날짜 추가

기존 날짜 템플릿 중 하나를 사용하고 null 날짜를 전달하는 경우 런타임 오류가 발생합니다. 날짜 템플릿을 보다 강력하게 만들려면 null 값을 처리하도록 변경합니다. null 허용 날짜를 지원하려면 Views\Shared\DisplayTemplates\DateTime.cshtml 의 코드를 다음으로 변경합니다.

@model Nullable<DateTime>
@(Model != null ? string.Format("{0:d}", Model) : string.Empty)

이 코드는 모델이 null일 때 빈 문자열을 반환합니다.

Views\Shared\EditorTemplates\Date.cshtml 파일의 코드를 다음으로 변경합니다.

@model Nullable<DateTime>

 @{
    DateTime dt = DateTime.Now;
    if (Model != null)
    {
       dt  = (System.DateTime) Model;
   
    }
    @Html.TextBox("", String.Format("{0:d}", dt.ToShortDateString()), new { @class = "datefield", type = "date"  })
}

이 코드가 실행되면 모델이 null이 아닌 경우 모델의 DateTime 값이 사용됩니다. 모델이 null이면 현재 날짜가 대신 사용됩니다.

Wrapup

이 자습서에서는 ASP.NET 템플릿 도우미의 기본 사항을 다루며 ASP.NET MVC 애플리케이션에서 jQuery UI 날짜 피커 팝업 달력을 사용하는 방법을 보여 줍니다. 자세한 내용은 다음 리소스를 사용해 보세요.

jQuery UI에 대한 자세한 내용은 jQuery UI를 참조하세요.
datepicker 컨트롤을 지역화하는 방법에 대한 자세한 내용은 UI/Datepicker/Localization을 참조하세요.
ASP.NET MVC 템플릿에 대한 자세한 내용은 ASP.NET MVC 2 템플릿에 대한 Brad Wilson의 블로그 시리즈를 참조하세요. 계열은 ASP.NET MVC 2용으로 작성되었지만 현재 버전의 ASP.NET MVC에 여전히 재질이 적용됩니다.

날짜 편집을 위한 템플릿 추가

HTML5 날짜 입력 컨트롤 지원

템플릿에 Null 허용 날짜 추가

Wrapup

피드백

피드백

추가 리소스

ASP.NET MVC에서 HTML5 및 jQuery UI Datepicker 팝업 일정 사용 - 4부

날짜 편집을 위한 템플릿 추가

NuGet을 사용하여 jQuery UI Datepicker 팝업 일정 추가

HTML5 날짜 입력 컨트롤 지원

템플릿에 Null 허용 날짜 추가

Wrapup

피드백

피드백

추가 리소스