-
ASP.NET MVC 자습서(2) - 뷰 추가ASP.NET 2020. 3. 20. 11:31반응형
HelloWorld 컨트롤러를 생성하면서 Views에 HelloWorld 폴더가 추가 되었지만 어떠한 데이터도 포함하고 있지 않다. 레이아웃을 가지고 있는 MVC5 페이지를 추가하자
페이지에는 Layout의 경로가 입력되어 있다.
생성한 Index 페이지로 접근 시
컨트롤러에 입력한 값이 그대로 리턴된다.
Controllers.HelloWorldController.cs
View 파일이 생성되었으니 return 값을 View() 로 바꿔주도록 하자
View 파일을 리턴하기 위해서 타입은 ActionReesult 로 입력해준다.
출력 결과는 Shared 폴더의 _Layout.cshtml과 같다.
_Layout.cshtml 은 생성할 웹페이지의 기본값을 가지고 있으며
Index.cshtml은 _Layout.cshtml을 참조하고 있다.
Index.cshtml ( Views.HelloWorld ) 페이지에 코드를 추가해보자.
출력 결과는
내용이 추가되었다.
Views.Shared._Layout.cshtml
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>@ViewBag.Title - 내 ASP.NET 애플리케이션</title> @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") </head> <body> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> @Html.ActionLink("애플리케이션 이름", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" }) </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li>@Html.ActionLink("홈", "Index", "Home")</li> <li>@Html.ActionLink("정보", "About", "Home")</li> <li>@Html.ActionLink("연락처", "Contact", "Home")</li> </ul> </div> </div> </div> <div class="container body-content"> @RenderBody() <hr /> <footer> <p>© @DateTime.Now.Year - 내 ASP.NET 애플리케이션</p> </footer> </div> @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/bootstrap") @RenderSection("scripts", required: false) </body> </html>위에서 출력된 사진을 보면 페이지 왼쪽 상단에 [애플리케이션 이름] 과
페이지 하단에 [ 내 ASP.NET 애플리케이션] 이라고 적혀있는것을 볼 수 있다.
출력할 페이지에서 _Layout.cshtml을 참조하고 있는 이상 계속해서 출력될 문구이기 때문에 좀 더 멋있어 보이도록 수정 할 필요가 있다.
출력결과
참조하고 있던 레이아웃 페이지를 주석처리 하면 어떤 결과가 실행될까
출력결과
참조하기 전과 참조하고 나서 출력한 화면이 같다.
그이유는 Views폴더 내에 위치한 _ViewStart.cshtml 이 아래의 사진과 같이 공통으로 _Layout.cshtml 을 참조하도록 명시하고 있기 때문이다.
그렇기 때문에 생성하는 View 파일은 _Layout.cshtml을 참조하도록 명시하고 있는 코드를 생략이 가능하다.
ViewBag.Title 수정
타이틀에서 Index 라고 적혀있던 부분이 MVAPP 으로 바뀐것을 볼 수 있다. Layout 페이지에서 직접 수정하지 않아도 개별의 View 에서 ViewBag 명령을 통하여 출력될 페이지의 디자인이 수정 가능하다.
컨트롤러 -> 뷰페이지 데이터 전달
컨트롤러 클래스는 들어오는 URL요청에 대한 응답으로 호출된다. 브라우저에서의 요청을 처리하는 코드를 작성하고, 데이터베이스에 접근하여 데이터를 검색하며 브라우저에게 응답할 자료들을 결정한다. 최종으로 뷰 템플릿을 사용하여 브라우저에게 응답할 HTML서식을 지정하고 응답한다.
Controllers. HelloWorldController.cs
public ActionResult Welcome(string name, int numTimes = 1) { ViewBag.Message = "Hello " + name; ViewBag.Numtimes = numTimes; return View(); }Welcome 함수에 View.Bag을 통해서 전달할 데이터를 입력하고
return 값을 View() 로 수정하였다.
View를 리턴하기 위해서 Views.HelloWorld 에 Welcome.cshtml을 추가해주자
View페이지 생성에 대한 두번째 설명이므로 뒤의 내용에서 View 페이지를 생성해야 할 때는 따로 설명을 하지 않을것이다. Controller가 가진 함수이름에 따라서 View페이지를 생성하는것만 기억하도록 하자.
생성된 페이지는 위와 같다.
Views.HelloWorld.Welcome.cshtml
@{ ViewBag.Titme = "Welcome"; } <h2>Welcome</h2> <ul> @for (int i = 0; i < ViewBag.Numtimes; i++) { <li>@ViewBag.message</li> } </ul>코드를 위와같이 추가해주자.
위에서 확인할 수 있는 것은
함수를 실행하기 위해서는 앞에 @를 붙여주면 되는 것이다.
Controllers.HelloWorld - Welcome
전에 생성한 Welcome 함수에서는 name값과 numTimes 값을 매개변수로 받아서
ViewBag.Message 명령은 name 값을
ViewBag.Numtimes = 명령은 numTimes 값을 View 로 보내게 된다.
View 파일은 numTimes 값을 반복문에서 갖게되고
name은 반복문 안에서 출력하는 구조이다.
https://localhost:44357/HelloWorld/welcome?name=jay&numtimes=5위 코드와 같이 name과 numtimes을 파라메터 값으로 입력하여 페이지에 요청을 한 뒤 출력 결과를 보자.
'ASP.NET' 카테고리의 다른 글
ASP.NET MVC 자습서(4) -연결 문자열 만들기 및 SQL Server LocalDB 사용 (0) 2020.03.20 ASP.NET MVC 자습서(3) - 모델 추가 (0) 2020.03.20 ASP.NET MVC 자습서(1) - 컨트롤러 추가 (0) 2020.03.20 [ASP.NET] 회원관리 폼 만들기 - 1 (0) 2020.03.18 ASP.NET에서 JavaScript로 C# 함수 호출하기 (0) 2020.03.16