Tag Archive ASP.NET Core Web API

Byadmin

ASP.NET CORE WEB API ตอนที่ 2 การสร้าง Controller

ASP.NET CORE WEB API ตอนที่แล้ว (ตอนที่ 1 การสร้างโปรเจ็ค) ได้ทดลองสร้างและ run เว็บแอปปลิเคชั่นในตอนนี้ จะเป็นการเพิ่ม controller เข้ามาในโปรเจ็ค ผลก็คือทำให้โปรเจ็คมี Path เพิ่มเติมขึ้นมาตามที่เราระบุ

รู้จัก Controller กันก่อน

Controller คือส่วนที่มีหน้าที่บริหารจัดการ request ที่ผู้ใช้งานติดต่อมายัง application ของเรา โดยการรับคำสั่ง (เช่นผู้ใช้งานพิมพ์ url ใน browser แล้วกด enter เพื่อเรียกเว็บ) แล้วทำงาน (Action) โดยอาจจะส่งไปหา Model หรือ View เพื่อส่งค่ากลับไปยังผู้ใช้งาน

ขั้นตอนการสร้าง controller ใน ASP.NET CORE WEB API

เพื่อให้เห็นภาพในการทำงาน เราจะทำการเพิ่ม controller เข้าไปยังโปรเจ็คที่เราเคยสร้างไว้ในตอนที่แล้ว โดยใน

1. คลิกขวาที่ Folder controller จากนั้นเลือก Add controller

2. เลือก API Read write

3 กำหนดชื่อ โดยชื่อที่กำหนดนี้จะเป็นชื่อที่ใช้ใน URL และจะต้องมีคำว่า controller ต่อท้ายด้วย ในตัวอย่างกำหนดเป็น StudentsController

4.ตอนนี้เราจะมีไฟล์ controller เป็นที่เรียบร้อยแล้ว

5. ทำการ modify ข้อความสักเล็กน้อย

6. รันโปรเจ็ค โดยกดปุ่ม ISS Express จากนั้นพิมพ์ url โดยระบุชื่อ controller ของเรา จะเห็นว่าโปรแกรมของเราจะคืนค่ามายังเว็บ browser แล้วครับ

Controller กับ Application Path ใน ASP.Net CORE project

การกำหนด path ของโปรแกรมนั้น จะกำหนดในไฟล์ controller โดยจะมี code [Route(“api/[controller]“)] ระบุอยู่

ถ้าเราต้องการ Modify path ตามใจเรา เราก็แก้ไขตรงส่วนนี้ได้ เช่น แก้เป็น [Route[“myAPI/V2/[controller]”)] อย่างนี้เป็นต้น เมื่อผู้ใช้งานเรียกใช้ ก็ต้องระบุ path url เป็น http://localhost:/myAPI/V2/ชี่อcontroller ก็จะวิ่งไปหาไฟล์ controller ของเราได้ครับ

วิธีเปลี่ยน controller ตั้งต้นหรือ url ตั้งต้น ของโปรเจ็คเรา

หากเรารันโปรแกรมจะเห็นว่า มันจะวิ่งไปที่ https://localhost:44332/api/values เป็นที่แรก หากเราต้องการเปลี่ยนไปที่ controller ที่เราต้องการก็สามารถทำได้ โดยไปแก้ไขที่ไฟล์ launchSetting.json เป็นค่าที่เราต้องการได้ครับ

สรุป

สำหรับตอนนี้จะเห็นว่า เราได้ทำการเพิ่ม controller เข้ามายังโปรเจ็ค ซึ่ง controller มีหน้าที่ในการรับคำสั่งหรือรับ request จาก user แล้วนำมาประมวลผลหรือส่งต่อไปยัง view หรือ model เพื่อ ส่งค่าคืนกลับไปให้กับ user อีกทีครับ

สำหรับตอนนี้ สวัสดีครับ

ติดตามบทความเกี่ยวกับ coding ได้ที่นี่ https://www.mifasoft.com/category/article/coding/

ติดตามความเคลื่อนไหน mifasoft ผ่านทาง facebook fan page : www.facebook.com/mifasoft

Byadmin

ตัวเลือก Create a new ASP.Net Core Web Application

ตัวเลือก Create a new ASP.NET Core Web Application อยู่ในหน้าต่างที่ขึ้นมาตอนที่เราสร้างโปรเจ็คใหม่ และมันมีหลายตัวเลือกให้เลือก เช่น Empty, API, Web Application, Web Application (Model-View-Controller) เป็นต้น

ในตอนนี้เราจะมาดูกันว่า เราควรจะเลือกตัวไหนกันดีในแต่ละโปรเจ็คที่เราจะทำกันครับ

ขั้นตอนการเข้าสู่หน้าจอเพื่อแสดง ตัวเลือก Create a new ASP.NET Core Web Application

1 เปิดโปรแกรม Visual studio 2019 ขึ้นมา จากนั้นจะมีรายการโปรเจ็คที่เราเคยสร้างไว้ แสดงในหน้าแรก ให้เราทำการกดปุ่ม Create a new Project

2. ที่ Create a new Project ให้เลือก ASP.Net core web application แล้วกด Next

3 ใส่ชื่อโปรเจ็ค และกำหนด Directory จากนั้น กด Create

4 เราจะเข้าสู่หน้าจอ Create a New ASP.net Core web application แล้ว

ตัวเลือกที่มีหลังจากลงโปรแกรม Visual studio 2019 ใหม่

ตัวเลือก

คุณสมบัติและการใช้งาน

Empty

– สิ่งที่ได้ สร้างโปรเจ็คว่างๆ ขึ้นมาให้เรา โดยเราจะทำการเพิ่มไฟล์กำหนดโครงสร้างไฟล์ ด้วยตนเอง


– การใช้งาน ต้องการกำหนดทุกอย่างด้วยตนเอง

API

– สิ่งที่ได้ ได้โปรเจ็คที่มีการวางโครงสร้างสำหรับการทำ API โดยจะมีการสร้างตัวอย่าง Controller ไว้ให้ สำหรับทำ Rest service


– การใช้งาน ใช้สร้างโปรแกรมในส่วนของ Backend ซึ่งอาจจะสร้างแยกเป็นโปรเจ็คเดี่ยวๆ หรือจะเพิ่มเติมส่วนของ View เข้ามาภายหลังก็ได้

Web Application

– สิ่งที่ได้


ได้โปรเจ็คที่มี Razor page ติดมาด้วย ซึ่งจะมี sturcture ของ folder แบบ Webform ไม่ได้แบ่งออกเป็น model view controller แต่จะรวมหน้า .chtml ไว้ที่ folder page


– การใช้งาน


ใช้สร้างโปรเจ็คที่ส่วนของ Front end + back end อยู่ในโปรเจ็คเดียวกัน


ใช้สร้าง web ใน ไสตล์ Webform โดยที่ไม่ได้แบ่งโครงสร้างออกเป็น Model view controller

Web Application (Model-View-Controller)

– สิ่งที่ได้ ได้โปรเจ็คที่มีโครงสร้างแบบ Model – View – Controller (MVC)


– การใช้งาน ใช้สร้างโปรเจ็คที่ใช้โครงสร้างแบบ MVC โดย Frontend กับ Backend อยู่ในโปรเจ็คเดียวกัน

ข้อควรคำนึงก่อนการเลือกใช้งาน

การสร้าง Web application โดยทั่วไปจะแบ่งออกเป็น 2 ส่วนคือ

Back end ส่วนหลังบ้าน จะให้บริการข้อมูลต่างๆ แล้วเชื่อมต่อไปส่วนหน้าบ้าน

Front end ส่วนหน้าบ้าน จะเป็นส่วนแสดงหน้าจอให้ผู้ใช้งาน

Webform vs MVC : MVC คือการแบ่งส่วนของไฟล์ sourcecode โปรเจ็คออกเป็น Model view และ controller ซึ่งจะมีความซับซ้อนกว่า ลักษณะของ Webform

แล้วเลือกอะไรดี

ถ้าต้องการทำทุกอย่างเอง กำหนดเอง เลือก Empty

ถ้าจะทำโปรเจ็ค Back end เลือก API (หรือทำ Backend ก่อนแล้วจะมาเพิ่มส่วน front end ในภายหลัง) โดยจะได้ folder controllers และไฟล์ต่างๆ ที่เหมาะกับการทำ API มาให้

ถ้าจะทำโปรเจ็คที่มี Back end + Front end ในโปรเจ็คเดียวกัน หรือทำไสตล์ Webform ไม่ได้แยกเป็น MVC เลือก Web application

ถ้าจะทำเว็บแบบ MVC ให้เลือก Web application (Model+View+Controller)

สรุป

สำหรับ Template ที่มีให้นั้นก็จะอำนวยความสะดวกในตอนเริ่มต้นการสร้างโปรเจ็ค ช่วยลดขั้นตอนการสร้าง folder หรือ หน้า page ต่างๆ

ทั้งนี้ แต่ละ template ก็ไม่ได้จำกัดว่าเราจะต้องสร้างตามที่กำหนดมาให้เท่านั้น เราสามารถมาปรับเปลี่ยนในภายหลังได้เช่นกัน

สำหรับตอนนี้ก็หวังว่าผู้อ่านจะเห็นภาพในการเลือกตัวเลือกต่างๆในการสร้างโปรเจ็คเริ่มต้นนะครับ แล้วพบกันใหม่ตอนหน้า ตอนนี้ สวัสดีครับ

ติดตามบทความเกี่ยวกับ Coding ได้ที่นี่ >> https://www.mifasoft.com/category/article/coding/

ติดตามความเคลื่อนไหวของ Mifasoft ได้ที่ facebook fan page : >> https://www.facebook.com/mifasoft

Byadmin

ASP.NET CORE WEB API ตอนที่ 1 การสร้างโปรเจ็ค

Asp.net core ได้เตรียม template สำหรับการสร้างโปรเจ็คไว้แล้ว สามารถสร้างแล้วลองรันดูได้เลย

ขั้นตอน

1.เลือก File > New project

ภาพที่ 1 การสร้างโปรเจ็ค

2. เลือก Asp.net core web application

ภาพที่ 2 เลือก project web API

3. เลือก Version เป็นล่าสดุ (ในขณะเที่เขียนเป็นเวอร์ชั่น 2.1) จากนั้น เลือก API และเอา check ที่ docker ออก

ภาพที่ 3 เลือกเวอร์ชั่นล่าสุด แล้วเลือก API

4. Visual studio จะทำการสร้าง Project ให้ โดยมี structure และไฟล์ที่จำเป็นต่างๆ ไว้ให้แล้ว

ภาพที่ 4 โปรเจ็คถูกสร้างพร้อมด้วยไฟล์ต่างๆ ที่จำเป็น

5. ทำการทดสอบ Run หน้าต่าง browser จะแสดงตัวอย่างข้อมูล

ภาพที่ 5 browser แสดงข้อมูลตัวอย่าง