Lily's tech sharing space

這篇文章會一步步地帶大家做出一個簡單的MVC web專案，
分為三步驟：

1.Preparing Environment 環境準備

2.Coding time 打程式時間

3.看看成果時間

就讓我們一步一步開始吧～

1.Preparing Environment

◎首先，我們要先有 Visual Studio Enterprise/Professional 作為開發環境，可以到官網下載（下圖紅框部分，可以試用）​

下載設定皆選預設，好了就可以開啟Visual Studio Enterprise/Professional

◎建立一個MVC web app專案：

✏️ 檔案->新增->建立專案->.Net Framework要選單中選4.6以上，為專案取名 -> 確定

✏️ 選擇MVC範本，加入MVC資料夾，右邊先不勾host in the cloud->確定

✏️ 專案建立完成後，點選重建（rebuild）看看，成功就繼續

2.Coding Time

◎Model：建立每一個聯絡人的架構

✏️ 方案總管 -> 在Model資料夾右鍵加入一個類別 -> 取名為 ContactBook.cs -> 新增
把以下程式碼整個貼到 ContactBook.cs 中

using System;
using System.Data.Entity;
using System.ComponentModel.DataAnnotations;
namespace MvcContactsBook.Models {
    public class ContactBook {
        public int ID { get; set; }
        public string name { get; set; }
        public string gender { get; set; }
        public DateTime birth { get; set; }
        DiaplayFormat(DataFormatString = "{0:yyyy/MM/dd}")
        public string phone { get; set; }
        public string email { get; set; }
    }     
    public class ContactDBContext : DbContext     
    {        
        public DbSet Contacts { get; set; }     
    }
}

這一段程式碼的意思是替一個聯絡人的資料內容做定義，ContactBook是一個類別（Class）

其中，DiaplayFormat(DataFormatString = "{0:yyyy/MM/dd}")的意思是要讓DateTime birth這一個項目只會顯示出 年/月/日 的表示法，否則他會連時間也一起列出來。
    public class ContactDBContext : DbContext     
    {        
        public DbSet Contacts { get; set; }     
    }這一段則是建立一個類似資料庫的類別，他會自動幫我們建立一個叫做 MvcContactsBook.Models.ContactDBContext.mdf 的檔案，在專案中的 App_Start 資料夾裡面。

★新增完之後，跟之前一樣重建rebuild 一下（這裡很重要哦！不然等一下會無法新增Controller）

◎加入一個 Controller：（用來控制將聯絡人資訊輸入到本機資料庫）

✏️ 在方案總管中 Controllers 資料夾右鍵加入一個控制器

✏️ 選擇具有檢視、使用Entity Framework 的 MVC 5控制器，如果選擇此項目他會自動產生一個可以新增、刪除、修改的 檢視（View）
✏️ 用下拉選單選擇：模型類別ContactBooks(MVCContactsBookModels)，資料內容型別ContactDBContext(MVCContactBookModels) -> 名稱會自動取名為ContactBooksController ->加入
這裡的模型類別也就是剛剛我們所建立的class，包含姓名、性別、生日、電話等等，而資料內容型別

◎View的修改：

由於我們使用剛剛Controller自動建立的網頁他已經包含聯絡人新增、刪除、修改的頁面，但是為了方便使用者輸入，還需要做一些微微的調整

✏️ 打開方案總管中，Views 資料夾 -> ContactBooks資料夾 -> Create.cshtml
     找到有model.gender的div區域，將<div class="col-md-10"> </div>標籤中的程式碼更改為以下：