พัฒนาเว็บแอพด้วย asp.net core mvc ด้วยภาษา vc#...

ตวอยาง

พฒนาเวบแอพดวย ASP.NET Core MVC ดวยภาษา VC# 2015 ผแตง : นายศภชย สมพานช เนอหา : 10 บท (326 หนา) วนทพมพ : สงหาคม 2559 ครงทพมพ : 1st Edition จดจ าหนายโดย : www.se-ed.com ลขสทธ : สงวนลขสทธตาม พ.ร.บ. ลขสทธ พ.ศ. 2537 หามลอกเลยนแบบ, ดดแปลง, ท าซ า, เผยแพร ไมวาสวนหนงสวนใดของหนงสอเลมน หรอดวยวธการใดๆ กตาม นอกจากจะไดรบอนญาตเปนลายลกษณอกษรจากผเขยนเทานน คณผอานสามารถสอบถามปญหา-ตชมเนอหาของหนงสอเลมนไดท https://www.facebook.com/thaivb.net Visual Studio เปนเครองหมายทางการคาของบรษท Microsoft Coporation จ ากด โปรแกรมตางๆ ตามทอางในหนงสอเลมน เปนเครองหมายการคาของบรษทนนๆ

ตวอยาง

http://www.se-ed.com/

https://www.facebook.com/thaivb.net

ค าน า ในโลกของ .NET Framework เดม นกพฒนาสาย .NET จะถกจ ากดอยเพยงแคบน Windows เทานน แตในปจจบนไมโครซอฟทสราง .NET Core ขนมา เพอใหนกพฒนาสาย .NET สามารถพฒนาแอพครบทง 3 แพลตฟอรมแลว นนคอ Windows, macOS และ Linux แมวาเนอหาของหนงสอเลมน เปนการพฒนา Web Apps โดยอาศย ASP.NET Core MVC บน Windows แตคณสามารถน าเนอหาและหลกการ ไปใชใน macOS และ Linux ไดอกดวย อาจจะตองรอเวลาใหองคประกอบตางๆ บน macOS และ Linux ครบถวนเชนเดยวกบบน Windows หากคณผอานทานใดตดปญหาในการเขยนโปรแกรม สามารถสอบถามไดทแฟนเพจของผเขยนไดท www.facebook.com/thaivb.net และอก 1 ชองทาง คอ ชองใน Youtube คนหาชองทชอวา Thaivb.NET

ศภชย สมพานช สงหาคม 2559

ตวอยาง

http://www.facebook.com/thaivb.net

สารบญ

บทท 1 พฒนา Web Apps ดวย ASP.NET Core MVC ..................................1

บทน า ........................................................................................................ 1

Web Apps ในโลกของ .NET ...................................................................... 1

การน าเสนอในหนงสอเลมน ........................................................................ 3

การดาวนโหลดและตดตง Visual Studio 2015 Community Edition............ 3

การตดตง .NET Core ................................................................................ 5

การก าหนดใหแสดงไดอะลอกเลอกสรางโปรเจกตใหม ................................. 8

การก าหนดหมายเลขบรรทดในตวเขยนโคด.............................................. 10

การสรางโปรเจกตแบบ ASP.NET Core MVC .......................................... 10

การทดสอบรนโปรเจกต ASP.NET Core MVC......................................... 12

สรปทายบท ............................................................................................. 13

บทท 2 ท าความรจกกบโปรเจกต ASP.NET Core MVC.............................14

บทน า ...................................................................................................... 14

คลาส Program และคลาส Startup จดเรมตนของโปรเจกต ASP.NET Core

MVC ........................................................................................................ 14

หลกการท างานของ ASP.NET MVC ........................................................ 17

สวนแสดงผลทไดจาก ASP.NET Core MVC ............................................ 19

ท าความรจกกบสวนแสดงผลทไดจากเมธอด View() และไฟล .cshtml....... 22

ตวอยาง

องคประกอบพนฐานของสวนแสดงผลใน ASP.NET Core MVC................ 23

การสรางเมธอดและสวนแสดงผลใหมในคอนโทรลเลอร ............................. 29

การก าหนดไฟล cshtml ใหกบเมธอด View() โดยตรง ............................... 32

การสราง Hyperlink ในหนาเวบเพจ .......................................................... 33

สรปทายบท ............................................................................................. 35

บทท 3 คอนโทรลเลอร (Controller) ...........................................................36

บทน า ...................................................................................................... 36

การสรางคอนโทรลเลอรและสวนแสดงผลใหม ........................................... 36

การสงใหเมธอดหยดท างานดวยแอตทรบวต NonAction ........................... 42

การตงชอเมธอดดวยแอตทรบวต ActionName ......................................... 44

การก าหนดคาสงกลบใหกบคอนโทรลเลอร ................................................ 49

พนฐานการเกบขอมลดวยคลาส ViewData ............................................... 50

พนฐานการสงคาใหกบเมธอดแบบมพารามเตอร ....................................... 53

การสรางไฮเปอรลงคใหกบเมธอดแบบมพารามเตอร ................................. 57

การสงคาพารามเตอรตงแต 2 ตวขนไป ..................................................... 65

สรปทายบท ............................................................................................. 67

ตวอยาง

บทท 4 การใชงานสวนของขอมล (Model & ViewModels) ........................68

บทน า ...................................................................................................... 68

การสงขอมลจาก Controller ไปส View ดวยคลาส .................................... 68

อธบายการท างานของโคด.................................................................... 74

การท างานกบขอมลดวย ViewModels ...................................................... 75


การสรางสวนแสดงผล Master-Details แบบแสดงรปภาพ ......................... 84


การใชงาน Tag Helpers กบเมธอดแบบมพารามเตอร ............................ 103

ท างานกบโครงสรางขอมล )Data Collection) .......................................... 105

อธบายการท างานของโคด.................................................................. 112

การใชงาน LINQ to Objects กบคลาสทสรางขนมา................................. 116


สรปทายบท ........................................................................................... 123

บทท 5 การใชงานสวนแสดงผล View ......................................................124

บทน า .................................................................................................... 124

การแทรกขอมลใน View ดวยวธ Inject ................................................... 124


การสรางสวนแสดงผลพเศษดวย ViewComponent ................................. 140

ตวอยาง


สรปทายบท ........................................................................................... 149

บทท 6 ท าความรจกกบระบบบรการ (Service) และ Dependency

Injection ....................................................................................................150

บทน า .................................................................................................... 150

พนฐานการสงขอมลจาก Controller ไปสสวนแสดงผล View ................... 150

พนฐานการเปดใหบรการขอมล (Service) ............................................... 154

การขอใชบรการ Service ครงเดยวแบบ Singleton ................................. 160


การขอใชบรการ Service ครงเดยวแบบ Transient ................................. 171

การขอใชบรการ Service หลายครงแบบ Singleton ................................ 173

การขอใชบรการ Service หลายครงแบบ Transient ................................ 176

การขอใชบรการ Service หลายครงแบบ Scoped ................................... 177

สรปทายบท ........................................................................................... 178

บทท 7 ท างานกบระบบฐานขอมล SQL Server 2016 Developer

Edition .......................................................................................................179

บทน า .................................................................................................... 179

การดาวนโหลด SQL Server 2016 Developer Edition........................... 180

การตดตง SQL Server 2016 Developer Edition ................................... 181

ตวอยาง

การจดการขอมลในฐานขอมลดวย SQL Server Management Studio

(SSMS) ................................................................................................. 186

พนฐานการใชงาน SQL Server 2016 Developer Edition ...................... 189

การยกเลกการปองกนการแกไขโครงสรางของฐานขอมล ......................... 197

การสรางความสมพนธระหวางตาราง ...................................................... 199

การ Backup และ Restore ฐานขอมล SQL Server 2016 Developer Edition

.............................................................................................................. 205

การ Backup ขอมล ................................................................................ 205

การ Restore ขอมล................................................................................ 208

การดาวนโหลดฐานขอมล Northwind...................................................... 210

การเพมฐานขอมล Northwind เขาไปใน SQL Server 2016 Developer

Edition................................................................................................... 210

สรปทายบท ........................................................................................... 213

บทท 8 พนฐานการท างานกบระบบฐานขอมล SQL Server ....................214

บทน า .................................................................................................... 214

การสรางฐานขอมล SQL Server แบบ Code First กบฐานขอมลทมากบ

Visual Studio ........................................................................................ 215

การสรางขอความเชอมตอฐานขอมลไวในไฟล appsettings.json ............. 222

การสรางตารางในฐานขอมลดวย Command Line .................................. 224

การเรยกดฐานขอมล SQL Server ทมากบ Visual Studio ...................... 229

ตวอยาง

การสรางฐานขอมล SQL Server แบบ Code First กบฐานขอมล SQL

Server 2016 .......................................................................................... 233

การแกไขโครงสรางตารางใน Code First ................................................ 237

สรปทายบท ........................................................................................... 240

บทท 9 การท างานกบขอมลในฐานขอมล SQL Server 2016 ..................241

บทน า .................................................................................................... 241

พนฐานการแสดงขอมลจากฐานขอมล ..................................................... 242


การเพมตารางทมความสมพนธกนดวยวธ Code First ............................ 250

การแสดงขอมลรวมกนตงแต 2 ตารางขนไป ........................................... 260

การคนหาขอมล ..................................................................................... 263


สรปทายบท ........................................................................................... 269

บทท 10 การจดการขอมลในฐานขอมล SQL Server (CRUD) ................270

บทน า .................................................................................................... 270

การแสดงรายละเอยดขอมล .................................................................... 270


การเพมขอมล (Create) .......................................................................... 279


ตวอยาง

1 | P a g e

บทท 1 พฒนา Web Apps ดวย ASP.NET Core MVC

บทน า ในปจจบน การพฒนา Web Apps ยงคงมความส าคญเปนอยางมาก คณมทางเลอกมากมาย ทจะพฒนา Web Apps ขนมา ไมวาจะเปนการใชงานภาษา PHP, MEAN Stack, ASP.NET, ASP.NET Core ฯลฯ เปนตน เนอหาทจะน าเสนอในหนงสอเลมน เปนการพฒนา Web Apps ดวย ASP.NET Core MVC ดวยภาษา VC# เปนอก 1 ทางเลอกทนกพฒนา พลาดไมไดเปนอยางยง

Web Apps ในโลกของ .NET ASP.NET MVC เปนการพฒนา Web Apps ดวย ASP.NET (เนอหา

ของเลมน เลอกใชภาษา VC#) โดยอาศยหลกการของ MVC เขามาชวยแบงแยกหนาทการท างานออกเปน 3 สวน กลาวคอ

o Models (M) หมายถง สวนของการจดเกบขอมล เชน ระบบจดเกบขอมลถาวรในฐานขอมล, ขอมลชวคราวทอยในคลาส, อารเรย, Generic List ฯลฯ เปนตน

o Views (V) หมายถง สวนแสดงผลทปรากฎในบราวเซอรใหผใชงานเหน

ตวอยาง

14 | P a g e

บทท 2 ท าความรจกกบโปรเจกต ASP.NET Core MVC

บทน า เนอหาในบทน เปนบทแรกทเราจะลงรายละเอยดในการพฒนา Web Apps ดวย ASP.NET Core MVC โดยทผเขยนปพนฐานมาบางแลวในบทท 1 เราจะมาเรมท าความรจกกบชนสวนแตละชนทเราไดมาจากโปรเจกตแบบ ASP.NET Core MVC

คลาส Program และคลาส Startup จดเรมตนของโปรเจกต ASP.NET Core MVC เมอคณสรางโปรเจกตแบบ ASP.NET Core MVC มาแลว คณจะไดโปรเจกตทมโครงสรางคอนขางสมบรณ เราจะมาเรมท าความรจกกบองคประกอบตาง ๆเหลานวา มทมาอยางไร จดเรมตนของโปรเจกต ASP.NET Core MVC อยทเมธอด Main() ในคลาส Program (ไฟลชอวา Program.cs) พบวา มการสงใหรนคลาส Startup เปนล าดบแรกดวยเมธอด UseStartup() ดงรปท 2-1 ตวอยาง

36 | P a g e

บทท 3 คอนโทรลเลอร (Controller)

บทน า คอนโทรลเลอร (Controller) เปนแกนหลก 1 ใน 3 ตามแนวความคดของ MVC อยในฐานะเปนตวกลาง ท าหนาทสงการงานในดานตางๆ ผานทางเมธอด ทเรยกวา “Action Methods” ผเขยนจะลงรายละเอยดของคอนโทรลเลอรวา มประเดนใดบางทนาสนใจ

การสรางคอนโทรลเลอรและสวนแสดงผลใหม คณสามารถสรางคอนโทรลเลอรและสวนแสดงผลใหมตามทคณตองการไดเชนกน มข นตอนดงน 1. ใหคณสรางโปรเจกตแบบ ASP.NET Core MVC ขนมาใหม 2. ตอมา ใหคณโฟกสทโฟลเดอร Controllers กอน จากนนคลกขวา เลอก

Add > New Item… เพมไฟลคลาสประเภท MVC Controller Class เขามาในโฟลเดอร Controllers ของโปรเจกตเรา ดงรปท 3-1

ตวอยาง

68 | P a g e

บทท 4 การใชงานสวนของขอมล (Model & ViewModels)

บทน า หลกการท างานอยางหนงทคณตองพบเจอเสมอ เมอคณเขามาสโลกของ ASP.NET Core MVC กคอ การท างานรวมกบขอมล กลาวคอ

การท างานกบขอมลชวคราว เชน การท างานกบขอมลทเกบอยในระบบคลาส (Class) เรามกจะสรางคลาสขนมาใชงานเอง เพอเกบขอมลตามทเราตองการ และยงถอวา ขอมลทเกบอยในออบเจกตทเกดมาจากคลาส เปนขอมลชวคราว

การท างานกบขอมลถาวร เชน ระบบฐานขอมลประเภทตางๆ เราถอวา ขอมลในกลมน เปนขอมลถาวร ขอมลทง 2 ประเภท ถกจดใหอยในสวนของ “Model” ไมวาคณจะ

ท างานกบขอมลประเภทใดกตาม มกลไกหนงทคณตองท าใหเปน นนคอ การน าขอมลเหลาน ซงอยในสวนของ Controller น าไปแสดงผลในสวนของ View

การสงขอมลจาก Controller ไปส View ดวยคลาส การท างานกบสวนของ Model ล าดบแรกเลยกคอ ผเขยนจะสรางคลาสทชอวา Products ขนมา ท าหนาทเกบขอมลสนคา และตองการแสดงขอมลสนคาทมอย ในสวนแสดงผล

การสงขอมลจาก Controller ไปส View ดวยคลาส มข นตอนดงน 1. เรมตนสรางโปรเจกตทชอวา UsingModel ขนมากอน

ตวอยาง

124 | P a g e

บทท 5 การใชงานสวนแสดงผล View

บทน า “View” เปนกลไกการท างานล าดบสดทายของการท างานในรปแบบ MVC กลาวคอ ท าหนาทแสดงผล ปรากฎในบราวเซอรใหผใชงานเหน อาจจะเปนขอมลทถกดงมาตงแตสวนของ Model หรอเปนขอมลทไดมาจากการท างานของสวน Controller กได เราจะมาดวา การท างานในสวนของ View มประเดนใดบางทนาสนใจ

การแทรกขอมลใน View ดวยวธ Inject โดยปกตแลว ขอมลทถกสงตอมาทสวนของ View เกดจาก

o Controller (อยในฐานะเปนผสง) สงขอมลโดยอาศยฟงกชน View() o View (อยในฐานะผรบ) โดยใชค าสง @model รบขอมลมาแลว น าไป

แสดงผลในไฟล .cshtml ปรากฎในบราวเซอร ซงถอเปนการท างานขนตอนสดทาย แตคณสามารถใชค าสง @inject ท าหนาท “น าขอมลจากสวนของ

ขอมล” แทรกเขามาทสวนของ View ไดเลย

การแทรกขอมลใน View ดวยวธ Inject เปาหมายของตวอยางน กคอ แสดงขอมลลกคา (แสดงดวยขนตอนตามปกต) และขอมลอนๆ ของลกคาทนาสนใจ (แสดงดวยวธ Inject) 1. ผเขยนสรางโปรเจกตทชอวา UsingInject ขนมากอน จากนนสรางหนวย

จดเกบขอมลลกคาขนมา อยในฐานะเปนขอมลชวคราวในระดบพนฐาน นนคอ คลาส Customers เกบอยในโฟลเดอรทชอวา Models ขอมลลกคาทเราตองการเกบ ประกอบดวย

ตวอยาง

150 | P a g e

บทท 6 ท าความรจกกบระบบบรการ (Service) และ Dependency Injection

บทน า เมอคณเขามาสโลกของ MVC มการท างานหลกอยางหนงทคณตองการท าเสมอ นนคอ การน าขอมลจากสวนของ Controller ไปสสวนแสดงผล View ผานทางฟงกชน View() ค าวา “ขอมล” ทผเขยนกลาวถง อาจจะมาจากการท างานภายในของคอนโทรลเลอรเอง หรอคอนโทรลเลอรน ามาจากสวนของขอมล Model กได เชน ขอมลชวคราวทไดจากคลาสตางๆ ทเราสรางขนมาใชงานเอง หรอขอมลทมาจากระบบฐานขอมล ซงถอเปนระบบจดเกบขอมลแบบถาวร เนอหาในบทน เราก าลงยกระดบขอมลทเราตองการ ใหกลายเปน “การบรการดานขอมล” เรยกวา “Service” และยงรวมไปถงการปรบปรงการรบ-สงขอมลระหวางสวนของ Controller กบ View ใหมประสทธภาพเพมมากยงขนอกดวย

พนฐานการสงขอมลจาก Controller ไปสสวนแสดงผล View วธการสงขอมลจากสวน Controller ไปสสวนแสดงผล View แบบงายทสด กคอ การสงขอความธรรมดา โดยอาศยคลาส ViewData ทเราคนเคยกนเปนอยางดนนเอง ทกๆ ครงทคณสรางโปรเจกต ASP.NET Core MVC ขนมา ในคอนโทรลเลอร HomeController ทเมธอด About() หรอเมธอด Contact() จะมการสงขอความทชอวา Message โดยอาศยคลาส ViewData เปนคาเรมตน

ตวอยาง

179 | P a g e

บทท 7 ท างานกบระบบฐานขอมล SQL Server 2016 Developer Edition

บทน า ฐานขอมล SQL Server 2016 เปนระบบฐานขอมลอกตวหนงทนกพฒนาในยคปจจบน จะตองใชงานอก 1 ประเภท ไมวาคณจะพฒนาแอพในแพลตฟอรมใดกตาม ในปจจบนไมโครซอฟทเปดชองทางใหนกพฒนา สามารถใชงานฐานขอมล SQL Server 2016 Developer Edition ไดฟร ภายใตโครงการทเรยกวา “Visual Studio Dev Essentials” คณสามารถสมครเขารวมโครงการนไดฟรทเวบไซด https://www.visualstudio.com/en-us/products/visual-studio-dev-essentials-vs.aspx

รปท 7-1 แสดงเวบไซดของโปรแกรม Visual Studio Dev Essentials

ตวอยาง

https://www.visualstudio.com/en-us/products/visual-studio-dev-essentials-vs.aspx

https://www.visualstudio.com/en-us/products/visual-studio-dev-essentials-vs.aspx

214 | P a g e

บทท 8 พนฐานการท างานกบระบบฐานขอมล SQL Server

บทน า การท างานกบระบบฐานขอมล (Database) ถอเปนหวขอหลกอก 1 เรองทคณตองศกษา เราถอวา ขอมลทจดเกบอยในระบบฐานขอมล เปนการเกบขอมลแบบถาวร สามารถแบงฐานขอมล SQL Server ได 2 รปแบบ

o ฐานขอมล SQL Server ทมากบ Visual Studio o ฐานขอมล SQL Server ทเราตดตงแยกตางหาก ในกรณน คอ

ฐานขอมล SQL Server 2016 Developer Edtion วธการท างานกบระบบฐานขอมล SQL Server ล าดบแรกทผเขยน

เลอกมาน าเสนอในหนงสอเลมน กคอ การท างานในรปแบบ “Code First” โดยอาศย Entity Framework Core เรยกสนๆ วา “EF Core”

Code First เปนรปแบบการท างานรวมกบระบบฐานขอมล มจดเรมตนอยทการเขยนโคดขนมากอน โดยอาศยคลาสทสรางขนมา แปลงเปนตารางในฐานขอมล คณสามารถก าหนดชอตาราง, ชนดขอมลแตละฟลด, เงอนไขตางๆ ฯลฯ ผานทางคลาสทคณสรางขนมาทงหมด

เหนไดวา รปแบบนแตกตางไปจากเดมทเราตองสรางตารางในฐานขอมลกอน แลวคอยสรางโปรเจกตเชอมตอเขาไป

ตวอยาง

241 | P a g e

บทท 9 การท างานกบขอมลในฐานขอมล SQL Server 2016

บทน า เนอหาของบททแลว เปนการเตรยมความพรอมใหโปรเจกตของเรา สามารถเชอมตอกบระบบฐานขอมลดวยวธ Code First ขนอยกบวา คณจะใชฐานขอมล SQL Server ใด โดยทผเขยนขอเลอกใชฐานขอมล SQL Server 2016 Developer Edition เปนหลก โดยใชขอความเชอมตอเกบอยในไฟล appsettings.json ดงตอไปน appsettings.json { "ApplicationInsights": { "InstrumentationKey": "" }, "Logging": { "IncludeScopes": false, "LogLevel": { "Default": "Debug", "System": "Information", "Microsoft": "Information" } }, "DefaultConnection": {

ตวอยาง

270 | P a g e

บทท 10 การจดการขอมลในฐานขอมล SQL Server (CRUD)

บทน า เนอหาทผานมา ผเขยนน าเสนอวธการเรยกดขอมลออกมาจากตารางทเราสนใจอย เปนเพยงการแสดงวธการใชงาน ASP.NET Core MVC รวมกบระบบฐานขอมล SQL Server ดวยวธ Code First ในขนตนเทานน ในทางปฏบตแลว การท างานรวมกบระบบฐานขอมล ประกอบดวยการท างาน 4 สวน คอ

1. Create (C) หมายถง ข นตอนการสรางขอมลใหม เพอน าขอมลนนๆ ไปเพมลงในฐานขอมล

2. Read (R) หมายถง การอานขอมลออกมาจากระบบฐานขอมล 3. Update (U) หมายถง การอพเดตขอมลเดมทมอย ใหกลายเปนขอมล

ลาสด 4. Delete (D) หมายถง การลบขอมลออกจากระบบฐานขอมล

ส าหรบขอบเขตการน าเสนอในบทน น าเสนอการท างานขอ 1 ถงขอ 3 เทานน เหตผลกคอ ในปจจบนการลบขอมลจรงออกจากระบบฐานขอมล จะท าใหระบบของเราไมมหลกฐานหรอขอมลอางองในภายหลง

การแสดงรายละเอยดขอมล การท างานล าดบแรกทจะน าเสนอ กคอ การแสดงขอมล (Read) ผเขยนเลอกใชรปแบบทเราพบเหนไดโดยทวไป นนคอ เมอผใชงานคลกเลอกดขอมลแถวใด กจะสงใหแสดงรายละเอยดของแถวนนๆ ในสวนแสดงผลตามทเราก าหนด

ตวอยาง

พัฒนาเว็บแอพด้วย asp.net core mvc ด้วยภาษา vc#...

Documents