[Asp .Net MVC] 範例:一個新增、修改、刪除、查詢與檢視的應用程式

熱門文章 (Popular Post)

Posted by : Duran Hsieh 2016-06-12

前言

重要:在閱讀本篇前建議,實作前面的文章內容,本篇只提供範例程式與簡易程式說明。

本篇是結合Razor, HtmlHelper, ViewModel, Entity Framework(code first), and local db 等前述的
內容所撰寫一篇簡易的應用程式。利用這個簡單範例,可以讓您透過一個CRUD的專案,進
而由此範例進行延伸,能繼續更深入的學習與延伸發展新功能(一種先求有,再求好的觀念)。

這個範例程式並不完美,希望透過修改這個應用程式,了解基本的使用方法。
若有觀念錯誤與修改建議,也請各位先進不吝指教。

Github位址: https://github.com/superpucy/FcuMvcWebDemo2


介紹

這個範例專案有幾個主要的重點,包含
  1. App_Data、Model、Migrations 資料夾與 Web.config:Local database 與 code first 相關。
  2. Controller:包含新增、修改、刪除、檢視與條列的 Controller 與 Action 。
  3. Service:主要邏輯實作,包含ViewModel與資料Model對應、資料Model操作。
  4. ViewModel與View:網頁實作。




此範例使用的 StudentDBController 包含五種Action

  1. Index:數筆學生資料組合而成的條列檢視 (條列頁)
  2. Create:新增學生資料 (兩個Action,進入畫面與送出處理)
  3. Edit:編輯學生資料 (兩個Action,進入畫面與送出處理)
  4. Delete:刪除學生資料 (沒有對應的View,成功後轉回 Index)
  5. Detail:檢視單一學生詳細資料



ViewModel:若各個功能頁面使用資料差異較大,應該個別建立專屬的ViewModel,如:
CreateStudentViewModel、UpdatetudentViewModel...等。


建立Local database相關,包含連線字串(請視SQL Server Express 版本修改連線字串)


本篇範例採用Code First,故需要建立相關物件與對應的Context


使用Code First建立資料庫產生的Db Migration。


Service 主要實作邏輯與資料操作:
進入Index action 時會檢查是否有資料,若無資料則代入一筆預設資料。


Create action 主要實作 ViewModel 對應資料物件 與 使用資料操作建立資料,primary key為
隨機產生的 guid。



新增與修改進行資料操作前,實作的ViewModel 對應資料物件方法。


Edit action:
查詢傳入之Guid資料,若符合則更新該筆資料,若查無資料則設定ViewBag.Status為false,
在View增加查無資料訊息。

Detail action:
查詢傳入之Guid資料,若符合則回傳該筆資料。

Delete action:
查詢傳入之Guid資料,若符合則刪除該筆資料。


範例程式畫面:



感想

每個人的學習方式不同,而個人學習偏向兩種方式:

  1. 取得一個可以運作的程式,閱讀程式碼查詢每一區塊的功能,並嘗試修改。
  2. 依據範例程式,搭配理論一步一步的實作,理解程式碼如何運作與邏輯。

故這一系列的文章比較偏向一步驟一步驟的說明與實際操作,希望能帶給其他人幫助。

最後兩篇將會簡單介紹如何將製作好的網站進行佈署,包含了使用IIS與
Azure Web Application。

上一篇:[Asp .Net MVC] Linq、Lambda 與 System.Linq.Enumerable 方法
下一篇:[Asp .Net MVC] Install IIS and publish web application project (file system)



本篇文章內容歡迎分享,轉載與使用圖文請來信告知並註明出處。


{ 3 意見... read them below or Comment }

  1. 您好,
    我是初學者,目前只有撰寫單一 controller 與單一 Index view 的經驗,第一次接觸多個 controller 與多個 Index 的專案,已爬文看過您寫的 ASP.NET MVC 相關系列文章,有一些問題想請教您:

    1. 在以上的範例中,雖已經有撰寫 Edit / Detail / Delete 的 action 以及相對應的 view,但執行後仍只有看到 Create 的按鈕,~\Views\StudentBase\Index.cshtml 中也只有寫 Create 的部分,其餘 Edit / Detail / Delete 的按鈕沒看到,請問是要留給讀者自己加寫上去練習的嗎?還是已經有寫在哪裡只是我沒看到?

    2. 雖然在 RouteConfig.cs 已經設定好 app 一開啟時的 Index 是 ~\Views\Home\Index.cshtml,但我發現在 Visual Studio 中按下 F5 偵錯執行時,好像會依據當下瀏覽的 *****.cshtml 畫面來決定要開啟什麼畫面,例如我正在瀏覽 ~\Views\StudentDB\Edit.cshtml,按下 F5 後顯示的是 http://localhost:*****/StudentDB/Edit,而不是如預期中開啟 ~\Views\Home\Index.cshtml,請問是什麼原因呢?還是我每次執行前都需要回到瀏覽 ~\Views\Home\Index.cshtml 的畫面才能按下執行?那麼當程式發行出去之後,該如何確保 user 不會有此問題呢?

    謝謝您的回覆,也謝謝您的教學文章。

    回覆刪除
    回覆
    1. Hi ^^
      先謝謝您觀看我的文章。

      這篇教學文章主要有兩個範例,一個是 StudentBase,主要是直接傳遞表單資料後,在 StudentBaseController/Create 內一個一個接收並傳換成 model。這個範例只有 Create 功能,沒有 Edit/Detail/Detail 功能實作,主要目的是解釋可以透過 Name 對應的方式接收表單資料,但不太推薦這種做法,會多很多程式碼。
      StudentDB 功能,你可以發現在 StudentDBController/Create,都是透過 StudentViewModel 進行資料傳遞,這是比較推薦的做法,故在這個範例內有包含 Edit/Detail/Detail 功能實作。

      第二個問題 (因為我的VS 是英文版,不曉得中文名稱)
      你可以右鍵點選專案 -> 屬性(Properties) -> Web -> Specific Page ,可以啟動時固定的頁面 (原先的效果是因為預設選擇Current page 造成的),截圖連結:https://goo.gl/bcbuas
      (程式發行後不會有這個問題,這個只有偵錯的時候才會發生)

      希望對你有幫助。

      刪除
  2. 感謝高手大大的教學及無私分享
    ^^

    回覆刪除

- Copyright © Duran Hsieh @ Duran 的技術冶煉廠 - Date A Live - Powered by Blogger - Designed by Johanes Djogan -