티스토리 뷰
-
입력화면 만들기
이제 드디어 Razor를 사용해서 동적 화면을 만들어 보겠습니다
먼저, Views>Home 폴더에 Create.cshml 파일을 생성해 주세요
그러면 생성된 Create.cshtml 파일이 나타납니다
간단하게 body 내용을 수정합니다
Create.cshtml
...
<body>
<div>
할일 입력하기
</div>
</body>
...
그런데, cshtml파일을 생성했다고 바로 화면이 나타나는게 아니예요
Controller에 등록해 주어야 합니다
HomeController.cs 에 다음을 추가해 주세요
HomeController.cs
...
public ActionResult Create()
{
return View();
}
...
Create.cshtml 파일이 열려있는 상태에서 F5키를 눌러서 페이지를 띄워보세요
또는 페이지를 띄운 후 http://localhost:56901/Home/Create 로 접근해도 됩니다
그러면 다음과 같은 화면이 나옵니다
이제 할일을 입력할 수 있는 화면을 만들어 보죠
각 Razor 페이지는 자신이 사용하는 model을 지정할 수 있습니다
model을 이용해 쉽게 데이터와 화면을 연동시킬 수 있죠
Create.cshtml의 경우 할일을 입력하는 것이니 model은 Todo가 됩니다
model은 다음과 같이 지정할 수 있습니다
Create.cshtml
@model TodoListRazor.Models.Todo
...
그리고 model을 화면을 띄울 때 만들어서 넘겨줘야 합니다
다음과 같이 Action을 수정합니다
HomeController.cs
...
public ActionResult Create()
{
return View(new Todo());
}
...
이 model을 이용해서 model의 값을 입력하는 UI를 만듭니다
어차피 할일 내용만 입력하면 되겠네요
Create.cshtml
...
<body>
<div>
@Html.ActionLink("새 할일", "Create")
@Html.ActionLink("할일 목록", "Index")
</div>
<br/>
<div>
할일 입력하기
@using (Html.BeginForm()) {
@Html.LabelFor(x => x.Contents)
@Html.TextBoxFor(x => x.Contents)
<button type="submit">저장</button>
}
</div>
</body>
...
드디어 Razor 구문이 사용되었습니다
-
@Html.ActionLink는 action 이름을 이용해 페이지링크를 만들어 줍니다. <a> 태그가 생성되죠
-
앞으로 만들 두 개의 페이지 링크를 연결했습니다. 물론, 지금 할일 목록을 누르면 에러가 발생합니다
-
@using(Html.BeginForm()){ } 은 <form>태그를 편리하게 생성해 줍니다
-
@Html.LabelFor(x => x.Contents)는 model의 Contents속성을 위한 <label> 태그를 생성해 줍니다
-
@Html.TextBoxFor(x => x.Contents)는 model의 Contents속성을 위한 <input type="text"> 태그를 생성해 줍니다
이들이 Razor 구문이며 model과 쉽게 연동되었습니다
F5를 눌러 화면을 확인해 볼까요?
-
Todo 입력하기
할일은 입력할 수 있는 화면을 만들었으니 진짜로 입력이 되도록 해야 하겠죠?
지금은 입력을 하고 저장을 눌러도 아무런 반응이 없습니다
위에서 만든 form post 요청을 받을 수 있는 action이 필요합니다
그리고 그 action에서 할일을 저장해야 겠죠
그래서 다음과 같이 HomeController에 action을 새로 하나 만듭니다
메소드명은 Create로 동일하지만 매개변수 Todo가 존재해야 합니다
post로 전달된 정보를 받아야 하기 때문이지요
HomeController.cs
...
[HttpPost]
public ActionResult Create(Todo todo)
{
todo.No = TodoList.Count > 0 ? TodoList.Max(x => x.No) + 1 : 1;
TodoList.Add(todo);
return View();
}
...
-
[HttpPost] 는 post 요청을 받겠다는 attribute 선언입니다
-
todo로 전달된 할일 요청 정보가 들어 옵니다
-
할일 번호(No)는 현재 목록 중 최대값 +1을 지정합니다
-
DB를 대체하기 위해 미리 만들어 놓은 TodoList 목록에 할일을 추가합니다
-
저장한 이후에는 다시 입력화면으로 돌아갑니다
이제 다시 F5를 눌러 화면 띄우고 저장을 눌러보면 저장이 되는지 잘 모르겠습니다
현재단계에서 확인해 보고 싶으면 action에 중단점을 찍고 디버깅을 해보면 알 수 있습니다
그래도 화면에 내가 저장한 목록이 나오면 좋겠는데 확인할 수 없으니 답답하죠?
이제, 입력한 할일 목록을 확인하는 화면을 만들어 보겠습니다
'Dev 일반 > ASP.NET Razor' 카테고리의 다른 글
| [ASP.NET Razor] 7. Todo 삭제하기 (0) | 2019.05.10 |
|---|---|
| [ASP.NET Razor] 6. Todo 조회화면 만들기 (0) | 2019.05.10 |
| [ASP.NET Razor] 4. 모델 만들기 (0) | 2019.05.09 |
| [ASP.NET Razor] 3. 프로젝트 만들기 (0) | 2019.05.09 |
| [ASP.NET Razor] 2. Todo 리스트 웹앱 만들기 시작 (0) | 2019.05.09 |