Blog Content

  1. Home

    티스토리 뷰

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

    Posted by Godffs on 2014. 5. 9. 16:31 in ASP.NET /

    반응형

    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>
     

    다시 확인하기

    참 쉽죠~? 끝



    반응형
    저작자표시 비영리 변경금지

    'ASP.NET' 카테고리의 다른 글

    06.MVC DB 연결 (출력하기)  (2) 2014.05.19
    05.MVC DB 연결 (저장하기)  (10) 2014.05.14
    03.MVC 뷰(View) 추가하기  (0) 2014.05.09
    02.MVC 컨트롤러(controller) 추가하기  (0) 2014.05.09
    01.MVC 프로젝트 만들기  (0) 2014.05.08

    Comments

Copyright © 2016 by WaaNee. All Rights Reserved.

티스토리툴바