다음을 통해 공유


Visual Studio를 사용하여 프로그래밍 ASP.NET 웹 페이지(Razor)

Tom FitzMacken

이 문서에서는 Visual Studio 또는 Visual Web Developer Express를 사용하여 Razor(ASP.NET 웹 페이지) 웹 사이트를 프로그래밍하는 방법을 설명합니다.

학습할 내용

  • Visual Studio 버전에서 ASP.NET 웹 페이지 사용하려면 설치해야 하는 항목(있는 경우)입니다.
  • Visual Web Developer 2010 Express에 ASP.NET 웹 페이지 대한 지원을 추가하는 방법입니다.
  • Visual Studio의 기능을 사용하여 IntelliSense 및 디버거를 비롯한 ASP.NET Razor 페이지에서 작업하는 방법입니다.

자습서에서 사용되는 소프트웨어 버전

  • ASP.NET 웹 페이지(Razor) 3
  • Visual Studio 2013
  • WebMatrix 3

이 자습서는 ASP.NET 웹 페이지 2, Visual Studio 2012, Visual Studio 2010 및 WebMatrix 2에서도 작동합니다.

WebMatrix 또는 다른 많은 코드 편집기를 사용하여 Razor 구문을 사용하여 웹 페이지를 ASP.NET 프로그래밍할 수 있습니다. 웹 사이트뿐만 아니라 다양한 유형의 애플리케이션을 만들기 위한 강력한 도구 집합을 제공하는 완전한 기능을 갖춘 IDE(통합 개발 환경)인 Microsoft Visual Studio를 사용할 수도 있습니다. ASP.NET Razor 페이지를 사용하려면 Visual Studio 2017을 사용할 수 있습니다.

Visual Studio에서 ASP.NET Razor 웹 페이지를 사용하여 프로그래밍하는 데 제공하는 두 가지 특히 유용한 기능은 다음과 같습니다.

  • IntelliSense. Visual Studio에 기본 제공되는 IntelliSense 기능은 WebMatrix의 IntelliSense보다 더 포괄적입니다.
  • 디버거. 디버거를 사용하면 실행 중인 프로그램을 중지하고, 변수를 검사하고, 코드 줄을 한 줄씩 실행하여 코드 문제를 해결할 수 있습니다.

다른 버전의 ASP.NET 웹 페이지 Visual Studio 사용

Visual Studio 2017에서 ASP.NET 웹앱을 개발하려면 ASP.NET 및 웹 개발 워크로드를 설치합니다.

Visual Studio 2012 및 Visual Studio 2013 ASP.NET 웹 페이지 대한 지원이 포함됩니다. (ASP.NET 웹 페이지 지원하기 위해 필요한 패키지는 Visual Studio를 설치할 때 설치됩니다.)

Visual Studio 2010에는 기본적으로 ASP.NET 웹 페이지 대한 지원이 포함되어 있지 않습니다. Visual Studio 2010에서 ASP.NET 웹 페이지 사용하려면 ASP.NET MVC 패키지를 설치해야 합니다. ASP.NET 웹 페이지 2를 얻으려면 ASP.NET MVC 4를 설치합니다.

다음 표에는 다양한 버전의 Visual Studio에서 ASP.NET 웹 페이지 대한 지원이 요약되어 있습니다.

Visual Studio 2010 Visual Studio 2012 Visual Studio 2013
ASP.NET 웹 페이지 2 ASP.NET MVC 4 설치 (포함) (포함)
ASP.NET 웹 페이지 3 NuGet을 통해 ASP.NET 웹 페이지 3으로 업데이트 (포함)

Visual Studio 2010을 사용하려면 Visual Studio 2010에서 ASP.NET 웹 페이지 대한 지원 설치를 참조하세요.

WebMatrix에서 Visual Studio 시작

WebMatrix에서 프로젝트를 시작하고 Visual Studio로 전환하려는 경우 WebMatrix는 Visual Studio에서 프로젝트를 쉽게 여는 단추를 제공합니다. 이 단추를 사용하려면 컴퓨터에 Visual Studio가 설치되어 있어야 합니다. 다음 이미지는 WebMatrix의 단추를 보여줍니다.

Visual Studio 시작

단추를 클릭하면 Visual Studio에서 프로젝트가 열립니다. 문제 없이 WebMatrix와 Visual Studio 간에 전환할 수 있습니다. 다른 환경에서 변경된 파일이 있고 최신 변경 내용을 가져오기 위해 다시 로드해야 하는 경우 알림이 표시됩니다.

Visual Studio에서 ASP.NET Razor 사이트 만들기

Visual Studio에서 ASP.NET Razor 웹 사이트를 만들려면 다음을 수행합니다.

  1. Visual Studio를 엽니다.

  2. 파일 메뉴에서 새 웹 사이트를 클릭합니다.

    새 웹 사이트 만들기

  3. 새 웹 사이트 대화 상자에서 사용할 언어(Visual C# 또는 Visual Basic)를 선택합니다.

  4. ASP.NET 웹 사이트(Razor) 템플릿을 선택합니다.

    razor 사이트

  5. 확인을 클릭합니다.

새 프로젝트가 있고 시작하는 데 도움이 되는 몇 가지 기본 웹 페이지로 채워집니다.

IntelliSense 사용

이제 사이트를 만들었으므로 Visual Studio에서 IntelliSense의 작동 방식을 확인할 수 있습니다.

  1. 방금 만든 웹 사이트에서 Default.cshtml 페이지를 엽니다.

  2. <h3> 페이지의 태그 뒤를 입력 @ServerInfo. 합니다(점 포함). IntelliSense가 드롭다운 목록에서 도우미에 사용 가능한 메서드를 ServerInfo 표시하는 방법을 확인합니다.

    Intellisense

  3. GetHtml 목록에서 메서드를 선택한 다음 Enter 키를 누릅니다. IntelliSense는 메서드를 자동으로 채웁니다. C#의 메서드와 마찬가지로 메서드 다음에 문자를 추가 () 해야 합니다. 메서드에 대해 완료된 코드는 GetHtml 다음 예제와 같습니다.

    @ServerInfo.GetHtml()
    
  4. Ctrl+F5를 눌러 페이지를 실행합니다. 브라우저에 표시될 때 페이지 모양은 다음과 같습니다.

    브라우저의 기본 페이지

  5. 브라우저를 닫습니다.

디버거 사용

  1. Default.cshtml 페이지의 맨 위에 로 시작하는 줄 다음에 다음 코드 줄을 추가합니다Page.Title.

    var myTime = DateTime.Now.TimeOfDay;
    
  2. 코드 왼쪽에 있는 편집기의 회색 여백에서 중단점을 추가하려면 이 새 줄 옆을 클릭합니다. 중단점은 무슨 일이 일어나고 있는지 볼 수 있도록 디버거에게 해당 시점에서 프로그램 실행을 중지하도록 지시하는 표식입니다.

    중단점 설정

  3. 메서드에 대한 호출을 ServerInfo.GetHtml 제거하고 해당 위치에 있는 변수에 @myTime 대한 호출을 추가합니다. 이 호출은 새 코드 줄에서 반환되는 현재 시간 값을 표시합니다.

  4. F5 키를 눌러 디버거에서 페이지를 실행합니다. 설정한 중단점에서 페이지가 중지됩니다. 다음 이미지는 중단점(노란색)이 있는 편집기에서 페이지의 모양을 보여 줍니다.

    디버그 중단점

  5. 디버그 도구 모음에서 한 단계씩 실행 단추를 클릭하거나 F11 키를 눌러 다음 코드 줄을 실행합니다. 이 단추를 클릭할 때마다 실행을 다음 코드 줄로 진행합니다.

    한 단계씩 단추

  6. 마우스 포인터를 myTime 마우스 포인터 위에 놓거나 로컬 및 호출 스택 창에 표시되는 값을 검사하여 변수 값을 검사합니다. Visual Studio는 변수의 값을 표시합니다.

    시간 값 표시

  7. 변수 검사 및 코드 단계별 실행이 완료되면 F5 키를 눌러 각 줄에서 중지하지 않고 페이지를 계속 실행합니다. 모든 코드를 단계별로 실행하면 브라우저에 페이지가 표시됩니다.

디버거 및 Visual Studio에서 코드를 디버그하는 방법에 대한 자세한 내용은 연습: Visual Web Developer에서 웹 페이지 디버깅을 참조하세요.

Visual Studio에서 MVC 프로젝트 ASP.NET Razor 사용

Razor 구문은 ASP.NET MVC 프로젝트에서도 광범위하게 사용됩니다. MVC는 동적 웹 사이트를 빌드하는 강력한 패턴 기반 방법입니다. ASP.NET 웹 페이지 사이트를 유지 관리하기 어려운 경우 ASP.NET MVC 애플리케이션으로 변환하는 것이 좋습니다. MVC 애플리케이션을 만드는 예제는 ASP.NET MVC 5를 사용하는 시작 참조하세요.

Visual Studio 2010에서 ASP.NET 웹 페이지 대한 지원 설치

이 섹션에서는 Visual Web Developer Express 2010 및 visual Studio용 ASP.NET 웹 페이지 도구를 설치하는 방법을 보여 있습니다.

  1. 웹 플랫폼 설치 관리자가 아직 없는 경우 다음 URL에서 다운로드합니다.

    https://www.microsoft.com/web/downloads/platform.aspx

  2. 웹 플랫폼 설치 관리자를 실행합니다.

  3. 제품 탭 클릭합니다.

    WebPI 제품 탭

  4. ASP.NET MVC 4(ASP.NET 웹 페이지 2용)를 검색한 다음 추가를 클릭합니다. 이러한 제품에는 ASP.NET Razor 웹 사이트를 빌드하기 위한 Visual Studio 도구가 포함됩니다.

    WebPi 설치 옵션

  5. 설치를 클릭하여 설치를 완료합니다.