手把手教你ASP.NET Web API 搭建婚禮問卷網站(一):後端篇

圓圓小熊(Maruマル)
5 min readJun 8, 2019

Google Form建立婚禮問卷很方便~~但是手癢的我一定要親手來寫一下,順便練習一下好久沒寫的ASP.NET

出席回覆表單(不是Google Form 耶)

網站規劃:

前端: HTML + Javascript + CSS (將使用網路的Bootstrap範本進行修改)

後端: ASP.NET Web API (練習一下C#…)

佈署: (建置在Azure上)

  1. Azure Cloud Storage Account:我們將會將Static Files(例如網頁HTML檔案/CSS/Javascript擺放在此Azure Blob),另外問卷的結果我們也將擺放在Azure Table
  2. Azure Web App: API的部分將佈署在此

專案建置(後端):

  1. 開啟Visual Studio 2017
選擇.NET Core ASP.NET Core Web Application
選擇API

完成後,Visual Studio就幫你把整個專案架構建置好囉!

範例Controller

2. 準備問卷DB的Model

先建立一個Models資料夾,對資料夾右鍵選擇New Item,選擇Class,並將檔名改為Application.cs(申請表)

3. 管理NuGet Package

安裝Azure Storage套件

Models資料夾裡的Application.cs範例程式碼

接下來我們要進行Controller的撰寫

a.為避免混淆或錯誤,請把Controller資料夾內的預設ValuesController刪除

b.右鍵新增Controller,並且選擇Empty Controller

名稱建立為ApplicationsController

程式碼裡面有個DBConnection物件,是用來串接Azure Storage Account裡的Table DB

至於連接的金鑰,則要到儲存體查看

Azure 儲存體建置

前往Azure頁面新增Storage Account

輸入儲存體帳戶相關資訊並建立

前往儲存體建置資料表

新增資料表並輸入名稱Application,就完成囉!

建立好資料表後,沒辦法直接在網頁上看到資料表內容的,必須透過其他Tool查看,稍後會使用Visual Studio 展示怎麼看內資料表Record

測試API

基本上後端API已經搭建完成囉!

從Visual Studio在IIS Express上測試看看

使用RestClient測試

新增資料:

[Post] https://localhost:44335/api/applications

結果:

查詢所有資料:

[GET] https://localhost:44335/api/applications

如何從Visual Studio Cloud Explorer查看資料

Visual Studio 2017 > Cloud Explorer

串接自己的Azure帳號後,前往Storage Accounts > Tables > Application Table,就可以看到自己剛才寫入的資料囉:)

佈署後端API到Azure Web App上

Local端測試完後,接下來要讓我們的API上雲端!

對著專案按右鍵,選擇Publish

選擇App Service,並選擇Create New

選擇自己要佈署的區域及名稱後,即可無痛佈署囉!

佈署完成!!!下一步就是與前端串接囉~~

其實我脫離C#好一陣子已經不太會寫程式了XDD…如果有程式碼可以精進的部分歡迎留言建議~~~謝謝 :)

前端篇連結:手把手教你ASP.NET Web API 搭建婚禮問卷網站(二):前端篇

--

--

圓圓小熊(Maruマル)

在日本東京打拼的軟體工程師。喜歡滑雪,旅遊,吃美食,寫程式,參加Meetup,以及比價。最近沈迷寫Chatbot,Django以及把玩AWS。