เว็บแอปพลิเคชัน ASP.NET แรกของคุณ: วิธีเริ่มต้นใช้งาน

เว็บแอปพลิเคชัน ASP.NET แรกของคุณ: วิธีเริ่มต้นใช้งาน

ASP.NET เป็นเฟรมเวิร์กข้ามแพลตฟอร์มฟรีของ Microsoft สำหรับสร้างเว็บแอปและบริการ แพลตฟอร์ม ASP.NET เป็นส่วนขยายของ .NET ซึ่งเป็นแพลตฟอร์มเครื่องมือสำหรับนักพัฒนา ภาษาโปรแกรม และไลบรารีที่ใช้สร้างแอปพลิเคชันต่างๆ





อย่างที่คุณอาจเดาได้ ASP.NET เป็นเฟรมเวิร์กที่ยอดเยี่ยมที่ผู้เริ่มต้นสามารถใช้เพื่อสร้างเว็บแอป มีความยืดหยุ่นสูงและใช้งานง่าย ในบทความนี้ เราจะช่วยคุณสร้างเว็บ pplication แรกของคุณใน ASP.NET โดยใช้ Microsoft Visual Studio





ASP.NET คืออะไร?

ASP ย่อมาจาก 'Active Server Pages'; ASP และ ASP.NET เป็นเทคโนโลยีฝั่งเซิร์ฟเวอร์ที่ใช้เพื่อแสดงหน้าเว็บแบบโต้ตอบ ASP.NET ช่วยให้นักพัฒนามีความยืดหยุ่นมากในระบบนิเวศขนาดใหญ่และใช้งานได้หลากหลาย พร้อมด้วยไลบรารีและเครื่องมือต่างๆ นักพัฒนายังสามารถสร้างไลบรารีแบบกำหนดเองที่สามารถแชร์กับแอปพลิเคชันใดๆ ที่สร้างบนแพลตฟอร์ม .NET ได้





ที่เกี่ยวข้อง: Web Frameworks ที่ควรค่าแก่การเรียนรู้สำหรับนักพัฒนา

คุณสามารถเขียนโค้ดส่วนหลังสำหรับแอปพลิเคชัน ASP.NET ของคุณใน C#, Visual Basic หรือแม้แต่ F# ความยืดหยุ่นนี้ช่วยให้นักพัฒนาสามารถเขียนโค้ดตรรกะทางธุรกิจและชั้นการเข้าถึงข้อมูลได้อย่างมีประสิทธิภาพ ข้อได้เปรียบที่สำคัญอีกประการหนึ่งของการใช้ ASP.NET คือการสร้างหน้าเว็บแบบไดนามิกโดยใช้ C# ด้วยความช่วยเหลือของเครื่องมือไวยากรณ์การสร้างเทมเพลตหน้าเว็บที่เรียกว่า Razor



skype เชื่อมต่อ windows 10 ไม่ได้

Razor ยังมีไวยากรณ์สำหรับการสร้างหน้าเว็บแบบไดนามิกเชิงโต้ตอบที่รวม HTML, CSS, JavaScript และ C# โค้ดฝั่งไคลเอ็นต์มักจะเขียนด้วย JavaScript และ ASP.NET ยังสามารถรวมเข้ากับเฟรมเวิร์กเว็บอื่นๆ เช่น Angular หรือ React

ที่เกี่ยวข้อง: Tailwind CSS กับ Bootstrap: กรอบงานไหนดีกว่ากัน?





ASP.NET ยังมอบระบบการตรวจสอบสิทธิ์ให้กับนักพัฒนาซึ่งรวมถึงฐานข้อมูล ไลบรารี เทมเพลตสำหรับจัดการการเข้าสู่ระบบ การพิสูจน์ตัวตนภายนอกกับ Google, Facebook ฯลฯ และอื่นๆ นักพัฒนาสามารถใช้ ASP.NET บนแพลตฟอร์มหลักทั้งหมด รวมทั้ง Windows, Linux, macOS และแม้แต่ Docker

วิธีสร้างเว็บแอปพลิเคชัน ASP.NET ใน Visual Studio

ก่อนสร้างเว็บแอปพลิเคชัน ควรทำความคุ้นเคยกับ HTML, CSS, JavaScript และ C# ก่อน ดีที่สุด เพื่อให้คุณได้รับประโยชน์สูงสุดจาก ASP.NET มาดูกันว่าคุณสามารถสร้างเว็บแอปพลิเคชันใน ASP.NET ใน Microsoft Visual Studio 2019 ได้อย่างไร





ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้งแพ็คเกจซอฟต์แวร์ต่อไปนี้:

วิธีทำให้คอมพิวเตอร์ของคุณเงียบขึ้นฟรี
  • Microsoft Visual Studio 2019 หรือดีกว่า
  • ASP.NET และภาระงานการพัฒนาเว็บจาก Visual Studio Installer

การทำความเข้าใจคอมโพเนนต์โปรเจ็กต์เว็บแอปพลิเคชัน ASP.NET

ก่อนที่คุณจะเริ่มพัฒนาเว็บแอปได้ คุณจำเป็นต้องเข้าใจส่วนประกอบที่สำคัญของ ASP.NET และวิธีใช้งานในเว็บแอปพลิเคชันของคุณเสียก่อน

ในบทช่วยสอนนี้ เราจะใช้เว็บฟอร์ม ASP.NET เพื่อสร้างหน้าเว็บแต่ละหน้า เช่น หน้าแรก ติดต่อเรา เป็นต้น เว็บฟอร์มแต่ละฟอร์มมีสามองค์ประกอบหลัก ได้แก่ ไฟล์ .aspx สำหรับ HTML/CSS และ .aspx ไฟล์โค้ด .cs และไฟล์ .aspx.designer.cs ส่วนใหญ่เราจะทำงานในไฟล์ .aspx และ .aspx.cs สำหรับบทช่วยสอนนี้

ไฟล์ .aspx จะมีโค้ด HTML และ CSS ทั้งหมดของหน้าเว็บของคุณ ตรวจสอบให้แน่ใจว่าคุณใช้แท็ก asp แทนแท็ก HTML เนื่องจากแท็ก asp จะดึงข้อมูลจากเซิร์ฟเวอร์และส่งข้อมูลอินพุตไปยังเซิร์ฟเวอร์ นี่คือคุณสมบัติการทำงานที่จำเป็นในเว็บแอปพลิเคชันแบบไดนามิก

ไฟล์ .aspx.cs มีโค้ด C# ของหน้าเว็บของคุณ และสิ่งนี้จะควบคุมสิ่งที่จะเกิดขึ้นเมื่อมีการโหลดเหตุการณ์บางอย่าง เช่น หน้าเว็บโหลด การคลิกปุ่ม และอื่นๆ คุณสามารถสร้างฟังก์ชันแยกกันสำหรับแต่ละฟังก์ชันและเชื่อมโยงไปยังแท็ก asp ที่เกี่ยวข้องในไฟล์ .aspx ที่เกี่ยวข้อง

มาสเตอร์เพจมีประโยชน์สำหรับนักพัฒนาและเพิ่มองค์ประกอบที่จำเป็น เช่น แถบนำทางและส่วนท้ายให้กับแต่ละหน้าเว็บ แทนที่จะเพิ่มโค้ดเดิมซ้ำๆ นักพัฒนาสามารถเพิ่มโค้ดที่ต้องใช้เทมเพลตทั้งหมดลงในมาสเตอร์เพจหนึ่งหน้า จากนั้นจึงเชื่อมโยงแต่ละเว็บเพจกับมาสเตอร์เพจ เราจะแสดงวิธีการดำเนินการดังกล่าวในหัวข้อต่อไปนี้

สร้าง ASP.NET Web App Project ใหม่

ขั้นตอนแรกในการสร้างเว็บแอปพลิเคชันใน ASP.NET คือการเลือกเทมเพลตโครงการและสร้างเว็บแอปพลิเคชันใหม่:

  1. เปิด Microsoft Visual Studio และคลิกที่ สร้างโครงการใหม่
  2. พิมพ์ ASP.NET ในช่องค้นหาเทมเพลต เลือก ASP.NET เว็บแอปพลิเคชัน ( .NET Framework ) และคลิก ต่อไป . คุณจะไม่ได้รับเทมเพลตนี้หากคุณไม่มีการติดตั้งที่จำเป็นที่กล่าวถึงในส่วนก่อนหน้า
  3. ในหน้าจอถัดไป กำหนดค่าชื่อโปรเจ็กต์และไดเร็กทอรีของคุณแล้วคลิก ต่อไป .
  4. ตอนนี้ Visual Studio จะสร้างเทมเพลตโครงการของคุณ และคุณควรจะสามารถเรียกใช้แอปพลิเคชันเทมเพลตได้โดยคลิกที่ปุ่มเล่นสีเขียวที่ด้านบนของหน้าจอ

สร้างเว็บฟอร์ม ASP.NET ใหม่

เพื่อช่วยให้คุณเข้าใจ ASP.NET ได้ดีขึ้น เราจะสร้างหน้าผลิตภัณฑ์อย่างง่ายสำหรับร้านเกม ขั้นตอนแรกคือการสร้างเว็บฟอร์มใหม่ ในโครงการที่คุณสร้างไว้ก่อนหน้านี้ ให้ไปที่ ไฟล์ > ใหม่ > ไฟล์ และเลือก เว็บฟอร์ม . เมื่อคุณตั้งค่าแล้ว คุณควรจะเห็นไฟล์ .aspx เปล่าที่มีเพียงโค้ดส่วนหัว

ในการเริ่มต้นพัฒนารูปลักษณ์โดยรวมของหน้าเว็บของคุณ คุณสามารถใช้โค้ดใดก็ได้ใน HTML/CSS ด้วยตัวเอง หรือใช้เทมเพลตจาก Tailblocks .

เราตั้งค่าเค้าโครงหน้าผลิตภัณฑ์ด้านบนโดยใช้เทมเพลต จะแสดงรูปภาพผลิตภัณฑ์ รายละเอียดผลิตภัณฑ์ และแถบนำทาง เราเพิ่ม HTML และ CSS ของแถบนำทางโดยใช้หน้าต้นแบบ

ปลอดภัยไหมที่จะซื้อจากความปรารถนา

ในโค้ดด้านบน (ไฟล์ .aspx.cs) เราได้ตั้งค่า หน้าโหลด ฟังก์ชันเพื่อกำหนดรายละเอียดผลิตภัณฑ์ในตัวยึดตำแหน่งของเรา คุณสามารถสร้างฟังก์ชันที่คล้ายกันสำหรับการเข้าสู่ระบบ สมัคร เพิ่มในรถเข็น ฯลฯ

ตัวอย่างแท็ก asp เพื่อแสดงรายละเอียดสินค้ามีดังนี้:

ค่าคำอธิบายจากรหัส C# จะแสดงในตัวยึดตำแหน่งนี้ คุณยังสามารถใช้กล่องเครื่องมือของ Visual Studio เพื่อเพิ่มองค์ประกอบการแสดงผล เช่น รูปภาพ ปุ่ม ปุ่มตัวเลือก และอื่นๆ มีแหล่งข้อมูลออนไลน์มากมายที่คุณสามารถเรียนรู้ไวยากรณ์ ASP.NET

ASP.NET เว็บแอปพลิเคชันสำหรับผู้เริ่มต้น

ASP.NET เป็นแพลตฟอร์มที่มีประสิทธิภาพสำหรับการสร้างเว็บแอปพลิเคชันและบริการ คุณต้องคุ้นเคยกับ JavaScript, HTML, CSS และ C# ก่อนพัฒนาเว็บแอปพลิเคชันใน ASP.NET

แบ่งปัน แบ่งปัน ทวีต อีเมล สุดยอด JavaScript Cheat Sheet

รับการทบทวนอย่างรวดเร็วเกี่ยวกับองค์ประกอบ JavaScript ด้วยสูตรโกงนี้

อ่านต่อไป
หัวข้อที่เกี่ยวข้อง
  • การเขียนโปรแกรม
  • ASP.NET
  • การเขียนโปรแกรม
เกี่ยวกับผู้เขียน ม.ฟาฮัด ควาจา(เผยแพร่แล้ว 45 บทความ)

Fahad เป็นนักเขียนที่ MakeUseOf และปัจจุบันกำลังเรียนเอกวิทยาการคอมพิวเตอร์ ในฐานะนักเขียนเทคโนโลยีตัวยง เขาต้องคอยอัพเดทเทคโนโลยีล่าสุดอยู่เสมอ เขาพบว่าตัวเองสนใจฟุตบอลและเทคโนโลยีเป็นพิเศษ

เพิ่มเติมจาก M. Fahad Khawaja

สมัครรับจดหมายข่าวของเรา

เข้าร่วมจดหมายข่าวของเราสำหรับเคล็ดลับทางเทคนิค บทวิจารณ์ eBook ฟรี และดีลพิเศษ!

คลิกที่นี่เพื่อสมัครสมาชิก