ASP.NET MVC Part 4: ทำความรู้จักกับ ViewData, ViewBag และ TempData

การส่งผ่านข้อมูลระหว่างกันใน ASP.NET MVC จะมีการส่งผ่านกันด้วย objects ซึ่งใน ASP.NET MVC จะมี object ที่ชื่อ ViewData, ViewBag และ TempData เป็น object ที่่ใช้ในการส่งผ่านข้อมูลในลักษณะที่แตกต่างกันออกไป โดยในการส่งผ่านข้อมูลจะแบ่งได้เป็น 3 กรณี คือ การส่งผ่านค่าจาก Controller ไปยัง View การส่งผ่านค่าจาก Controller หนึ่ง ไปยัง Controller อื่น การส่งค่าระหว่าง Action หนึ่ง ไปยัง Action อื่น โดยทั้ง 3 objects จะมีคุณสมบัติที่แตกต่างกัน ดังนี้ ViewBag เป็น dynamic object ในการส่งค่าจาก controller ไปยัง view ViewData เป็น dictionary object ในการส่งค่าจาก controller ไปยัง view TempData เป็น dictionary object ในการส่งค่าข้ามกันระหว่าง controller และ action   การส่งผ่านข้อมูลจาก controller ไปยัง View การส่งผ่านข้อมูลจาก Controller ไปยัง View สามารถทำได้ 3 รูปแบบ ขึ้นอยู่กับลักษณะของข้อมูลที่ต้องการส่งว่าเป็นข้อมูลลักษณะไหน มีความซับซ้อนเพียงใด แต่ละรูปแบบสามารถเขียนได้ดังนี้   ส่งผ่าน Model การส่งผ่านข้อมูลผ่านตัว model เป็นการส่งผ่านข้อมูลผ่านตัว model ตรงๆ โดยที่ข้อมูลจะมี property ตามที่มีอยู่ใน model ที่สร้างไว้ ดังตัวอย่าง สร้าง model ของ Book และ set ค่าให้กับ property ต่างๆ และ return model Book ไปยังหน้า View ฝั่ง Controller public ActionResult Index() { List<ฺBook> b = new List<Book>() { new Book{ Id = 1, Title = “Harry Potter”, Author= “JK. Rolling”}, new Book{ Id = 2, Title = “Inferno”, Author= “Dan Brown”} }; return View(b); } ฝั่งแสดงผล View ประกาศ type ของ model เป็น Book หลังจากนั้นใช้ตัวแปร model ในการเข้าถึง property ต่างๆของ Model @model MvcBook.Models.Book <table class=”table”> <tr> <th> @Html.DisplayNameFor(model => model.Title) th> <th> @Html.DisplayNameFor(model => model.Author) th> <th>th> tr> @foreach (var item in Model) { <tr> <td> @Html.DisplayFor(modelItem => item.Title) td> <td> @Html.DisplayFor(modelItem => item.Author) td> tr> }

Read More »

ASP.NET MVC Part3: สร้าง Model ด้วย Entity Framework

จากบทความก่อนหน้า ซึ่งอาจจะนานมากพอสมควรที่ได้แนะนำ MVC ไปไว้แล้วในเบื้องต้น (ASP.NET MVC Part 1 : ทำความรู้จักกับ ASP.NET MVC และ ASP.NET MVC Part2: เริ่มต้นสร้างเว็บด้วย MVC with Bootstrap) บทความนี้จะมาแนะนำในส่วนของการสร้าง Model ในการเชื่อมต่อกับฐานข้อมูล ในการ query และจัดการกับข้อมูล เพื่อส่งให้กับ Controller และ View เรียกใช้ในลำดับต่อไป Model คือ ส่วนหนึ่งในองค์ประกอบของการพัฒนาเว็บแอพพลิเคชันตามรูปแบบ MVC Framework (Model-View-Controller) โดยจะเป็นส่วนที่ทำหน้าที่ Business Model หรือส่วนที่ติดต่อกับฐานข้อมูล โดยบทความนี้นำเสนอการนำเครื่องมือ Entity Framework มาใช้ในการสร้างและจัดการ Model ในการเชื่อมต่อกับฐานข้อมูล สำหรับการพัฒนาเว็บแอพพลิเคชันตามรูปแบบ MVC Framework Entity Framework Entity Framework คือ tools ที่ทำหน้าที่จัดการกับฐานข้อมูล โดยแนวคิดของ Entity Framework อยู่ในรูปแบบของ O/RM (Object/Relational Mapping) คือ Entity Framework จะสร้าง Layer ทำหน้าที่เป็น Database Model ขึ้นมาเป็น Class ใน Project ของเรา โดยจะทำหน้าที่ Mapping ตัว Class ที่จะสร้างขึ้น กับ Table , View และ Stored Procedure จากฐานข้อมูบ มาไว้บน Project ซึ่งทำให้เราเราสามารถเรียกใช้มันผ่าน Class ที่อยู่ใน Project เราได้เลย ส่วนการเขียน Query หรือจัดการกับข้อมูลผ่านตัว Entity Model จะใช้ Syntax ของ LINQ to Entities ซึ่งเป็น syntax ที่สามารถเข้าใจได้ง่ายตามรูปแบบของภาษาเช่น VB.Net หรือ C#   วิธีการใช้งาน Entity Framework เบื้องต้น 1. เปิด solution ที่ต้องการใช้ขึ้นมา (ในบทความนี้เป็น project แบบ MVC Framework) 2. คลิกขวาที่โฟลเดอร์ Model แล้วเลือก Add =>New Item 3. ที่ tab ด้านซ้ายมือ เลือก Data จากนั้นเลือก ADO.NET Entity Data Model และทำการตั้งชื่อ และกดปุ่ม Add   4. เมื่อเข้าสู่หน้าจอให้เลือก Model Content ให้เลือก EF Desiner from DataBase และกด Next จะเข้าสู่ขั้นตอนต่อไป   5.ขั้นตอนถัดมาคือการเลือก Data Connection เป็นการเลือกการติดต่อกับฐานข้อมูลว่าจะให้ Entity ติดต่อกับฐานข้อมูลไหน โดยครั้งแรกหากยังไม่มี ฐานข้อมูลมาให้เลือกใน comboBox จะต้อง New Connection ขึ้นมาก่อน และทำตามขั้นตอนไปได้เลย แต่ถ้ามีแล้วให้เลือก Connection จาก ComboBox หลังจากนั้นให้กดเลือก Yes,include the sensitive data in connection string และเลือก Checkbox ให้ Save Connection string เข้าสู่ Web.Config และตั้งชื่อให้กับ Conection string โดย default ชื่อจะเป็น “Entities” และกดปุ่ม Next

Read More »

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

สวัสดีค่ะ จากบทความที่แล้ว 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

Read More »

ASP.NET MVC Part 1 : ทำความรู้จักกับ ASP.NET MVC

สวัสดีค่ะ วันนี้ผู้เขียนจะมาแนะนำให้รู้จักกับแนวทางการพัฒนา Web Application ด้วย ASP.NET MVC ก่อนหน้านี้ผู้เขียนจะพัฒนา Web Application ด้วย ASP.NET Web Forms มาตลอด และช่วงที่ผ่านมา ผู้เขียนเองมีโอกาสได้ศึกษาและทำความเข้าใจกับ ASP.NET MVC มาซักระยะหนึ่ง จึงมาเขียนบทความเล่าสู่กันฟังเกี่ยวกับ การพัฒนา Web Application ด้วย ASP.NET MVC ซึ่งในบทความนี้ อ้างอิงและแปลมาจากบทความ WebForms vs MVC ซึ่งจะประกอบไปด้วย ASP.NET คืออะไร? ASP.NET Web Forms คืออะไร? MVC คืออะไร? ASP.NET MVC คืออะไร? เปรียบเทียบระหว่าง Web Forms และ MVC เลือกใช้อะไรดี ระหว่าง Web Forms และ MVC ? ASP.NET คืออะไร?    คือ Web application framework ที่ถูกพัฒนาโดย Microsoft สำหรับนักพัฒนาในการพัฒนา web application ขึ้นมา โดยโปรแกรมด้วยภาษา C#,VB.NET และอื่นๆ ณ ปัจจุบัน มีอยู่ 2 รูปแบบในการเลือกใช้พัฒนา ได้แก่ Web Forms และ MVC ASP.NET Web Forms คืออะไร? คือ framework ในการพัฒนา web application ที่ถูกออกแบบมาในลักษณะ RAD(Rapid Application Development) คือ สามารถพัฒนา Web application ได้อย่างรวดเร็ว โดยใช้วิธีการลาก control มาวางบนพื้นที่ design หน้า page และเขียน code ภายใต้ control เหล่านั้น โดยอาศัย concept การทำงานของ Postback(การส่งข้อมูลไปมาระหว่าง server และ client) และ ViewState(การเก็บค่าให้คงไว้ระหว่างการทำ postback) วิธีการสร้างหน้า page ของ Web Forms การทำงานของ Web Forms MVC คืออะไร? คือ design pattern ที่ใช้ในการสร้าง Web Application แนวความคิดของ MVC design pattern จะจัดการแยกหน้าที่ขององค์ประกอบใน application ออกเป็นส่วนๆ(separation) เพื่อให้สะดวก รวดเร็ว และง่ายขึ้น ในการสร้าง พัฒนา และขยายระบบเพิ่มเติม รวมถึงมันจะทำให้เราทดสอบ application นี้เป็นส่วนๆได้โดยไม่กระทบ หรือกระทบน้อยที่สุดกับส่วนอื่น โดย MVC ย่อมาจาก Model, View และ Controller Model คือ คือส่วน Business Model หรือส่วนที่ติดต่อกับฐานข้อมูล Controller คือ ส่วนควบคุมและรับ request จาก user มาและไปดึงข้อมูลจาก Model มาเพื่อแสดงผลข้อมูลกลับไปยัง user ที่ส่วน View View คือ ส่วนที่แสดงผลข้อมูล ASP.NET MVC คืออะไร? คือ framework ในการพัฒนา web application ที่ถูกออกแบบให้รองรับ MVC pattern โดยจัดการแยกหน้าที่ขององค์ประกอบใน application ออกเป็นส่วนๆ(separation of concerns) ด้วยการจัดการที่แยกออกเป็นส่วนๆ ทำให้การทดสอบระบบ(Unit Testing)ที่ซํบซ้อน ทำได้ง่ายขึ้น วิวัฒนาการ

Read More »