ASP.NET MVC Part2: เริ่มต้นสร้างเว็บด้วย MVC with Bootstrap

Post Views: 39,352

สวัสดีค่ะ จากบทความที่แล้ว ASP.NET MVC Part 1 : ทำความรู้จักกับ ASP.NET MVC ได้กล่าวถึง ASP.NET MVC ไปบ้างแล้วว่าคืออะไร ในส่วนของบทความนี้จะแนะนำการเริ่มต้นสร้าง Project เพื่อพัฒนา Web Application ด้วย Microsoft Visual Studio 2013 โดยใน MVC5 ซึ่งเป็นเวอร์ชันล่าสุด ได้มีการติดตั้ง Bootstrap มาให้ในตัว ช่วยให้การพัฒนาในส่วนของ View สามารถเรียกใช้งาน Bootstrap class ร่วมกับ Razor syntax(จะกล่าวถึงในบทความถัดไป) ในการแสดงผลหน้า View ได้ง่ายขึ้นและทำให้สามารถรองรับหลากหลายอุปกรณ์ที่มีหน้าจอที่มีขนาดแตกต่างกันออกไป โดยที่เราไม่ต้องเสียเวลาติดตั้งเพิ่มเอง

Tools & Environment 

  • Microsoft Visual Studio 2013
  • Microsoft .Net Framework 4.5
  • ภาษาที่ใช้ในการพัฒนา Visual C#

Step 1: เปิด Visual Studio ขึ้นมา และคลืกที่ New Project

รูปที่ 1


Step 2: ที่เมนูด้านซ้ายให้เลือก Visual C# > Web >ASP.NET Web Application และตั้งชื่อ Project ดังรูปที่ 2 หลังจากนั้นให้กดปุ่ม OK

รูปที่ 2
Step 3: เลือก Template Web โดยเลือกเป็น MVC หลังจากนั้นกด OK
รูปที่ 3
Step 4: Check และ Update เวอร์ชัน Bootstrap
สังเกตที่ solution explorer ฝั่งด้านขวา ที่โฟลเดอร์ Content และโฟลเดอร์ Scripts จะพบไฟล์ Css และ JavaScript ของ Bootstrap ติดตั้งมาให้เรียบร้อยแล้ว
รูปที่ 4
ตรวจสอบเวอร์ชันของ Bootstrap ว่าเป็นเวอร์ชันล่าสุดแล้วหรือยัง โดย คลิกขวา ที่ Project แล้วเลือก Manage Nuget Packages ดังรูปที่ 5
รูปที่ 5
จะปรากฎหน้าต่าง Manage Nuget Package ซึ่งจะแสดง Package หรือ Library  ทั้งหมดที่ตอนนี้ Project เราติดตั้งอยู่ ให้เลือกดูที่ Boostrap และสังเกตคำอธิบายที่ช่องด้านขวา จะแสดงเวอร์ชั่นอยู่ ซึ่งจากรูปที่ 6 เป็น Bootstrap 3.0 ซึ่งเป็นเวอร์ชันปัจจุบันแล้ว หากยังไม่เป็นปัจจุบันจะขึ้นปุ่มให้สามารถ Update เวอร์ชันได้
รูปที่ 6
 หลังจากนั้นให้ไปดูที่โฟลเดอร์ App_Start > BudleConfig.cs  ดังรูปที่ 7 โดยไฟล์ ฺBundleConfig.cs จะทำหน้าที่ลงทะเบียนเก็บ Path ของไฟล์ Java script และ CSS ต่างๆที่มีการเรียกใช้ในระบบไว้ที่นี่ เพื่อไว้เวลาเราอ้าง Path เราสามารถอ้าง Path ตามชื่อ Bundle ที่เราสร้างโดยไม่ต้องเรียกไปยัง Path File ตรงๆได้
รูปที่ 7
Step 5: ทดลอง Run preview ดูหน้าเว็บ
ก่อนจะรัน ให้ไปที่ โฟลเดอร์ View > Shared >_layout.cshtml ซึ่งเป็น Layout ของระบบ(เทียบกับ Web Form ก็คือ Master Page) จากรูปที่ 8 จะเห็นว่า มีการเรียกใช้ Bootstrap Class ในการจัดวาง Component และ Layout ต่างๆไว้ให้
รูปที่ 8

กดปุ่ม Run  เพื่อดูผลลัพธ์ ออกมาดังรูป 9

รูปที่ 9
เมื่อทำการย่อปรับเป็นขนาด Mobile หน้าเว็บก็จะปรับตามขนาดของหน้าจอของอุปกรณ์ที่แสดงผลดังรูป  เป็นอันเสร็จเรียบร้อย ^^
——–End——-
บทความถัดไป : เป็นการแนะนำการเริ่มต้นสร้างส่วนของ Model ในการติดต่อกับฐานข้อมูล  >> ASP.NET MVC Part3: สร้าง Model ด้วย Entity Framework
Share the Post:

Related Posts

ทำความรู้จักกับ Outlook บนเว็บ

Post Views: 7 Outlook เป็นเครื่องมือจัดการอีเมลและปฏิทินที่ทรงพลัง ซึ่งช่วยให้คุณมีระเบียบและเพิ่มความสามารถในการทำงาน ด้วยอินเทอร์เฟซที่ใช้งานง่าย คุณสามารถจัดการกล่องขาเข้าของคุณ นัดหมาย และทำงานร่วมกับเพื่อนร่วมงานได้อย่างง่ายดาย ฟีเจอร์ที่แข็งแกร่งของ Outlook รวมถึงแม่แบบอีเมลที่ปรับแต่งได้ ความสามารถในการค้นหาขั้นสูง และการผสานรวมที่ไร้รอยต่อกับแอปพลิเคชัน Microsoft Office อื่นๆ ไม่ว่าคุณจะเป็นมืออาชีพที่ยุ่งอยู่หรือเป็นนักเรียนที่ต้องจัดการกับภารกิจหลายอย่าง Outlook

Read More

[บันทึกกันลืม] JupyterHub Authenticated with OIDC

Post Views: 36 ต่อจากตอนที่แล้ว [บันทึกกันลืม] JupyterHub ด้วย Docker คราวนี้ ถ้าต้องการให้ ยืนยันตัวตนด้วย OpenID เช่น PSU Passport เป็นต้น ก็ให้ทำดังนี้ ในไฟล์ jupyterhub_config.py ใส่

Read More