2부: Controllers

아티클
07/13/2023

MVC Music Store는 웹 개발을 위해 ASP.NET MVC 및 Visual Studio를 사용하는 방법을 단계별로 소개하고 설명하는 자습서 애플리케이션입니다.

MVC Music Store는 온라인으로 음악 앨범을 판매하고 기본 사이트 관리, 사용자 로그인 및 쇼핑 카트 기능을 구현하는 간단한 샘플 저장소 구현입니다.

이 자습서 시리즈에서는 ASP.NET MVC Music Store 샘플 애플리케이션을 빌드하기 위해 수행되는 모든 단계를 자세히 설명합니다. 2부에서는 컨트롤러를 다룹니다.

기존 웹 프레임워크에서는 들어오는 URL이 일반적으로 디스크의 파일에 매핑됩니다. 예를 들어 "/Products.aspx" 또는 "/Products.php"와 같은 URL에 대한 요청은 "Products.aspx" 또는 "Products.php" 파일로 처리될 수 있습니다.

웹 기반 MVC 프레임워크는 URL을 서버 코드에 약간 다른 방식으로 매핑합니다. 들어오는 URL을 파일에 매핑하는 대신 클래스의 메서드에 URL을 매핑합니다. 이러한 클래스는 "컨트롤러"라고 하며 들어오는 HTTP 요청을 처리하고, 사용자 입력을 처리하고, 데이터를 검색 및 저장하고, 클라이언트로 다시 보낼 응답을 결정합니다(HTML 표시, 파일 다운로드, 다른 URL로 리디렉션 등).

HomeController 추가

사이트의 홈 페이지에 URL을 처리할 컨트롤러 클래스를 추가하여 MVC Music Store 애플리케이션을 시작합니다. ASP.NET MVC의 기본 명명 규칙을 따르고 HomeController라고 합니다.

솔루션 탐색기 내의 "컨트롤러" 폴더를 마우스 오른쪽 단추로 클릭하고 "추가"를 선택한 다음,"컨트롤러..."를 선택합니다. 명령:

음악 저장소에 홈 컨트롤 옵션을 추가하기 위한 다양한 목록 옵션의 스크린샷.

그러면 "컨트롤러 추가" 대화 상자가 표시됩니다. 컨트롤러 이름을 "HomeController"로 지정하고 추가 단추를 누릅니다.

단추를 만들기 위한 다양한 옵션이 포함된 홈 컨트롤러 대화 상자의 스크린샷

그러면 다음 코드와 함께 새 파일 HomeController.cs가 생성됩니다.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
 
namespace MvcMusicStore.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/
        public ActionResult Index()
        {
            return View();
        }
    }
}

최대한 간단하게 시작하려면 Index 메서드를 문자열을 반환하는 간단한 메서드로 바꾸겠습니다. 다음 두 가지 변경을 수행합니다.

ActionResult 대신 문자열을 반환하도록 메서드를 변경합니다.
"Hello from Home"을 반환하도록 return 문을 변경합니다.

이제 메서드는 다음과 같이 표시됩니다.

public string Index()
{
    return "Hello from Home";
}

애플리케이션 실행

이제 사이트를 실행해 보겠습니다. 웹 서버를 시작하고 다음 중 어떤 것을 사용하여 사이트를 사용해 보세요.

디버그 ⇨ 디버깅 시작 메뉴 항목을 선택합니다.
도구 모음에서 녹색 화살표 단추를 클릭합니다
바로 가기 키 F5를 사용합니다.

위의 단계를 사용하면 프로젝트가 컴파일된 다음 Visual Web Developer에 기본 제공되는 ASP.NET 개발 서버가 시작됩니다. 화면 아래쪽 모서리에 ASP.NET 개발 서버가 시작되었음을 나타내는 알림이 표시되고 실행 중인 포트 번호가 표시됩니다.

개발 서버가 localhost 26641에서 시작되었음을 나타내는 페이지의 오른쪽 아래 모서리에 표시되는 팝업 알림의 스크린샷.

그러면 Visual Web Developer는 URL이 웹 서버를 가리키는 브라우저 창을 자동으로 엽니다. 이렇게 하면 웹 애플리케이션을 빠르게 시도할 수 있습니다.

localhost에서 개발 서버가 시작될 때 자동으로 시작된 브라우저 창의 스크린샷 창에는 브라우저에 '집에서 안녕하세요'라는 단어가 표시됩니다.

새 웹 사이트를 만들고, 3줄 함수를 추가했으며, 브라우저에 텍스트가 있습니다. 로켓 과학은 아니지만 시작입니다.

참고: Visual Web Developer에는 임의의 무료 "포트" 번호로 웹 사이트를 실행하는 ASP.NET 개발 서버가 포함되어 있습니다. 위의 스크린샷에서 사이트는 에서 http://localhost:26641/실행되므로 포트 26641을 사용합니다. 포트 번호가 다릅니다. 이 자습서에서 /Store/Browse와 같은 URL에 대해 이야기할 때 포트 번호 다음에 표시됩니다. 포트 번호가 26641이라고 가정하면 /Store/Browse로 이동하면 로 이동됩니다 http://localhost:26641/Store/Browse.

StoreController 추가

사이트의 홈 페이지를 구현하는 간단한 HomeController를 추가했습니다. 이제 음악 저장소의 검색 기능을 구현하는 데 사용할 다른 컨트롤러를 추가해 보겠습니다. Microsoft Store 컨트롤러는 다음 세 가지 시나리오를 지원합니다.

음악 스토어의 음악 장르 목록 페이지
특정 장르의 모든 음악 앨범을 나열하는 찾아보기 페이지
특정 음악 앨범에 대한 정보를 보여 주는 세부 정보 페이지

먼저 새 StoreController 클래스를 추가하겠습니다. 아직 실행하지 않은 경우 브라우저를 닫거나 디버그 ⇨ 디버깅 중지 메뉴 항목을 선택하여 애플리케이션 실행을 중지합니다.

이제 새 StoreController를 추가합니다. HomeController와 마찬가지로 솔루션 탐색기 내의 "컨트롤러" 폴더를 마우스 오른쪽 단추로 클릭하고 추가> 컨트롤러 메뉴 항목을 선택하여 이 작업을 수행합니다.

음악 저장소 애플리케이션에 스토어 컨트롤러 옵션을 추가하기 위한 선택 항목이 있는 창 메뉴의 스크린샷.

새 StoreController에는 이미 "Index" 메서드가 있습니다. 이 "인덱스" 메서드를 사용하여 음악 스토어의 모든 장르를 나열하는 목록 페이지를 구현합니다. 또한 StoreController에서 처리하려는 두 가지 다른 시나리오인 찾아보기 및 세부 정보를 구현하는 두 가지 메서드를 추가합니다.

컨트롤러 내에서 이러한 메서드(인덱스, 찾아보기 및 세부 정보)를 "컨트롤러 작업"이라고 하며 HomeController.Index()작업 메서드에서 이미 확인한 것처럼 해당 작업은 URL 요청에 응답하고(일반적으로) URL을 호출한 브라우저 또는 사용자에게 다시 전송해야 하는 콘텐츠를 결정하는 것입니다.

"Hello from Store.Index()" 문자열을 반환하도록Index() 메서드를 변경하여 StoreController 구현을 시작하고 Browse() 및 Details()에 유사한 메서드를 추가합니다.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
 
namespace MvcMusicStore.Controllers
{
    public class StoreController : Controller
    {
        //
        // GET: /Store/
        public string Index()
        {
            return "Hello from Store.Index()";
        }
        //
        // GET: /Store/Browse
        public string Browse()
        {
            return "Hello from Store.Browse()";
        }
        //
        // GET: /Store/Details
        public string Details()
        {
            return "Hello from Store.Details()";
        }
    }
}

프로젝트를 다시 실행하고 다음 URL을 찾습니다.

/저장소
/Store/Browse
/Store/Details

이러한 URL에 액세스하면 컨트롤러 내에서 작업 메서드가 호출되고 문자열 응답이 반환됩니다.

U R L에 액세스할 때 호출되는 작업 메서드의 예를 보여 주는 창 브라우저의 스크린샷. Microsoft Store의 Hello.Details() 문자열 응답을 보여 줍니다.

이는 훌륭하지만 상수 문자열일 뿐입니다. URL에서 정보를 가져와서 페이지 출력에 표시하도록 동적으로 만들어 보겠습니다.

먼저 URL에서 쿼리 문자열 값을 검색하도록 Browse 작업 메서드를 변경합니다. 작업 메서드에 "genre" 매개 변수를 추가하여 이 작업을 수행할 수 있습니다. 이 ASP.NET MVC는 호출될 때 "genre"라는 쿼리 문자열 또는 양식 게시 매개 변수를 작업 메서드에 자동으로 전달합니다.

//
// GET: /Store/Browse?genre=Disco
public string Browse(string genre)
 {
    string message = HttpUtility.HtmlEncode("Store.Browse, Genre = "
+ genre);
 
    return message;
 }

참고: HttpUtility.HtmlEncode 유틸리티 메서드를 사용하여 사용자 입력을 삭제합니다. 이렇게 하면 사용자가 /Store/Browse와 같은 링크를 사용하여 보기에 Javascript를 삽입할 수 없나요? Genre=<script>window.location=''<http://hackersite.com/script>.

이제 /Store/Browse로 이동해 보겠습니다. Genre=Disco

'genre' 매개 변수를 추가할 때 쿼리 문자열 값을 검색할 때 URL에서 반환되는 문자열(Store.Browse, Genre = Disco)의 또 다른 예제를 보여 주는 스크린샷

다음으로 세부 정보 작업을 변경하여 ID라는 입력 매개 변수를 읽고 표시해 보겠습니다. 이전 메서드와 달리 ID 값을 querystring 매개 변수로 포함하지 않습니다. 대신 URL 자체에 직접 포함하겠습니다. 예: /Store/Details/5.

ASP.NET MVC를 사용하면 아무 것도 구성하지 않고도 쉽게 이 작업을 수행할 수 있습니다. ASP.NET MVC의 기본 라우팅 규칙은 작업 메서드 이름 뒤의 URL 세그먼트를 "ID"라는 매개 변수로 처리하는 것입니다. 작업 메서드에 ID라는 매개 변수가 있는 경우 ASP.NET MVC가 자동으로 URL 세그먼트를 매개 변수로 전달합니다.

//
// GET: /Store/Details/5
public string Details(int id)
 {
    string message = "Store.Details, ID = " + id;
 
    return message;
 }

애플리케이션을 실행하고 /Store/Details/5로 이동합니다.

U R L 세그먼트에서 전달되는 매개 변수의 스크린샷 매개 변수는 Store.Details, ID=5를 읽는 문자열입니다.

지금까지 수행한 작업을 요약해 보겠습니다.

Visual Web Developer에서 새 ASP.NET MVC 프로젝트를 만들었습니다.
ASP.NET MVC 애플리케이션의 기본 폴더 구조에 대해 설명했습니다.
ASP.NET 개발 서버를 사용하여 웹 사이트를 실행하는 방법을 알아보았습니다.
HomeController 및 StoreController라는 두 개의 컨트롤러 클래스를 만들었습니다.
URL 요청에 응답하고 브라우저에 텍스트를 반환하는 작업 메서드를 컨트롤러에 추가했습니다.

이전 다음

다음을 통해 공유

2부: Controllers

HomeController 추가

애플리케이션 실행

StoreController 추가

피드백

피드백

추가 리소스