ASP.NET MVC slide content with jQuery Cycle Plugin


ปลายเดือนกันยายน ผมได้รับคำสั่งว่า…
อาทิตย์หน้า(ต้นเดือนตุลาคม) ลูกค้าจากต่างประเทศ จะมาเยี่ยมบริษัท
ผู้บริหารต้องการรายงานแสดงข้อมูล… แสดงบนจอ LCD ขนาดใหญ่
โดยมีฟีเจอร์ ดังนี้

  • ทำเป็นเว็บ
  • ให้ วนแสดงทีละรายการ
  • ข้อมูล จะอัพเดต ชั่วโมงละครั้ง
  • แสดงข้อมูล บนหน้าจอ LCD ขนาดใหญ่

ผู้บริหารต้องการด่วน มีเวลาทำ 5 วัน
…ให้วนแสดงทีละรายการ…

สิ่งที่เข้ามาในความคิดแว๊บแรก
คือการแสดงข้อมูลแบบ สไลด์โชว์
ค้นหาใน Google ได้ข้อมูลมากมาย จึงหยิบปลั๊กอินตัวหนึ่งใช้งาน เนื่องจากมันง่ายดี

เป้าหมายที่ผู้บริหาร ต้องการ ให้วนแสดงทีละรายการ
ประมาณนี้:capture-2

ปลั๊กอินตัวนั้นชื่อ jQuery Cycle Plugin ผมจะนำมันมาใช้บน ASP.Net MVC
ดังนี้:

สร้างโปรเจ็กต์

1.สร้างโปรเจ็กต์

2.ด้วยเทมเพลต ASP.NET MVC 4….

3. เลือก Internet App. => แล้วคลิก OK

สร้าง Model

4.สร้าง โมเดล => คลิกขวาบน Model=>เลือก Add => เลือก New Item…

5.พิมพ์ enti ในช่องค้นหา => คลิก ADO.NET Entity Data Model  => ตั้งชื่อ => คลิก Add

6. เลือกสร้างโมเดลจาก ฐานข้อมูล=> Next

7. สร้างคอนเนคชั่น…=> คลิก OK

8. เลือกตาราง Products => Finish

9. ได้โมเดล Product เรียบร้อย

สร้าง Controllers

10. คลิกขวาบน Controllers => Add => Controller…

11. หน้าจอ Add Controller125-10-2013 12-36-05 PM

12.เปลี่ยนชื่อ Default1Controller เป็น ProductController =>
Model class:= Product,
Data context class:=NorthwindEntities => คลิก Add

13.สร้าง Controller เรียบร้อย

ส่วนของ Controller เป็นการดึงข้อมูลทั้งหมด
แล้วไปวน สไลด์โชว์ ในฝั่งไคล์เอ็นต์ …
ถ้าข้อมูลเยอะ และมีการประมวลผล มันจะช้าในครั้งแรกที่โหลด (ต้องระวัง ในที่นี้ เป็นตัวอย่าง เท่านั้น)
image

สร้างเมนู Product

14. เปิดไฟล์ _Layout.cshtml => แล้วเพิ่ม ActionLink ดังรูป
image

15. ไฟล์ _Layout.cshtml คอมเมนท์บรรทัด @Scripts.Render(“~/bundles/jquery”)

16. เปิดไฟล์ Index.cshtml ในโฟล์เดอร์ Product บนหัวไฟล์ ระบุ Script ของปลั๊กอิน
ดูตัวอย่างได้ที่ :http://jquery.malsup.com/cycle/ ดังนี้
หมายเลข 1 อ้างอิงแหล่งที่อยู่ script
หมายเลข 2 สั่งให้ข้อมูลเลื่อนทีละรายการ โดย:
บรรทัดที่ 10: อิลิเมนต์ ที่จะนำไปสไลด์
บรรทัดที่ 11: เป็น Browse Effects: สามารถดูได้ที่นี่ http://jquery.malsup.com/cycle/browser.html 
บรรทัดที่ 12: ให้รายการแรก ค่อยหาย แล้วรายการถัดมาค่อย แสดงออกมาแทน
บรรทัดที่ 13: ให้แต่ละรายการ ค้าง นานเท่าไหร่ (3000 = 3 วินาที)
บรรทัดที่ 14: ตอนเปิดหน้าจอครั้งแรก รายการแรก ให้ค้างนาน 1 วินาที
image

17. โค้ดในส่วนแสดงข้อมูล ให้วนลูปใส่ Table
       แล้วปลั๊กอิน จะจัดการเลื่อนแสดงทีละรายการเอง
image

18. จากนัั้น รันโปรแกรม => คลิกเมนู Product=> คุณจะได้ผลดังรูปแรก ด้านบน

Cycle Plugin ช่วยให้
เราสามารถแสดงข้อมูลที่ไม่เป็นรูปภาพ
ให้เลือกรายการ แบบสไลด์โชว์ได้ อย่างง่าย

ผมสามารถ Deploy โปรแกรมขึ้น Production เรียบร้อย ก่อนลูกค้ามา 2 วัน
โดยใช้ สมาร์ททีวี ขนาดใหญ่ แสดงรายงาน ผ่านเบราว์เซอร์
ตัวอย่างหน้าจอโปรแกรม ที่เสร็จเรียบร้อย
5-10-2013 9-08-42 PM

แหล่งข้อมูลอ้างอิง:
jQuery Cycle Plugin: http://jquery.malsup.com/cycle

 

ผู้เขียน:
Nano

Advertisements
เกี่ยวกับ

Nuchit Atjanawat is a Microsoft MVP, GreatFriends Community Leader, WindowsITPro Columnist(Mr.Nano), Silverlight Business Application Instructor, Speaker in various Microsoft events, Author, passionate Blogger and a Software Engineer by profession. He has a very good skill over Silverlight, LightSwitch, C#, XAML & Blend. He shares his technical findings, tutorials in his technical blog. Follow his Blog and Facebook page to be updated on latest articles. - Technical Blog: https://janawat.wordpress.com - WindowsITPro Columnist(Mr.Nano): http://windowsitpro.net - The GreatFriends.Biz Community Discussion Board (nano): http://greatfriends.biz - witter: https://twitter.com/janawat - Facebook Page: https://www.facebook.com/nuchit - Instructor: http://bit.ly/GF250-01, http://bit.ly/GF150-02

เขียนใน ASP.NET MVC

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s

In Archive
%d bloggers like this: