contents · 2019-01-29 · การกําหนดหมายเลขบรรทัดโค...

20

Upload: others

Post on 25-Jul-2020

1 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Contents · 2019-01-29 · การกําหนดหมายเลขบรรทัดโค ดและสีธีมให กับ VS 2013 .....3 บทที่ 2 พื้นฐานการ
Page 2: Contents · 2019-01-29 · การกําหนดหมายเลขบรรทัดโค ดและสีธีมให กับ VS 2013 .....3 บทที่ 2 พื้นฐานการ

สารบญ II

Contents

บทท 1 เตรยมความพรอมกอนพฒนา Web Application ดวย ASP.NET....... 1

การเตรยมสภาพแวดลอมและการอพเดต .............................................................................. 1

รปแบบการนาเสนอของหนงสอเลมน ................................................................................... 2

การกาหนดให VS 2013 แสดงไดอะลอกบอกซเลอกชนดโปรเจกต ......................................... 2

การกาหนดหมายเลขบรรทดโคดและสธมใหกบ VS 2013 ...................................................... 3

บทท 2 พนฐานการสราง Web Application ดวย ASP.NET ....................... 5

โปรเจกต ASP.NET แรกของคณ .......................................................................................... 5

ทาความรจกกบสภาพแวดลอมของ VS 2013 แบบ ASP.NET Web Application ................... 10

การตงเวบเพจหนาแรก ...................................................................................................... 13

การทดสอบรนโปรเจกต ..................................................................................................... 13

หลกการทางานของมาตรฐาน HTML5 ในขนตน .................................................................. 14

โครงสรางพนฐานของ HTML5 .................................................................................. 15

วธการเขารหสหนาเวบเพจใหสามารถแสดงผลภาษาไทย ............................................. 15

พนฐานการใชงานเวบคอนโทรลของ ASP.NET ................................................................... 16

ความสมพนธระหวางเวบคอนโทรลของ ASP.NET กบภาษา HTML5 ................................... 17

ความแตกตางระหวางสครปต ASP.NET ของภาษา VB 2013 กบภาษา VC# 2013 ............... 18

การเขยนโปรแกรมแบบรองรบเหตการณของ ASP.NET ....................................................... 19

การเพมเหตการณใหกบเวบคอนโทรล ................................................................................ 20

การสรางเหตการณในภาษา VB 2013 กบ VC# 2013 ของ ASP.NET ................................... 21

พนฐานการแสดงอลเมนตของ HTML5 ดวย ASP.NET ........................................................ 23

การเขยนโคดควบคมอลเมนตของ HTML5 .......................................................................... 24

บทท 3 พนฐานการเขยนโปรแกรมใน ASP.NET ....................................... 27

การประกาศตวแปร ........................................................................................................... 27

ขอบเขตของตวแปร (Variable Scope) ................................................................................. 28

Page 3: Contents · 2019-01-29 · การกําหนดหมายเลขบรรทัดโค ดและสีธีมให กับ VS 2013 .....3 บทที่ 2 พื้นฐานการ

Professional ASP.NET ProgrammingIIII

การใชงานตวแปรระดบ Local และระดบ Web Form .................................................. 29

การใชงานตวแปรระดบ Block ................................................................................... 30

ชนดของขอมล (Data Type) ............................................................................................... 31

ความหมายของคาสง Option Explicit กบ Option Strict ...................................................... 32

ลาดบเหตการณของคลาส Page ......................................................................................... 32

ทาความรจกกบคณสมบต IsPostBack ของคลาส Page ...................................................... 34

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

พนฐานการใชงาน Cookies ............................................................................................... 38

การใชงาน Cookies แบบม Keys ....................................................................................... 40

การทาคาทกทายผเขาเยยมชมเวบเพจ ............................................................................... 46

พนฐานการใชงานตวแปรแบบ Session .............................................................................. 50

บทท 4 พนฐานการใชงานภาษา JavaScript..............................................57

วธการใชงานภาษา JavaScript ในหนาเวบเพจ .................................................................... 57

การประกาศตวแปร ........................................................................................................... 60

การสรางฟงกชนขนมาใชงาน ............................................................................................. 61

การอางองอลเมนตของ HTML ใน JavaScript .................................................................... 62

การสงตอขอมลไปยงอลเมนตอน ....................................................................................... 63

พนฐานการปรบแตงแอตทรบวตใหกบอลเมนต HTML ......................................................... 64

การตรวจสอบอลเมนตชนด checkbox ............................................................................... 65

การใชงานอลเมนต input ชนด radio .................................................................................. 66

การแสดงขอความยนยนกอน Submit ฟอรม ...................................................................... 68

พนฐานการตรวจสอบฟอรมของ HTML .............................................................................. 69

การ Set Focus ใหกบอลเมนต........................................................................................... 70

การตรวจสอบรายการทถกเลอกในอลเมนต <select>…</select> ........................................ 72

การควบคมอลเมนต <div>…</div> ................................................................................... 73

การใชงานฟงกชน setTimeout( ) ......................................................................................... 74

การกาหนดคาในตารางของภาษา HTML ............................................................................ 75

บทท 5 การตกแตงสวนแสดงผลดวย CSS3..............................................77

รปแบบการใชงาน CSS3 กบ HTML5 ................................................................................. 77

การกาหนดใหใชกบอลเมนตใดอลเมนตหนง ............................................................... 78

การฝงสครปตภาษา CSS3 ลงในไฟล HTML5 ........................................................... 78

Page 4: Contents · 2019-01-29 · การกําหนดหมายเลขบรรทัดโค ดและสีธีมให กับ VS 2013 .....3 บทที่ 2 พื้นฐานการ

สารบญ IIIIII

การสรางไฟล *.css แยกออกมาเปนไฟลตางหาก ....................................................... 79

พนฐานการตกแตงเวบคอนโทรลดวย CSS3 ....................................................................... 80

การสรางสวนแสดงผลแบบ 2 คอลมนดวย CSS3 ................................................................ 85

การสรางสวนแสดงผลแบบ 3 คอลมนดวย CSS3 ................................................................ 87

บทท 6 การสรางแบบฟอรมใน ASP.NET ............................................... 91

พนฐานการรบ-สงขอมลในฟอรมดวย ASP.NET.................................................................. 91

การรบ-สงขอมลดวยวธ GET ..................................................................................... 91

การรบ-สงขอมลดวยวธ POST .................................................................................. 95

การรบ-สงขอมลใน HTML5 Form รวมกบ ASP.NET ........................................................... 96

บทท 7 ระบบเมนและการนาทางในเวบไซต ...............................................101

การสรางเมนดวยเวบคอนโทรล Menu ...............................................................................102

การสรางเมนแบบลาดบชนดวยเวบคอนโทรล TreeView .....................................................104

การจาลองโครงสรางเวบไซตดวย Site Map .......................................................................106

บทท 8 การใชงาน Master Page ......................................................109

ทาความรจกกบโปรเจกตชนด ASP.NET Web Application .................................................110

การเพมเวบฟอรมอนๆ เขามาในโปรเจกตชนด ASP.NET Web Application ..........................112

ขอแตกตางระหวางเวบฟอรมปกตกบ Content Page ..........................................................114

การสรางโปรเจกตแบบ Master Page แบบกาหนดเอง ........................................................116

ทาความรจกกบสวน footer ใน Master Page ตามมาตรฐาน HTML5 ..................................121

บทท 9 พนฐานการตกแตงสวนแสดงผลดวย bootstrap ..........................123

การตกแตงตารางแบบลงสสลบดวย bootstrap ...................................................................125

การตกแตงเมน .................................................................................................................127

การสรางเมนแบบ Collapse ..............................................................................................128

บทท 10 พนฐานการใชงานระบบฐานขอมล SQL Server 2014 Express Edition...133

การเตรยมสภาพแวดลอมใหพรอมใชงาน ...........................................................................133

การดาวนโหลดและตดตง SQL Server 2014 Express Edition ............................................134

พนฐานการใชงานฐานขอมล SQL Server 2014 Express Edition .......................................137

การสรางความสมพนธระหวางตารางในฐานขอมล SQL Server 2014 .................................140

การ Backup และ Restore ฐานขอมล SQL Server 2014 ..................................................142

Page 5: Contents · 2019-01-29 · การกําหนดหมายเลขบรรทัดโค ดและสีธีมให กับ VS 2013 .....3 บทที่ 2 พื้นฐานการ

Professional ASP.NET ProgrammingIVIV

การยกเลกปองกนการแกไขโครงสรางตาราง .......................................................................145

การเพมฐานขอมล Northwind เขาไปใน SQL Server 2014 Express Edition .......................146

บทท 11 การทางานกบระบบฐานขอมลดวย LINQ to SQL ........................149

พนฐานการแสดงขอมลดวยเวบคอนโทรล LinqDataSource ................................................150

การจดเรยงและแบงหนาขอมลในเวบคอนโทรล GridView ...................................................157

การควรขอมลจากฐานขอมลดวย LINQ to SQL แบบเขยนโคดโดยตรง ................................159

การสงใหเมธอดทางานโดยอตโนมต ..................................................................................161

เขยนโคดใชงาน LINQ to SQL แบบกาหนดคอลมนเอง ......................................................164

การเขยน LINQ to SQL แบบกาหนดเงอนไขโดยอาศยไวยากรณ Lambda Expression ........169

การใชงาน LINQ to SQL ไวยากรณแบบผสม .....................................................................171

การแสดงขอมลจาก 2 ตารางขนไปดวย LINQ to SQL ........................................................173

การแสดงขอมลจากหลายตารางดวยคาสง Join ..................................................................177

พนฐานการแสดงขอมลแบบรายการดวยเวบคอนโทรล DropDownList ................................179

การแสดงขอมลแบบรายการดวยเวบคอนโทรล DropDownList แบบอตโนมต ......................183

บทท 12 การจดการขอมลในฐานขอมลดวย LINQ to SQL .......................187

การเพมขอมลในเวบคอนโทรล GridView ดวย LINQ to SQL ..............................................187

การแกไขขอมลในเวบคอนโทรล GridView ดวย LINQ to SQL ............................................192

บทท 13 การใชงาน JavaScript รวมกบ ASP.NET ................................199

เรมตนการใชงาน JavaScript รวมกบเวบคอนโทรล ............................................................200

พนฐานการใชงาน JavaScript รวมกบเวบคอนโทรลแบบเขยนโคดในบรรทดเดยวกน ...........203

การเรยกใช JavaScript ดวยเวบคอนโทรลของ ASP.NET ...................................................206

การอางองเวบคอนโทรลดวย JavaScript ...........................................................................207

การใชงาน JavaScript กบเวบคอนโทรล CheckBoxList .....................................................209

การใชงาน JavaScript กบเวบคอนโทรล DropDownList .....................................................211

พนฐานการตรวจสอบคาในเวบคอนโทรลดวย JavaScript ...................................................212

การกาหนดใหคลกปม Button ไดเพยง 1 ครง ....................................................................214

การใชงานเวบคอนโทรล GridView ดวยคอลมนแบบ CheckBox .........................................215

การใชงานเวบคอนโทรล GridView แบบ CheckBox ฝง Server ..................................216

การใชงานเวบคอนโทรล GridView แบบ CheckBox ฝง Client ...................................219

การทา Header ในเวบคอนโทรล GridView แบบ SelectAll .................................................221

Page 6: Contents · 2019-01-29 · การกําหนดหมายเลขบรรทัดโค ดและสีธีมให กับ VS 2013 .....3 บทที่ 2 พื้นฐานการ

สารบญ VV

บทท 14 การทางานรวมกนระหวางสครปตฝง Client กบโคดฝง Server .........227

การสงคาจาก Client Side ไปส Server Side ......................................................................227

การสงเมธอดของฝง Server ทางานดวยสครปตฝง Client ...................................................229

การใชคาสงกลบจากฝง Server ..........................................................................................232

การรบ-สงคาตวแปรจากไฟล HTML ไปส ASP.NET ...........................................................234

การรบ-สงคาจากเวบฟอรมแบบ ModalDialog ....................................................................238

Popup กบไฟล HTML ......................................................................................................245

บทท 15 การสรางเวบไซตสาหรบแสดงผลในอปกรณ Mobile ....................249

การดาวนโหลด jQuery Mobile .........................................................................................249

พนฐานการออกแบบ Layout เพอแสดงผลใน Mobile Devices ............................................251

การสรางสวนแสดงผลแบบหลายหนาจอ ............................................................................254

บทท 16 Workshop : Webboard ...................................................257

ขนตอนการสรางโปรเจกตแบบ ASP.NET Web Application ................................................258

การใชงานกระดานขาว .....................................................................................................259

ขนตอนการแกไขโปรเจกต ASP.NET Web Application........................................................262

การสรางฐานขอมล Webboard .........................................................................................270

การตงกระทดวยเวบฟอรม Post.aspx ...............................................................................279

การตอบกระทดวยเวบฟอรม Reply.aspx...........................................................................284

การคนหากระทดวยเวบฟอรม Search.aspx ......................................................................296

บทท 17 พนฐานการสราง Mobile Site ..............................................299

การสรางเวบไซตสาหรบแสดงผลบน Mobile Devices .........................................................299

Page 7: Contents · 2019-01-29 · การกําหนดหมายเลขบรรทัดโค ดและสีธีมให กับ VS 2013 .....3 บทที่ 2 พื้นฐานการ

Basi

c AS

P.NET

Page 8: Contents · 2019-01-29 · การกําหนดหมายเลขบรรทัดโค ดและสีธีมให กับ VS 2013 .....3 บทที่ 2 พื้นฐานการ

บทท 1 เตรยมความพรอมกอนพฒนา Web Application ดวย ASP.NET 1

เตรยมความพรอมกอนพฒนา Web Application ดวย ASP.NET

1

ในปจจบนการพฒนา Web Application ดวย ASP.NET ไดถกอพเดตเพมเตมฟเจอรในดานตางๆ

มากมายทงฝง Client และฝง Server ไมวาจะเปน Web API, การทางานกบระบบ Cloud, การสรางสวนแสดงผล

ใหเหมาะสมกบอปกรณพกพา (Mobile Devices), การทางานกบ JavaScript Framework ตางๆ เปนตน

ฟเจอรในแตละดานทเพมเขามา ลวนแลวแตมความสาคญในแตละดานทตนเองรบผดชอบอย และ

สามารถทางานรวมกนเปนระบบเดยวกนไดอกดวย

ความสาคญอกประการหนงของ ASP.NET กคอ เปนการพฒนา Web Application ตามมาตรฐาน

ของ HTML5 โดยอตโนมตอกดวย

การเตรยมสภาพแวดลอมและการอพเดตโดยปกตแลวหลงจากทเราตดตง Visual Studio 2013 แลว (เรยกสนๆ วา VS 2013) สภาพแวดลอม

ของเราถอวาพรอมทจะพฒนา ASP.NET ดวยภาษา VB 2013 หรอ VC# 2013 แลว

แตในภาวะปจจบน การอพเดตสภาพแวดลอมถอไดวามความสาคญเปนอยางยงอกประการหนง

ผเขยนขอแนะนาใหผอานไปทเวบไซตของไมโครซอฟทท http://msdn.microsoft.com/ เพอตรวจสอบอย

เสมอวามการอพเดตเครองมอตางๆ ของ VS 2013 อะไรบาง ซงมลกษณะเปนแบบดาวนโหลดและตดตง

แบบ Online โดยอตโนมต

Page 9: Contents · 2019-01-29 · การกําหนดหมายเลขบรรทัดโค ดและสีธีมให กับ VS 2013 .....3 บทที่ 2 พื้นฐานการ

Professional ASP.NET Programming2

รปท 1-1แสดงสภาพแวดลอมของ VS 2013

รปแบบการอพเดตดงกลาว ถอวารวดเรวและสามารถตอบสนองกบโลกความเปนจรงในปจจบนได

เปนอยางด สงผลใหนกพฒนาสามารถเรยกใชฟเจอรตางๆ ททนสมยไดทนท ณ ชวงเวลานนๆ นนเอง

รปแบบการนาเสนอของหนงสอเลมนเนอหาทนาเสนอในหนงสอเลมน เปนการศกษาพนฐานการพฒนา Web Application ดวย ASP.NET

ประกอบดวยภาษา VB 2013 กบ VC# 2013 ครบถวนทกหวขอและทกตวอยาง

การลงสครปตของ ASP.NET และโคดของ VB 2013 กบ VC# 2013 จะมการระบชอไฟลกากบไว

ทกครง เพอใหผอานทราบวาโคดทลงในแตละหนาเปนของไฟลทชอวาอะไร ตวอยางทนาเสนอในหนงสอ

เลมนมครบทง 2 ภาษา

สวนรปภาพทลงในหนงสอเลมน ผเขยนเลอกใชภาพจาก VB 2013 เปนหลก แตสามารถใชกบ

ขนตอนของภาษา VC# 2013 ไดอกดวย

การกาหนดให VS 2013 แสดงไดอะลอกบอกซเลอก

ชนดโปรเจกตไมวาผอานจะใช VS 2013 Edition ใดกตาม ตองมการกาหนดคาใหกบ VS 2013 เลกนอย เพอให

เหมาะสมกบการใชงานกลาวคอ ทกๆ ครงทเปดโปรแกรม VS 2013 ขนมา ควรจะมไดอะลอกบอกซ Show

New Project dialog box ปรากฏขนมา เพอแสดงโปรเจกตชนดตางๆ ใหเลอกใชงาน

ใหผอานเปด VS 2013 ขนมา คลกเมน TOOLS > Options… ทหวขอ Environment เลอกหวขอ

Startup ทชอง At Startup: เลอกรายการ Show New Project dialog box ดงรปท 1-2

Page 10: Contents · 2019-01-29 · การกําหนดหมายเลขบรรทัดโค ดและสีธีมให กับ VS 2013 .....3 บทที่ 2 พื้นฐานการ

บทท 1 เตรยมความพรอมกอนพฒนา Web Application ดวย ASP.NET 3

รปท 1-2แสดงการเลอกรายการ Show New Project dialog box

รปท 1-3แสดงหมายเลขกากบโคดในแตละบรรทด

ทกๆ ครงทเปดโปรแกรม VS 2013 ขนมา จะมไดอะลอกบอกซ Show New Project dialog box

ปรากฏขนมาเปนลาดบแรก เพอใหเราเลอกชนดโปรเจกตทตองการใชงาน

การกาหนดหมายเลขบรรทดโคดและสธมใหกบ VS 2013ยงมการปรบแตงใหสภาพแวดลอมของ VS 2013 เหมาะสมกบการใชงานอก 2 กรณคอ

1. การกาหนดหมายเลขบรรทดโคด ใหผอานคลกเมน TOOLS > Options… ทหวขอ Text Editor >

All Languages คลกเลอกรายการ Line numbers ดงรปท 1-3

เลอก 1

เลอก2

คลก3

เลอก1.1

เลอก 1.2

คลก 1.3

Page 11: Contents · 2019-01-29 · การกําหนดหมายเลขบรรทัดโค ดและสีธีมให กับ VS 2013 .....3 บทที่ 2 พื้นฐานการ

Professional ASP.NET Programming4

2. การกาหนดสธมใหกบ VS 2013 ผอานสามารถกาหนดสธมใหกบสภาพแวดลอมของ VS 2013 ได

3 สคอ สโทนนาเงน (Blue), สดา (Dark) หรอสโทนขาว (Light) ทหวขอ Environment > General

รปท 1-4แสดงการกาหนดสธมใหกบ VS 2013

รปภาพทใชประกอบในหนงสอเลมน ผเขยนเลอกใช VS 2013 แบบโทนสขาว (Light) ทงหมด

สรปทายบท

หลงจากทผอานเตรยมสภาพแวดลอมใหพรอมพฒนา Web Application ดวย ASP.NET แลว เนอหา

ในบทตอไปจะเขาสขนตอนการเขยนโปรแกร มทแทจรง

คลก2.3

เลอก2.2

เลอก 2.1

Page 12: Contents · 2019-01-29 · การกําหนดหมายเลขบรรทัดโค ดและสีธีมให กับ VS 2013 .....3 บทที่ 2 พื้นฐานการ

บทท 2 พนฐานการสราง Web Application ดวย ASP.NET 5

พนฐานการสราง Web Application ดวย ASP.NET

2

การศกษาในลาดบแรกกคอ วธการสรางโปรเจกต ASP.NET ใน VS 2013, การเขยนโคดของภาษา

VB 2013 หรอภาษา VC# 2013 ในขนตน รวมไปถงวธการทดสอบโปรเจกต ASP.NET วา เมอปรากฏใน

บราวเซอรแลวจะมผลการทางานอยางไร

โปรเจกต ASP.NET แรกของคณการสราง Web Application ในขนแรก ผเขยนเลอกใชโปรเจกตแบบวาง ไมมการกาหนดโครงสราง

ใดๆ ทงสน เมอเราตองการใชงานอะไร เราตองเปนผเพมเขามาในโปรเจกตเอง

Page 13: Contents · 2019-01-29 · การกําหนดหมายเลขบรรทัดโค ดและสีธีมให กับ VS 2013 .....3 บทที่ 2 พื้นฐานการ

Professional ASP.NET Programming6

รปท 2-1แสดงการสรางโปรเจกตแบบ Web ของภาษา VB 2013 และภาษา VC# 2013

ตวอยางท 2-1 โปรเจกต ASP.NET แรกของเรา มขนตอนดงน

1. ใหเปด VS 2013 ขนมา เลอกพฒนาโปรเจกตแบบ Web > ASP.NET Web Application ดงรปท

2-1

จากรปท 2-1 ในขนตนน ผเขยนนาเสนอเพยงภาษาเดยวคอ VB 2013 สวนภาษา VC# 2013 จะม

ขนตอนการทางานเชนเดยวกน

เลอก1.2

เลอก1.2

เลอก Path1.4

เลอก Path1.4

กรอกชอ1.3

กรอกชอ1.3

คลก 1.5

เลอก 1.1

เลอก 1.1

คลก 1.5

Page 14: Contents · 2019-01-29 · การกําหนดหมายเลขบรรทัดโค ดและสีธีมให กับ VS 2013 .....3 บทที่ 2 พื้นฐานการ

บทท 2 พนฐานการสราง Web Application ดวย ASP.NET 7

รปท 2-2แสดงการเลอกชนดโปรเจกตทตองการสราง

รปท 2-3แสดงสภาพแวดลอมแบบวาง

จากรปท 2-3 เหนไดวาโปรเจกตทถกสรางขนมายงไมมไฟลใดๆ ทงสน ทกสงทกอยางผอานตอง

เปนผเพมเขามาดวยตวเอง

เลอก2.1

เลอก 2.2

คลก 2.3

2. เปนขนตอนการเลอกชนดโปรเจกตทตองการสรางขนมา ในกรณนเราตองการโครงสรางโปรเจกต

แบบวาง จงคลกไอคอน Empty แบบ Web Forms ดงรปท 2-2

Page 15: Contents · 2019-01-29 · การกําหนดหมายเลขบรรทัดโค ดและสีธีมให กับ VS 2013 .....3 บทที่ 2 พื้นฐานการ

Professional ASP.NET Programming8

รปท 2-4แสดงการเพมเวบฟอรมเขามาในโปรเจกตปจจบน

รปท 2-5แสดงโครงสรางไฟลในหนาตาง Solution Explorer

เลอก3.1

3. การเพมเวบฟอรมเขามาในโปรเจกต ใหผอานคลกเมน PROJECT > Add New Item… เลอก

Web Form ดงรปท 2-4

จากรปท 2-4 เวบฟอรมหนาแรก ผอานควรตงชอวา Default.aspx สวนเวบฟอรมหนาอนๆ ขนอย

กบความตองการ

4. คลกปม เพอแสดงรายการไฟลทงหมดในหนาตาง Solution Explorer โดยท

เลอก 3.2

กรอกชอ3.4

เลอก3.3

คลก3.5

คลก4

● ไฟล *.aspx ทาหนาทเกบสครปตของ ASP.NET เปนสวนแสดงผลทปรากฏในบราวเซอร

ของผใชงาน ● ไฟล *.vb หรอ *.cs หมายถง โคดทางานทเราตองเขยนขนมาดวยภาษา VB 2013 (*.vb)

หรอภาษา VC# 2013 (*.cs)

Page 16: Contents · 2019-01-29 · การกําหนดหมายเลขบรรทัดโค ดและสีธีมให กับ VS 2013 .....3 บทที่ 2 พื้นฐานการ

บทท 2 พนฐานการสราง Web Application ดวย ASP.NET 9

รปท 2-6แสดงการกาหนดแอตทรบวต debug เทากบ true

5. เขยนโคดเพอลองสราง Web Application แบบงายๆ ในไฟล Default.aspx.vb (.cs) ดงโคดตอไปน

โคด VB 2013 ท 2-1 โปรเจกต ASP.NET แรกของคณ (Default.aspx.vb)Option Explicit OnOption Strict On

Public Class _Default Inherits System.Web.UI.Page

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load Response.Write("Hello ASP.NET 4.5.1") End SubEnd Class

โคด VC# 2013 ท 2-1 โปรเจกต ASP.NET แรกของคณ (Default.aspx.cs)using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;

namespace FirstWebApps{ public partial class Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { Response.Write("Hello ASP.NET 4.5.1"); } }}

6. ทไฟล Web.config มสงทควรแกไขกคอ ในขณะทโปรเจกตของเราอยระหวางพฒนา ยงไมเสรจ

สมบรณ ใหผอานกาหนดแอตทรบวต debug="true" เพอให VS 2013 มการ debugging โคด

ทางานของเราในขณะทรนโปรเจกตดวย ดงรปท 2-6

เราจะกาหนดคาแอตทรบวต debug เทากบ false กตอเมอโปรเจกตของเราพฒนาเสรจสมบรณ

ไมมการแกไขอกแลว

Page 17: Contents · 2019-01-29 · การกําหนดหมายเลขบรรทัดโค ดและสีธีมให กับ VS 2013 .....3 บทที่ 2 พื้นฐานการ

Professional ASP.NET Programming10

รปท 2-7แสดงสภาพแวดลอมของ VS 2013 แบบ Web Application

รปท 2-8แสดงแถบ Server Explorer

ทาความรจกกบสภาพแวดลอมของ VS 2013 แบบ

ASP.NET Web Applicationเราจะมาลองทาความรจกกบสภาพแวดลอมของ VS 2013 แบบ Web Application ในขนตน

1. แถบ Toolbox เปนแถบเครองมอเกบเวบคอนโทรลตางๆ ทสามารถเรยกใชงานได โดยแตละ

แทบจะแยกออกตามหนาท

2. แถบ Server Explorer ทาหนาทแสดงการเชอมตอกบฐานขอมล SQL Server ทเราเคยตดตอ

หรอเคยใชงานกบโปรเจกตปจจบน ดงรปท 2-8

Page 18: Contents · 2019-01-29 · การกําหนดหมายเลขบรรทัดโค ดและสีธีมให กับ VS 2013 .....3 บทที่ 2 พื้นฐานการ

บทท 2 พนฐานการสราง Web Application ดวย ASP.NET 11

รปท 2-9แสดงรายการไฟลทปรากฏในหนาตาง Solution Explorer ของ ASP.NET ของภาษา VB 2013

รปท 2-10กรณคลกแทบ Source

3. สวนแสดงผลของเวบฟอรม เปนพนทสาหรบแสดงผลของแตละเวบเพจทเราเปนผออกแบบ

ขนมา แบงออกเปน 3 แบบคอ ● Design หมายถง แสดงเวบเพจในโหมดออกแบบ ● Split หมายถง แสดงเวบเพจในโหมดออกแบบและแสดงโคดดวย โดยการแบงหนาจอ

ออกเปน 2 สวน ● Source หมายถง แสดงโคดของเวบเพจปจจบน

4. หนาตาง Solution Explorer ทาหนาทแสดงโครงสรางเวบเพจ และรายการโฟลเดอรตางๆ ของ

โปรเจกตปจจบนทเปดขนมา

โคดการทางานของภาษา VB 2013 เกบอยในไฟล *.vb สวนภาษา VC# 2013 เกบอยในไฟล *.cs

ของแตละโปรเจกต แสดงอยในหนาตาง Solution Explorer ดงรปท 2-9

จากรปท 2-9 ใหผอานคลกปม เพอแสดงรายการไฟลทงหมดของโปรเจกตปจจบนทนาสนใจคอ ● ไฟล Default.aspx ทาหนาทเปนสวนแสดงผลในหนาเวบเพจ สครปตตางๆ ทเกดขนในไฟล

นเกดจากการเรยกใชงานเวบคอนโทรลตางๆ ในแถบเครองมอ Toolbox ถกสรางขนมาโดย

อตโนมตดวย VS 2013

Page 19: Contents · 2019-01-29 · การกําหนดหมายเลขบรรทัดโค ดและสีธีมให กับ VS 2013 .....3 บทที่ 2 พื้นฐานการ

Professional ASP.NET Programming12

รปท 2-11แสดงพนทการเขยนโคดทางาน *.vb (*.cs)

รปท 2-12กรณโฟกสคอนโทรล Button

ถาเราโฟกสทไฟลนามสกล *.aspx ในหนาตาง Solution Explorer แลวคลกแทบ Source จะเปนการ

แสดงสครปต ASP.NET ของไฟล *.aspx ทเราเลอก

แตถาเราคลกแทบ Design หมายถง เราตองการดสวนแสดงผลในขนตนวาเปนอยางไร อาจจะเหมอน

หรอแตกตางไปจากทเราดในบราวเซอรจรงกได ขนอยกบการเขยนสครปตของเราเปนหลก ● ไฟล Default.aspx.vb (.cs) ทาหนาทเกบโคดการทางานของภาษา VB 2013 เปนพนททเรา

ตองเขยนโคดขนมานนเอง สวนโปรเจกตแบบภาษา VC# 2013 จะมลกษณะเชนเดยวกบแบบภาษา

VB 2013 แตกตางกนตรงทวาไฟลทเกบโคดการทางานมนามสกล *.cs นนคอ Default.aspx.cs

เราเรยกโครงสรางโคดดงกลาววา การเขยนโคดแบบ Code-Behind

5. หนาตาง Properties หมายถง คณสมบตตางๆ ของคอนโทรล, อลเมนต หรอออบเจกตปจจบน

ทกาลงโฟกสอยในสวนของการออกแบบ (แทบ Design)

จากรปท 2-12 เหนไดวาผเขยนโฟกสทคอนโทรล Button ทหนาตาง Properties จะแสดงรายการ

คณสมบตทคอนโทรล Button สนบสนนใหเราเหนโดยอตโนมต

Page 20: Contents · 2019-01-29 · การกําหนดหมายเลขบรรทัดโค ดและสีธีมให กับ VS 2013 .....3 บทที่ 2 พื้นฐานการ