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

아티클
07/13/2023

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

복합 형식 작업

이 섹션에서는 주소 클래스를 만들고 이를 표시하는 템플릿을 만드는 방법을 알아봅니다.

Models 폴더에서 Person.cs라는 새 클래스 파일을 만듭니다. 여기서 클래스와 클래스의 두 가지 형식을 PersonAddress 배치합니다. 클래스에는 Person 로 Address형식화된 속성이 포함됩니다. 형식은 Address 복합 형식입니다. 즉, , string또는 double와 같은 int기본 제공 형식 중 하나가 아닙니다. 대신 여러 속성이 있습니다. 새 클래스의 코드는 다음과 같습니다.

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

컨트롤러에서 Movie 다음 PersonDetail 작업을 추가하여 instance 사람을 표시합니다.

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

그런 다음 컨트롤러에 Movie 다음 코드를 추가하여 일부 샘플 데이터로 모델을 채웁니다 Person .

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

Views\Movies\PersonDetail.cshtml 파일을 열고 보기에 대해 다음 태그를 PersonDetail 추가합니다.

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

Ctrl+F5를 눌러 애플리케이션을 실행하고 Movies/PersonDetail로 이동합니다.

이 PersonDetail 스크린샷에서 Address 볼 수 있듯이 보기에는 복합 형식이 포함되어 있지 않습니다. (주소가 표시되지 않습니다.)

Address 모델 데이터는 복합 형식이므로 표시되지 않습니다. 주소 정보를 표시하려면 Views\Movies\PersonDetail.cshtml 파일을 다시 열고 다음 태그를 추가합니다.

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

지금 보기에 대한 전체 태그는 PersonDetail 다음과 같습니다.

@model MvcMovie.Models.Person

@{
    ViewBag.Title = "PersonDetail";
}

<h2>Person Detail</h2>

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

애플리케이션을 다시 실행하고 보기를 표시합니다 PersonDetail . 이제 주소 정보가 표시됩니다.

복합 형식에 대한 템플릿 만들기

이 섹션에서는 복합 형식을 렌더링하는 데 사용할 템플릿을 Address 만듭니다. 형식에 대한 Address 템플릿을 만들 때 ASP.NET MVC는 자동으로 이 템플릿을 사용하여 애플리케이션의 모든 위치에서 주소 모델의 서식을 지정할 수 있습니다. 이렇게 하면 애플리케이션의 한 위치에서 형식의 렌더링을 Address 제어할 수 있습니다.

Views\Shared\DisplayTemplates 폴더에서 Address라는 강력한 형식의 부분 보기를 만듭니다.

추가를 클릭한 다음 새 Views\Shared\DisplayTemplates\Address.cshtml 파일을 엽니다. 새 보기에는 다음과 같은 생성된 태그가 포함됩니다.

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

애플리케이션을 실행하고 보기를 표시합니다 PersonDetail . 이번에는 Address 방금 만든 템플릿을 사용하여 복합 형식을 Address 표시하므로 디스플레이는 다음과 같습니다.

요약: 모델 표시 형식 및 템플릿을 지정하는 방법

다음 방법을 사용하여 모델 속성의 형식 또는 템플릿을 지정할 수 있습니다.

모델의 속성에 DisplayFormat 특성을 적용합니다. 예를 들어 다음 코드는 날짜가 시간 없이 표시되도록 합니다.
```
[DisplayFormat(DataFormatString = "{0:d}")]
public DateTime ReleaseDate { get; set; }
```
모델의 속성에 DataType 특성을 적용하고 데이터 형식을 지정합니다. 예를 들어 다음 코드는 날짜가 시간 없이 표시되도록 합니다.
```
[DataType(DataType.Date)]
public DateTime ReleaseDate { get; set; }
```
애플리케이션에 Views\Shared\DisplayTemplates 폴더 또는 Views\Movies\DisplayTemplates 폴더에 date.cshtml 템플릿이 포함된 경우 해당 템플릿을 사용하여 속성을 렌더링 DateTime 합니다. 그렇지 않으면 기본 제공 ASP.NET 템플릿 시스템에서 속성을 날짜로 표시합니다.
Views\Shared\DisplayTemplates 폴더 또는 이름이 서식을 지정할 데이터 형식과 일치하는 Views\Movies\DisplayTemplates 폴더에 표시 템플릿을 만듭니다. 예를 들어 Views\Shared\DisplayTemplates\DateTime.cshtml 이 모델에 특성을 추가하지 않고 뷰에 태그를 추가하지 않고 모델의 속성을 렌더링 DateTime 하는 데 사용된 것을 확인했습니다.
모델에서 UIHint 특성을 사용하여 모델 속성을 표시할 템플릿을 지정합니다.
보기에서 Html.DisplayFor 호출에 표시 템플릿 이름을 명시적으로 추가합니다.

사용하는 방법은 애플리케이션에서 수행해야 하는 사항에 따라 달라집니다. 이러한 접근 방식을 혼합하여 필요한 서식을 정확히 파악하는 것은 드문 일이 아닙니다.

다음 섹션에서는 기어를 조금 전환하고 데이터가 표시되는 방식을 사용자 지정하는 것에서 입력 방법을 사용자 지정하는 것으로 이동합니다. 날짜를 지정하는 매끄러운 방법을 제공하기 위해 jQuery datepicker를 애플리케이션의 편집 보기에 연결합니다.

이전 다음

복합 형식 작업

복합 형식에 대한 템플릿 만들기

요약: 모델 표시 형식 및 템플릿을 지정하는 방법

피드백

피드백

추가 리소스