[ASP.NET MVC] Project 생성, MVC Hello World!

어떤 언어든지 처음 배울 때 하는 Hello World! 출력하기!

ASP.Net MVC 프로젝트를 처음 만들어보기 때문에 Hello World를 출력해 보자. 

Visual Studio 2013을 기준으로 설명할 예정이다.

[그림 1-1]

Visual Studio에서 파일 -> 새로만들기 -> 프로젝트를 선택하면 [그림1-1]화면이 나오는데 여기에서 템플릿 -> Visual C# -> 웹 -> Visual Studio 2012를 선택하면 프로젝트 목록이 나온다. 우리는 MVC프로젝트를 생성을 위해 ASP.NET MVC 4 웹 응용 프로그램을 선택하고 이름을 입력 후 확인을 클릭한다.

[그림 1-2]

프로젝트를 템플릿을 선택하는 화면이 나오는데 자신이 필요한 템플릿에 따라 선택 후 확인을 누르면 된다. 여기에서는 인터넷 응용프로그램을 선택한다.

[그림 1-3]

프로젝트를 생성하고 나면 [그림 1-3]과 같이 기본적인 폴더나 필요한 파일등을 생성해준다.

폴더를 보면 MVC패턴으로 개발할 수 있게 Controllers, Models, Views폴더로 나누어져 있다.

다른 폴더들도 용도에 맞게 개발할 수 있도록 미리 만들어져 있는 모습을 볼 수 있다.

[그림 1-3]을 보면 Controllers, Models, Views안에 파일이 미리 만들어져 있는데 이것은 템플릿을 인터넷 응용프로그램으로 선택했기 때문이다.

[그림 1-4]

프로젝트 생성은 끝났으니 컨트롤러를 추가해보자.

솔루션 탐색기에서 Controllers 폴더를 마우스오른족버튼 클릭 -> 추가 -> 컨트롤러를 선택한다.

[그림 1-5]

컨트롤러 이름을 입력하는 화면이 나오는데 컨트롤러 이름을 정할 때 Controller는 규칙처럼 사용하기 위해 Default1에 Drag되어 있다. 

Default1대신 MyFirst를 입려하여 MyFirstController를 만들어보자.

[그림 1-6]

컨트롤러를 추가하면 [그림 1-6]처럼 Index()함수가 기본적으로 생성된다. 이제 Index함수가 표시할 뷰페이지를 추가해보자.

함수 이름인 Index()에서 마우스 오른쪽 버튼을 클릭 -> 뷰 추가를 누른다.

[그림 1-7]

뷰페이지 이름을 정하고 추가를 누른다. 그러면 솔루션탐색기에서 Views폴더 밑에 MyFirst폴더가 생성되고 그 밑에 Index.cshtml이 생성된다.

Index.cshtml페이지에는 html을 작성하여 화면에 보이도록 하면된다.

@{ ViewBag.Title = "Index"; } <h2>Index</h2> <h2>Hello World MVC!!</h2> </span>

위에 코드를 보면 html의 기본적인 구조인 haed, title, body와 같은 구성이 없기 때문에 이상하게 느껴질 수 있다. 

하지만 솔루션 탐색기의 Shared 폴더 밑에 _Layout.cshtml 파일에 기본 레이아웃이 정의 되어있다.

실제 Index.cshtml에서는 필요한 화면만 구성하면 된다.

[그림 1-8]

이제 모든 파일을 저장, 빌드할 후 웹브라우저에서 url입력하여 확인해보면 [그림 1-8]과 같이 Hello World MVC!!가 출력되는 것을 볼 수 있다.

뷰를 확인 하기 위해 Url입력은 첫 번째 / 다음에 컨트롤러이름인 MyFirst, 그 다음 / 뒤에 뷰이름인 Index를 입력하면 된다. 

또 다른 뷰페이지 확인방법은 솔루션 탐색기의 Views 폴더 밑에 보려고 하는 뷰 페이지를 마우스 오른쪽 버튼 클릭해보면 브라우저에서 보기항목이 잇는데

클릭하면 된다.