ASP.NET

04.MVC 모델(Model) 추가하기

Godffs 2014. 5. 9. 16:31
반응형

MVC에서 모델은 응용프로그램에서 가장 중요한 부분을 하고 있습니다.
모델을 추가합니다.

Models폴더에서 클레스 파일을 추가합니다.


추가한 클레스에서 코드를 작성합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
 
namespace MvcApplication2.Models
{
    public class Godffs_Model
    {
        public string ID { get; set; }
        public string NAME { get; set; }
        public int AGE { get; set; }
        public bool SEX { get; set; }
    }
}

링크를 통해서 새 페이지를 열고 새 페이지에서 모델을 사용하도록 하겠습니다.
링크를 디자인 페이지를 수정합니다

 Index.cshtml
 
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
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <title>Index</title>
</head>
<body>
    <div>
        안녕하세요. 여기는 뷰 페이지 입니다.
        
        <br />
 
        @ViewBag.Hello
 
        <br />
 
        @*Html.ActionLink("보여질이름", "실행될 액션");*@
        @Html.ActionLink("NewPage", "NewForm");
    </div>
</body>
</html>
 

다음 Controller.cs에서 코드를 추가합니다.
 GodffsController.cs
 
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
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
 
namespace MvcApplication2.Controllers
{
    public class GodffsController : Controller
    {
        //
        // GET: /Godffs/
 
        //public ActionResult Index()
        //{
        //    return View();
        //}
 
        //public string Index()
        //{
        //    return "안녕하세요~";
        //}
 
        public ViewResult Index()
        {
            string str_Message = "여기는 동적으로 출력합니다.";
            ViewBag.Hello = str_Message;
 
            return View();
        }
 
        [HttpGet]
        public ViewResult NewForm()
        {
            return View();
        }
    }
}
 

다음 새로 추가한 메서드 NewFrom()안에 View에서 영역을 지정하고 마우스 오른쪽 클릭하여 뷰페이지를 추가합니다.
강력한 형식의 뷰 만들기를 체크 하시고 모델 클레스에서 추가한 모델로 선택을 합니다.


액션메서드에 대응하기 위해서 추가를 진행하였습니다.
이렇게 되면 뷰에서 HTML 페이지에서 모델 클레스에 있는 속성들을 불러와 사용이 가능하기 때문입니다.
추가한 뷰 페이지 상단에 보니깐 @model 하고 선언이 되어 있네요.

간단한 입력폼을 만들어 봅니다.
 NewForm.cshtml
 
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
@model MvcApplication2.Models.Godffs_Model
 
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <title>NewForm</title>
</head>
<body>
    <div>
        @using (Html.BeginForm())
        {
            <p>ID : @Html.TextBoxFor(a => a.ID )</p>
            <p>이름 : @Html.TextBoxFor(a => a.NAME)</p>
            <p>나이 : @Html.TextBoxFor(a => a.AGE)</p>
            <p>
                성별 @Html.DropDownListFor(a => a.SEX, new[]{
                                            new SelectListItem() {Text = "남자", Value="M", Selected = true },
                                            new SelectListItem() {Text = "여자", Value="W"}
                                        })
            </p>
            <input type="submit" value="확인" />
        }
    </div>
</body>
</html>
 


확인 버튼을 클릭 했을때 입력했던 내용들을 출력하도록 코드를 작성합니다.
먼저 버튼을 클릭 했을때 새로운 페이지에 내가 입력한 내용을 보여주고 싶어서
controller.cs 에서 코드를 수정하고...
 GodffsController.cs
 
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
using MvcApplication2.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
 
namespace MvcApplication2.Controllers
{
    public class GodffsController : Controller
    {
        //
        // GET: /Godffs/
 
        //public ActionResult Index()
        //{
        //    return View();
        //}
 
        //public string Index()
        //{
        //    return "안녕하세요~";
        //}
 
        public ViewResult Index()
        {
            string str_Message = "여기는 동적으로 출력합니다.";
            ViewBag.Hello = str_Message;
 
            return View();
        }
 
        [HttpGet]
        public ViewResult NewForm()
        {
            return View();
        }
 
        [HttpPost]
        public ViewResult NewForm(Godffs_Model dataModel)
        {
            return View("dataViewPage", dataModel);
        }
    }
}
 

Post방식으로 메서드를 만들었고...다음 dataViewPage라는 이름으로 뷰 페이지를 만들고...
모델에서 넘겨받은 데이터를 화면에 보여줘야 하니깐 코드를 작성하고...
 dataViewPage.cshtml
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
@model MvcApplication2.Models.Godffs_Model
 
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <title>dataViewPage</title>
</head>
<body>
    <div>
        <p>@Model.ID</p>
        <p>@Model.NAME</p>
        <p>@Model.AGE</p>
        <p>@Model.SEX</p>
    </div>
</body>
</html>
 

다했다! 결과 확인

입력을 하고 확인버튼 클릭


결과가 잘 나왔습니다. 근데...성별에 value를 'M'으로 했는데..False로 나옵니다.
아...제가 성별을 bool 타입으로 했네요...입력한 결과를 보여주는 페이지를 수정합니다.

 dataViewPage.cshtml
 
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
@model MvcApplication2.Models.Godffs_Model
 
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <title>dataViewPage</title>
</head>
<body>
    <div>
        <p>@Model.ID</p>
        <p>@Model.NAME</p>
        <p>@Model.AGE</p>
        
        @*<p>@Model.SEX</p>*@
        <p>
            @if (Model.SEX == true) { 
                @:남자에요.
            }
            else{
                @:여자에요.
            }
        </p>
    </div>
</body>
</html>
 

다음 입력화면에서 성별부분을 수정합니다.
 NewForm.cshtml
 
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
@model MvcApplication2.Models.Godffs_Model
 
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <title>NewForm</title>
</head>
<body>
    <div>
        @using (Html.BeginForm())
        {
            <p>ID : @Html.TextBoxFor(a => a.ID )</p>
            <p>이름 : @Html.TextBoxFor(a => a.NAME)</p>
            <p>나이 : @Html.TextBoxFor(a => a.AGE)</p>
            <p>
                성별 @Html.DropDownListFor(a => a.SEX, new[]{
                                            new SelectListItem() {Text = "남자", Value=bool.TrueString, Selected = true },
                                            new SelectListItem() {Text = "여자", Value=bool.FalseString}
                                        })
            </p>
            <input type="submit" value="확인" />
        }
 
    </div>
</body>
</html>
 

다시 확인하기

참 쉽죠~? 끝



반응형