반복 #2 – 애플리케이션 모양 꾸미기(C#)

아티클
2023-07-13

이 반복에서는 기본 ASP.NET MVC 보기 master 페이지 및 계단식 스타일시트를 수정하여 애플리케이션의 모양을 개선합니다.

MVC 애플리케이션을 ASP.NET 연락처 관리 빌드(C#)

이 자습서 시리즈에서는 처음부터 끝까지 전체 연락처 관리 애플리케이션을 빌드합니다. 연락처 관리자 애플리케이션을 사용하면 사용자 목록에 대한 연락처 정보(이름, 전화 번호 및 전자 메일 주소)를 저장할 수 있습니다.

여러 반복을 통해 애플리케이션을 빌드합니다. 반복할 때마다 애플리케이션을 점진적으로 개선합니다. 이 다중 반복 방법의 목표는 각 변경 이유를 이해할 수 있도록 하는 것입니다.

반복 #1 - 애플리케이션을 만듭니다. 첫 번째 반복에서는 가능한 가장 간단한 방법으로 연락처 관리자를 만듭니다. 기본 데이터베이스 작업인 CRUD(만들기, 읽기, 업데이트 및 삭제)에 대한 지원을 추가합니다.
반복 #2 - 애플리케이션을 멋지게 만듭니다. 이 반복에서는 기본 ASP.NET MVC 보기 master 페이지 및 계단식 스타일시트를 수정하여 애플리케이션의 모양을 개선합니다.
반복 #3 - 양식 유효성 검사를 추가합니다. 세 번째 반복에서는 기본 양식 유효성 검사를 추가합니다. 사용자가 필요한 양식 필드를 완료하지 않고 양식을 제출하지 못하도록 합니다. 또한 이메일 주소 및 전화 번호의 유효성을 검사합니다.
반복 #4 - 애플리케이션을 느슨하게 결합합니다. 이 네 번째 반복에서는 여러 소프트웨어 디자인 패턴을 활용하여 Contact Manager 애플리케이션을 더 쉽게 유지 관리하고 수정할 수 있습니다. 예를 들어 리포지토리 패턴 및 종속성 주입 패턴을 사용하도록 애플리케이션을 리팩터링합니다.
반복 #5 - 단위 테스트 만들기 다섯 번째 반복에서는 단위 테스트를 추가하여 애플리케이션을 더 쉽게 유지 관리하고 수정할 수 있습니다. 데이터 모델 클래스를 모의하고 컨트롤러 및 유효성 검사 논리에 대한 단위 테스트를 빌드합니다.
반복 #6 - 테스트 기반 개발을 사용합니다. 이 여섯 번째 반복에서는 단위 테스트를 먼저 작성하고 단위 테스트에 대한 코드를 작성하여 애플리케이션에 새로운 기능을 추가합니다. 이 반복에서는 연락처 그룹을 추가합니다.
반복 #7 - Ajax 기능 추가 일곱 번째 반복에서는 Ajax에 대한 지원을 추가하여 애플리케이션의 응답성과 성능을 향상시킵니다.

이 반복

이 반복의 목표는 Contact Manager 애플리케이션의 모양을 개선하는 것입니다. 현재 Contact Manager는 기본 ASP.NET MVC 보기 master 페이지 및 계단식 스타일시트를 사용합니다(그림 1 참조). 이는 나쁘지 않지만 연락처 관리자가 다른 모든 ASP.NET MVC 웹 사이트처럼 보이기를 원하지 않습니다. 이러한 파일을 사용자 지정 파일로 바꾸려고 합니다.

그림 01: ASP.NET MVC 애플리케이션의 기본 모양(전체 크기 이미지를 보려면 클릭)

이 반복에서는 애플리케이션의 시각적 디자인을 개선하기 위한 두 가지 방법을 설명합니다. 먼저 ASP.NET MVC 디자인 갤러리를 활용하여 무료 ASP.NET MVC 디자인 템플릿을 다운로드하는 방법을 보여줍니다. ASP.NET MVC 디자인 갤러리를 사용하면 작업을 수행하지 않고도 전문 웹 애플리케이션을 만들 수 있습니다.

연락처 관리자 애플리케이션에 ASP.NET MVC 디자인 갤러리의 템플릿을 사용하지 않기로 결정했습니다. 대신 전문 디자인 회사에서 만든 사용자 지정 디자인이 있었습니다. 이 자습서의 두 번째 부분에서는 전문 디자인 회사와 협력하여 최종 ASP.NET MVC 디자인을 만드는 방법을 설명합니다.

그림 02: ASP.NET MVC 디자인 갤러리(전체 크기 이미지를 보려면 클릭)

이 자습서를 작성할 때 갤러리에서 가장 인기 있는 디자인은 David Hauser의 10월 디자인입니다. 다음 단계를 완료하여 ASP.NET MVC 프로젝트에 이 디자인을 사용할 수 있습니다.

다운로드 단추를 클릭하여 컴퓨터에 October.zip 파일을 다운로드합니다.
다운로드한 October.zip 파일을 마우스 오른쪽 단추로 클릭하고 차단 해제 단추를 클릭합니다(그림 3 참조).
파일의 압축을 10월 폴더로 압축 해제합니다.
10월 폴더에 포함된 DesignTemplate 폴더에서 모든 파일을 선택하고 파일을 마우스 오른쪽 단추로 클릭하고 메뉴 옵션 복사를 선택합니다.
Visual Studio 솔루션 탐색기 창에서 ContactManager 프로젝트 노드를 마우스 오른쪽 단추로 클릭하고 메뉴 옵션 붙여넣기를 선택합니다(그림 4 참조).
Visual Studio 메뉴 옵션 편집, 찾기 및 바꾸기, 빠른 바꾸기 를 선택하고 [MyProjectName] 을 ContactManager 로 바꿉니다(그림 5 참조).

그림 03: 웹에서 다운로드한 파일 차단 해제(전체 크기 이미지를 보려면 클릭)

그림 04: 솔루션 탐색기 파일 덮어쓰기(전체 크기 이미지를 보려면 클릭)

그림 05: [ProjectName]을 ContactManager로 바꾸기(전체 크기 이미지를 보려면 클릭)

이러한 단계를 완료하면 웹 애플리케이션에서 새 디자인을 사용합니다. 그림 6의 페이지에서는 10월 디자인의 Contact Manager 애플리케이션 모양을 보여 줍니다.

그림 06: 10월 템플릿이 있는 ContactManager(전체 크기 이미지를 보려면 클릭)

사용자 지정 ASP.NET MVC 디자인 만들기

ASP.NET MVC 디자인 갤러리는 다양한 디자인 스타일을 선택할 수 있습니다. 갤러리는 ASP.NET MVC 애플리케이션의 모양을 사용자 지정할 수 있는 간편한 방법을 제공합니다. 물론 갤러리는 완전히 자유롭다는 큰 장점이 있습니다.

그러나 웹 사이트에 대한 완전히 고유한 디자인을 만들어야 할 수도 있습니다. 이 경우 웹 사이트 디자인 회사와 협력하는 것이 좋습니다. 연락처 관리자 애플리케이션의 디자인에 대해 이 접근 방식을 취하기로 결정했습니다.

반복 #1에서 Contact Manager를 압축하고 프로젝트를 디자인 회사에 보냈습니다. 그들은 Visual Studio를 소유하지 않았지만 (부끄러운 일입니다!) 문제가 발생하지 않았습니다. 웹 사이트에서 Microsoft Visual Web Developer를 무료로 다운로드하고 Visual Web Developer에서 https://www.asp.net Contact Manager 애플리케이션을 열 수 있었습니다. 며칠 후 그림 7에서 디자인을 제작했습니다.

그림 07: ASP.NET MVC Contact Manager 디자인(전체 크기 이미지를 보려면 클릭)

새 디자인은 두 개의 기본 파일로 구성되었습니다. 즉, 새 계단식 스타일시트 파일과 페이지 파일에 master 새 뷰가 있습니다. 보기 master 페이지에는 ASP.NET MVC 애플리케이션의 보기에 대한 레이아웃 및 공유 콘텐츠가 포함되어 있습니다. 예를 들어 보기 master 페이지에는 그림 7에 표시되는 머리글, 탐색 탭 및 바닥글이 포함됩니다. 디자인 회사의 새 Site.Master 파일을 사용하여 Views\Shared 폴더의 기존 Site.Master 보기 master 페이지를 덮어쓰겠습니다.

디자인 회사는 또한 새로운 계단식 스타일 시트와 이미지 세트를 만들었습니다. 이러한 새 파일을 Content 폴더에 배치하고 기존 Site.css 파일을 덮어쓸 수 있습니다. 모든 정적 콘텐츠를 Content 폴더에 배치해야 합니다.

연락처 관리자의 새 디자인에는 연락처를 편집하고 삭제하기 위한 이미지가 포함되어 있습니다. 편집 및 삭제 이미지는 HTML 연락처 테이블의 각 연락처 옆에 나타납니다.

원래 HTML로 렌더링된 이러한 링크입니다. ActionLink() 도우미는 다음과 같습니다.

<td>
    <%= Html.ActionLink("Edit", "Edit", new { id=item.Id  }) %> |
    <%= Html.ActionLink("Delete", "Delete", new { id=item.Id  }) %> 
</td>

Html.ActionLink() 메서드는 이미지를 지원하지 않습니다(HTML 메서드는 보안상의 이유로 링크 텍스트를 인코딩). 따라서 Html.ActionLink()에 대한 호출을 다음과 같이 Url.Action()에 대한 호출로 바꿉니다.

<td class="actions edit">
    <a href='<%= Url.Action("Edit", new {id=item.Id}) %>'><img src="../../Content/Edit.png" alt="Edit" /></a>
</td>
<td class="actions delete">
    <a href='<%= Url.Action("Delete", new {id=item.Id}) %>'><img src="../../Content/Delete.png" alt="Delete" /></a>
</td>

Html.ActionLink() 메서드는 전체 HTML 하이퍼링크를 렌더링합니다. 반면에 Url.Action() 메서드는 태그 없이 <> URL만 렌더링합니다.

또한 새 디자인에는 선택한 탭과 선택되지 않은 탭이 모두 포함되어 있습니다. 예를 들어 그림 8에서 새 연락처 만들기 탭이 선택되고 내 연락처 탭이 선택되지 않습니다.

그림 08: 선택됨 및 선택되지 않은 탭(전체 크기 이미지를 보려면 클릭)

선택한 탭과 선택되지 않은 탭의 렌더링을 지원하기 위해 MenuItemHelper라는 사용자 지정 HTML 도우미를 만들었습니다. 이 도우미 메서드는 <현재 컨트롤러와 작업이 도우미에 전달된 컨트롤러 및 작업 이름에 해당하는지 여부에 따라 li> 태그 또는 <li class="selected"> 태그를 렌더링합니다. MenuItemHelper에 대한 코드는 목록 1에 포함되어 있습니다.

목록 1 - Helpers\MenuItemHelper.cs

using System;
using System.Web.Mvc;
using System.Web.Mvc.Html;

namespace Helpers
{
    /// <summary>
    /// This helper method renders a link within an HTML LI tag.
    /// A class="selected" attribute is added to the tag when
    /// the link being rendered corresponds to the current
    /// controller and action.
    /// 
    /// This helper method is used in the Site.Master View 
    /// Master Page to display the website menu.
    /// </summary>
    public static class MenuItemHelper
    {
        public static string MenuItem(this HtmlHelper helper, string linkText, string actionName, string controllerName)
        {
            string currentControllerName = (string)helper.ViewContext.RouteData.Values["controller"];
            string currentActionName = (string)helper.ViewContext.RouteData.Values["action"];

            var builder = new TagBuilder("li");
            
            // Add selected class
            if (currentControllerName.Equals(controllerName, StringComparison.CurrentCultureIgnoreCase) && currentActionName.Equals(actionName, StringComparison.CurrentCultureIgnoreCase))
                builder.AddCssClass("selected");            
            
            // Add link
            builder.InnerHtml = helper.ActionLink(linkText, actionName, controllerName);

            // Render Tag Builder
            return builder.ToString(TagRenderMode.Normal);
        }

    }
}

MenuItemHelper는 내부적으로 TagBuilder 클래스를 사용하여 li> HTML 태그를 <빌드합니다. TagBuilder 클래스는 새 HTML 태그를 빌드해야 할 때마다 사용할 수 있는 매우 유용한 유틸리티 클래스입니다. 여기에는 특성을 추가하고, CSS 클래스를 추가하고, ID를 생성하고, 태그의 내부 HTML을 수정하는 메서드가 포함됩니다.

요약

이 반복에서는 ASP.NET MVC 애플리케이션의 시각적 디자인을 개선했습니다. 먼저 ASP.NET MVC 디자인 갤러리를 소개했습니다. ASP.NET MVC 애플리케이션에서 사용할 수 있는 ASP.NET MVC 디자인 갤러리에서 무료 디자인 템플릿을 다운로드하는 방법을 알아보았습니다.

다음으로 기본 계단식 스타일시트 파일을 수정하고 페이지 보기 파일을 master 사용자 지정 디자인을 만드는 방법에 대해 설명했습니다. 새 디자인을 지원하기 위해 Contact Manager 애플리케이션을 약간 변경해야 했습니다. 예를 들어 선택한 탭과 선택되지 않은 탭을 표시하는 MenuItemHelper라는 새 HTML 도우미를 추가했습니다.

다음 반복에서는 유효성 검사의 매우 중요한 주제를 다룹니다. 사용자가 사용자의 이름과 성 등의 필수 값을 제공하지 않고 새 연락처를 만들 수 없도록 애플리케이션에 유효성 검사 코드를 추가합니다.

이전 다음

다음을 통해 공유

반복 #2 – 애플리케이션 모양 꾸미기(C#)

MVC 애플리케이션을 ASP.NET 연락처 관리 빌드(C#)

이 반복

사용자 지정 ASP.NET MVC 디자인 만들기

요약

피드백

추가 리소스