Eungene's Imaginations...

두번째 ASP.net MVC 기본(Model) 본문

Programming/ASP.net(MVC&Core)

두번째 ASP.net MVC 기본(Model)

Eungene's 2015. 11. 17. 18:56
728x90
반응형

Model과 Controller, View에 대한 관계 정리


1. 우선 솔루션 탐색기에 Models 폴더에서 오른쪽 마우스를 누른 후 [추가] --> [새항목]을 눌러준 후에 클래스를 생성 해준다.
  클래스의 이름은 아무거나 해주어도 상관 없지만, 계속 우리들이 model을 참조할 때마다 써야 하니~ 쓰기 편한 걸로 하자.
  나 같은 경우에는 Board.cs로 생성해줌

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
using System.Collections.Generic;
using System.Linq;
using System.Web;
 
namespace practiceModel.Models
{
    public class Board
    {
        public int ItemId { get; set; }
        public string Title { get; set; }
        public string Contents { get; set; }
        public string Author { get; set; }
        public DateTime Date { get; set; }
    }
}
cs

이 코드에 핵심은 메소드들 마다 get;과 set;이 있는 것이 있는데, 이런 것들을 겟터, 셋터라고 이야기 한다.
간단하게 풀이하자면, 이 Board모델 클래스를 참조하거나 정의할 때, ItemID라는 메소드에 int형의 값을 정의해주고,
사용 가능하다는 부분을 명시하고 있다.

만약, get;이 없다면, ItemID는 값에 대한 대입(setting)만 가능하고, 가져오는(getting)것은 불가능하다.

이 getter와 setter를 이용하여 어떠한 값을 대입시킬 것인지에 대한 부분도 정의가 가능한데, 그 부분은
다음에 언급하도록 하겠다.



2. 이어서 HomeController.cs 파일에 Model을 이용하여 데이터를 처리해줄 것이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
 
using practiceModel.Models;
 
 
namespace practiceModel.Controllers
{
    public class HomeController : Controller
    {
        public IEnumerable<Board> getModels()
        {
            IEnumerable<Board> exModels = new[]
            {
                new Board {
                    ItemId =1,
                    Title ="TEST1",
                    Contents ="TEST1",
                    Author ="Admin",
                    Date =DateTime.Now.Date
                },
                new Board {
                    ItemId =2,
                    Title ="TEST2",
                    Contents ="TEST2",
                    Author ="Admin",
                    Date =DateTime.Now.Date
                },
                new Board {
                    ItemId =3,
                    Title ="TEST3",
                    Contents ="TEST3",
                    Author ="Admin",
                    Date =DateTime.Now.Date
                },
                new Board {
                    ItemId =4,
                    Title ="TEST4",
                    Contents ="TEST4",
                    Author ="Admin",
                    Date =DateTime.Now.Date
                }
            };
            return exModels;
        }
        // GET: Home
        public ActionResult Index()
        {
            IEnumerable<Board> exModels = getModels();
            
            return View(exModels);
        }
    }
}
cs


위 소스코드를 보면 나와있지만, using practiceModel.Models; 를 추가해서 해당 프로젝트에 Models를 참조한다는것을
명시해 주어야 한다.

그 후에 우리는 Models에 정의해 놓은 형식 그대로 데이터를 추가해준다.
그 소스들이 public IEnumerable<Board> getModels() 메소드에 내용들이다.

getmodels()메소드들을 보면 특이한 점은 없다. 그저, 데이터를 추가해줄 뿐이고, return 값으로 IEnumerable형에 값을
넘겨줄 뿐이다.
이번 예제를 살펴보면서 IEnumerable 형에 대해서 굉장히 생소했는데, 그냥 간단하게 Collection과 같은 열거형이라고 생각하면
편하다.
IEnumerable옆에 <>안에 값은 열거할 개체의 형식을 지정해 주는 것이다.



3. 지금까지의 작업은 모델을 사용하기 위한 작업이었을 뿐 Model을 직접적으로 사용자들 눈에 보여주기 위해서
다시 작업을 해주어야 한다.

ActionResult Index()메소드를 살펴보면 IEnumerable<Board>에 exModels 변수를 추가 후 전에 만들어 놓았던,

getModels() 메소드를 대입해준다.


그 후, View를 생성할 때 exModels값을 View에 전달하는 것으로 Controller의 일을 마무리 한다.



4. 이제 View단에서 직접적으로 Model을 어떻게 뿌려줄지 작업을 해주어야 한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
@model IEnumerable<practiceModel.Models.Board>
 
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div
        <table border="1">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Title</th>
                    <th>User</th>
                    <th>Date</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var i in Model)
                {
                    <tr>
                        <td>@i.ItemId</td>
                        <td>@i.Title</td>
                        <td>@i.Author</td>
                        <td>@i.Date</td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
</body>
</html>
 
cs


우선, html소스에서 가장 눈여겨 봐야할 점은 @(골뱅이)의 역할이다.

html소스임에도 불구하고, <tbody>태그 안 쪽을 살펴보면, foreach문이 있는 것을 확인할 수 있다.


보통 저런 반복문을 사용해야할 경우에는 Javascript를 이용하여 쓰는 경우가 태반이다.
하지만 @(골뱅이)를 이용하면, C#의 구문도 html코드 내에서 쓸 수 있게 하면서, 코드에 유연성을 증대 시켜주었다.

여기서 중요한 점은 첫째 줄에 @model IEnumerable 구문인데~
Model 이라는 프로퍼티의 자료형을 IEnumerable<>로 하겠다고 선언한 것이다.

그리고 <tbody>태그안에서 HomeController에서 생성 해주었던 Model 컬렉션들을 뿌려주기 위해서
foreach문을 이용하여 각각의 Attributes들을 출력해주게 되어 있다.


결과값은 위와 같이 출력되어진다.

반응형
Comments