ASP.NET

Sunday, July 9, 2017

การเพิ่ม View ให้กับ Application


การเรียกใช้งานส่วนของ View จะเริ่มจากการปรับแต่งส่วนของ Controller ให้เรียกการทำงาน View

ตัวอย่าง

HelloWorldController.cs ปรับแต่ง Method Index ให้เรียกใช้ View ดังรูป





และสร้าง File View ด้วยการสร้าง.chtml ภายใต้ Folder Views/HelloWorld ด้วยการคลิกขวา Add > MVC 5 View Page with Layout (Razor)


และทำการกำหนดชื่อไฟล์ให้ตรงกับ Method ที่ได้สร้างไปในไฟล์ HelloWorldController นั่นคือ index ดังรูป

เลือกไฟล์ _Layout.cshtml ซึ่งเป็นไฟล์ที่ได้กำหนดโครงสร้าง HTML เอาไว้เรียบร้อยแล้ว และคลิก OK

ระบบจะสร้างไฟล์ index.cshtml ขึ้นมา ดังรูป พร้อมกำหนด Path โครงสร้างไฟล์ Layout ที่ได้เลือกไปก่อนหน้า

จากนั้นหากระบุ Code เพิ่มดังรูป

เมื่อ Run ระบบ ด้วย URL http://localhost:xxxx/HelloWorld ระบบจะทำงานจากการเรียกไฟล์ HelloWorldController และทำการเรียก View index มาแสดงบนหน้าจอ โดยอาศัยโครงสร้างจากไฟล์ _Layout.cshtml



  • ViewBag เป็นการส่ง Parameter ระหว่าง Controller ไปยัง View
    จากตัวอย่าง ViewBag.title="Index" จะถูกแสดงค่าที่ตำแหน่งตัวแปล @ViewBag.title ที่อยู่ในไฟล์ _Layout.cshtml
  • <h2>Index</h2>
           <p>Hello from our View Template!</p>

           จะถูกแทรกไปยังส่วน @RenderBody

เมื่อ Run ระบบจะแสดงหน้าจอดังรูป

ตัวอย่าง
ปรับ Method Welcome ภายใต้ไฟล์ HelloWorldController ดังรูป เพื่อรับค่า Parameter จาก URL 2 ตัวได้แก่ name และ numTimes และแสดงผลผ่านไฟล์ Welcome.cshtml

 ทำการสร้างไฟล์ Welcome.cshtml เพื่อรองรับการเรียกใช้งานจาก HelloWorldController


 ระบุไฟล์ Layout ที่ต้องการนำมาแสดงเป็นโครงสร้าง

ปรับแต่งไฟล์ Welcome.cshtml ดังรูป เพื่อแสดงค่า ViewBag.Message ตามจำนวนครั้ง ViewBag.NumTimes ที่ได้รับค่ามาจาก HelloWorldController

Run ระบบ ด้วยการส่ง Parameter name และ numtimes จะได้การแสดงค่าเป็น List ดังรูป

No comments:

Post a Comment

เชื่อม SQL Server บน VMWare ผ่าน SQL Server Management Studio ที่เครื่อง Client

หากติดตั้ง SQL Server ต่างเครื่องคอมพิวเตอร์ที่เราต้องการ Develop จะต้อง Set ค่าเพิ่มเติมผ่าน SQL Server Configuration Server ด้วย เพราะไม...