[ASP.NET 공부] ASP.NET 4.6 MVC 프레임워크(2) - 짱우의 코딩일기 - 티스토리

  'ASP.NET & Core를 다루는 기술'이라는 책을 통해서 ASP.NET 공부를 하기 시작했다. 공부를 하다보니 예제와 설명이 적절하게 섞여서 나온 책인 것 같다. 위의 책을 바탕으로 공부한 내용을 글로 쓰려한다.

---

  기본적인 내용은 다음 링크의 글에 설명해두었다.

2020/03/24 - [ASP.NET 공부] ASP.NET 4.6 MVC 프레임워크(1) - 짱우의 코딩일기 - 티스토리

[ASP.NET 공부] ASP.NET 4.6 MVC 프레임워크(1) - 짱우의 코딩일기 - 티스토리

---

ASP.NET 4.6 MVC 프레임워크

실습 ( MVC 5를 사용해 할 일 관리 응용 프로그램 만들기 )

테이블 생성 및 데이터베이스 게시

• 데이터베이스는 'DotNetNote.Database'를 사용하고 테이블은 'Tasks'로 생성한다.

  ID는 Primary Key, Identity (1씩 증가)로 설정했고 CreationDate의 Default 값을 GetDate()로 설정해두었다.

 

DevMvcTaskList 웹 프로젝트 생성

• 'DevMvcTaskList' 웹 프로젝트를 생성하고 Empty 템플릿과 MVC 옵션을 선택해준다.
• Dapper를 설치해서 Dapper.dll을 프로젝트에서 사용할 수 있도록 한다.
• Web.config 파일에 다음 코드를 추가해준다.

<!-- DB 연동 -->
  <connectionStrings>
    <add name="ConnectionString" connectionString="Data Source=[IP 주소];Initial Catalog=DotNetNote.Database;User ID=chang;Password=root1234!!" providerName="System.Data.SqlClient"/>
  </connectionStrings>

 

• Models 폴더에 'Task.cs'라는 클래스를 생서한다. 코드는 다음과 같이 입력한다.

using Dapper;
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Web;

namespace DevMvcTaskList.Models
{
    /// <summary>
    /// Tasks (할 일) 테이블과 일대일 매핑
    /// </summary>
    public class TaskModel
    {
        public int ID { get; set; }
        public string Title { get; set; }
        public bool IsCompleted { get; set; }
        public DateTime CreationDate { get; set; }
    }

    public class TaskRepository
    {
        private IDbConnection db = new SqlConnection(ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString);

        // 일정 등록
        public void AddTask (TaskModel model)
        {
            db.Execute(@"INSERT INTO Tasks (Title, IsCompleted) VALUES (@Title, Cast('false' AS BIT))", model);
        }

        // 모든 일정 목록 반환
        public List<TaskModel> GetTasks ()
        {
            return db.Query<TaskModel>("SELECT * FROM Tasks ORDER BY ID DESC").ToList();
        }

        // 일정 완료
        public void CompleteTask (int ID)
        {
            db.Execute(@"UPDATE Tasks SET IsCompleted = ~IsCompleted WHERE ID = @ID", new { ID });
        }
    }
}

 

• Controllers 폴더 마우스 오른쪽 클릭 -> 추가 -> 컨트롤러 -> MVC 5 컨트롤러 - 비어있음 -> TaskController로 이름 설정
• 'TaskController.cs' 파일 코드는 다음과 같이 입력한다.

using DevMvcTaskList.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace DevMvcTaskList.Controllers
{
    public class TaskController : Controller
    {
        private TaskRepository repo = new TaskRepository();

        // 할 일 목록 표시
        public ActionResult Index()
        {
            // 리스트 출력
            var r = repo.GetTasks();

            return View(r);
        }

        // 할 일 등록 페이지 표시
        public ActionResult Create()
        {
            // 등록 폼 출력
            return View();
        }

        // 등록 페이지에서 넘겨온 데이터 저장
        [HttpPost]
        public ActionResult CreateProcess (string title)
        {
            // 등록 처리 : DB에 저장
            repo.AddTask(new TaskModel { Title = title });

            return RedirectToAction("Index"); // 리스트로 이동
        }

        // 할 일 체크
        public ActionResult Complete (int ID)
        {
            // 할 일 삭제 또는 체크 업데이트
            repo.CompleteTask(ID);

            return RedirectToAction("Index");
        }
    }
}

 

• Views 폴더의 Task 폴더 -> 마우스 오른쪽 버튼 클릭 -> 추가 -> 뷰 (보기) -> 뷰 이름 : Create -> cnrk
• Create.cshtml 코드는 다음과 같이 입력한다.

@{
    ViewBag.Title = "Create";
}

<h2>할 일 등록</h2>

<form action="/Task/CreateProcess" method="post">

    제목 : <input type="text" name="title" value="" /><br />

    <input type="submit" value="저장" />

</form>

 

• 위와 같은 방법으로 Views -> Task 폴더에 Index.cshtml 파일을 만들어주고 코드는 다음과 같이 입력한다.

@model List<DevMvcTaskList.Models.TaskModel>

@{
    ViewBag.Title = "Index";
}

<h2>할 일 리스트</h2>

<table class="table table-bordered table-condensed table-striped table-hover">
    <tr>
        <th>ID</th>
        <th>제목</th>
        <th>생성일</th>
        <th>완료</th>
    </tr>
    @foreach (var task in Model)
    {
        <tr>
            <td>@task.ID</td>
            <td>
                @if (task.IsCompleted)
                {
                    <s>@task.Title</s>
                }
                else
                {
                    <text>@task.Title</text>
                }
            </td>
            <td>@task.CreationDate.ToShortDateString()</td>
            <td>
                <a href="/Task/Complete/@task.ID.ToString()">
                    @if (task.IsCompleted)
                    {
                        <text>되돌리기</text>
                    }
                    else
                    {
                        @:완료하기
                    }
                </a>
            </td>
        </tr>
    }
</table>

<a href="/Task/Create">등록</a>