---
title: 'Project documentation template'
disqus: hackmd
---

. Net Core MVC 金融網頁設計技術作品 README
===

## 作品介紹
.Net Core MVC 用了Razor語法幫助開發者很好把c#語法跟前端view的html融合，並使用viewmodel模型開法讓前端更容易取得方法去使用。

我們建立viewmodel撰寫的時候使用Razor語法方便使用html。
觀念:
1.因為程式碼 view要重，model要輕，要減輕model程式碼並且讓view可以快速調用，所以寫Mvc裡面最重要的一個概念，也就是強型別的View（Strong Type View）和ViewModel。
2.Mvc裡面的View使用的是Razor語法，而每一個View能夠定義傳進來的Model形態是什麼。透過這種方式，在寫View的時候不止能夠在Compile time的時候知道對於傳進來的Model使用上面有沒有正確，配上HtmlHelper，還能夠建立能夠和Model binding成功的對應html input。
3.ViewModel就像它的名字一樣，用於顯示View的Model。
-ViewModel不定義邏輯 - 有些會把取得資料的邏輯或者一些商業邏輯寫在ViewModel。但是，我認為ViewModel應該越純粹越好，它只是資料的載體，方便我們把資料傳到 View而已

## 登入及首頁

**一我用消費者的角度開始使用 . Net Core MVC，會先進入首頁，也就是銀行官方首頁**。


**在這裡我設計在首頁去登錄帳號。
用滑鼠點一下Sign in，會進入帳號密碼登錄畫面。**


## 首頁layout

**-主要使用bootstrap的套版製作。**
**在bootstrap官網download頁面， 複製5.1版的CDN，貼到程式碼裡面。**
**貼在link和script的地方**

**版面上有投影片自動切換我們使用了carousel。**


**版面設計colum使用layout的Grid。
並且設定匯率的數字，用decimal定義匯率比較精準。**

使用component card來製作每個國家匯率卡


再用layout Grid 將匯率卡水平整齊排列，按照比率去排

開始建立內容，有自動投影片，有各國匯率卡，有銀行官方新聞。

首先先在model的地方建立首頁的homeviewmodel service
因為要建立動態匯率先將CurrencyCode定義出來


為了複製同樣的動態匯率卡片，裡面採用foreach的方式將各個國家匯率渲染出來，並且將買進賣出的匯率InRate和OutRate show出來。

同樣使用foreach的方式將新聞的標題和內容的item渲染出來




## 登錄頁面layout



**我們開一個類別叫LoginService。
把帳號預設為johnny密碼為123。以便我們作品範例執行之後繼續開發。**





## 消費者註冊頁面