Dev :: ASP.NET MVC 3 และการ Upload File

Posted: กันยายน 22, 2011 in asp.net
ป้ายกำกับ:, , , , , ,

จุดประสงค์

สาธิตการสร้างเว็บแอพเพื่ออัพโหลดแฟ้มข้อมูลจาก Client ไปวางบนโฟลเดอร์ที่อนุญาต บนเครื่องแม่ข่าย

สิ่งที่ต้องมี

  • Visual Studio 2010
  • มีความรู้เกี่ยวกับ MVC

 

การปฏิบัติ

  1. สร้างโครงการขึ้นใหม่ เลือก MVC 3 ตั้งชื่อว่า MvcFileUpload

image

2.เลือก Interner Application แล้วคลิก OK

 image

 

3. คลิกขวาที่ Folder Controllers แล้ว Add Controller สำหรับผมตั้งชื่อว่า FileUpload และใช้เทมเพลตแบบว่าง แล้วคลิกปุ่ม Add

image

 

4.เรียกใช้ system.io ที่ด้านบน

clip_image001

 

5. จากนั้นสร้าง Action ดังต่อไปนี้

image

 

6. เพิ่ม view ที่ action Edit ด้วยการคลิกขวาที่ Action Edit แล้วเลือก Add view แล้วคลิกปุ่ม Add

image

 

7. ไปที่ Edit.cshtml

แล้วเพิ่มโค้ดลงไปดังนี้

image

 

8.เปิดไฟล์ _Layout.cshtm จากที่นี่

image

 

9.เพิ่ม ActionLink เพื่อเข้าถึงหน้า Upload เข้าไปดังนี้

image

10. จากนั้นทดลอง Run กด F5 จะได้ผลดังนี้

image

 

11.คลิกที่ Upload จะเข้าสู่ วิว Edit ให้ลอง Upload File

image

 

12. เมื่อ Submit ไปแล้วจะกลับมาที่ Home/Index ลองเปิด Folder เพื่อตรวจสอบว่าอัพโหลดไปได้จริงหรือไม่

จะพบไฟล์ที่อัพขึ้นไปดังนี้

image

 

13. จบแล้วครับ ไม่ยากเนอะ

อ้างอิงจาก

http://www.c-sharpcorner.com/UploadFile/dhananjaycoder/Fileuploadinaspnetmvc06292009030526AM/Fileuploadinaspnetmvc.aspx

ในบทความนี้เราจะพูดถึงการเปลี่ยน .net framework ที่รันสำหรับ web app ที่เราได้สร้างขึ้น
ใน IIS สามารถใช้ .net fw ได้หลายรุ่นบน server ตัวเดียวกัน
และเลือกรัน web app ที่ใช้ .net fw ได้แตกต่างกันไปได้

หากต้องการทราบว่าภายใน iis มี .net fw ใดทำงานอยู่ให้..

 

1.เปิด iis manager

image

2. คลิกที่ Application Pools

image

 

3. จะแสดงรายละเอียดดังนี้

image

 

การเปลี่ยนรุ่น .Net Framework สำหรับ Web App

 

1.คลิกที่ Web App ที่ได้ติดตั้งใน ตย ผมใช้ชื่อว่า sample ต้องการเปลี่ยนจาก .net fw 2 เป็น .net fw 4

image

 

2.ดูที่เมนู Actions ทางขวาคลิกเลือก Basic Settings

image

 

3.คลิกปุ่ม Select แล้วเลือกเป็น asp.net 4.0

image

 

image

เปลี่ยนเป็น .net 4 แล้วคลิก Ok

image

 

เป็ฯอันเสร็จพิธีกรรมครับ

 

การแสดงข้อมูลจาก Entity หรือตัวแทนจากตารางในฐานข้อมูลเดียวเป็นเรื่องปกติ

แต่หากต้องแสดงข้อมูลจาก entity อื่นที่มีความสัมพันธ์กันต้องเพิ่มอะไรลงไปนิดหน่อย

 

จากตอนที่แล้วผมสร้างแอพพลิเคชั่นจากฐานข้อมูลที่มีเดิมอยู่แล้ว

แล้วมาสร้าง entity datamodel แล้วค่อยมาสร้าง class ที่ทำงานทีหลัง

ไม่ใช่สร้างแบบ poco คือสร้างโค้ดก่อนแล้วไปเจนเนเรทฐานข้อมูล ผมคิดว่าอาจจะไม่เขียนเพราะ ตย ในเว็บอื่นๆมีมากพอแล้ว

 

วัตถุประสงค์

ต้องการแสดงรายชื่อนักเรียน

ต้องการคลิกที่ชื่อแล้วแสดงรายวิชา + เกรดที่ได้ของนักเรียน

 

นี่คือ edm ของระบบ

image

 

1. เพิ่ม Controller ลงไปชื่อ StudentController กำหนดค่า

image

ที่ช่องเทมเพลต กำหนดให้สร้าง crude

โมเดลให้เลือกชี้ไปที่คลาสที่สร้างขึ้นจากตอนที่แล้ว

และcontext เลือก schoolentity ก้ได้จากการสร้างตอนที่แล้วเช่นกัน

แล้ว add ลงไป

 

2.แก้โค้ดที่ StudentController เมทอส Details ดังนี้

image

จะเห็นว่าผมแก้โค้ดให้มี include เอา entity ที่ติดต่อโดยตรงเข้าไปก่อน

แล้วไปเรียก select เอา entity ที่ติดต่อถัดไปเข้ามา

 

3.เปิด view  detail ของ student

image

 

4. ภายใน tag ของ fieldset ให้เพิมตารางแสดงรายการวิชาและเกรดที่ได้เข้าไปด้วยการวนลูปดังนี้

image

 

เมื่อทดลองรันจะได้ดังนี้

 

image

เมื่อคลิกที่ detail ของ นร สักคน

image

จะได้รายวิชาที่ลงเรียนและเกรด(หากมี)

 

จบแล้วครับ ไม่เข้าใจเหมือนกันว่าทำไมทำตาม tutorial แล้วมีปัญหามาตลอด

หรือผมโง่เกินไปก็ไม่ทราบได้ หากใครฉลาดๆโปรดเข้ามาให้คำสอนด้วยครับ

 

การสร้าง Model จากฐานข้อมูลที่มีอยู่เรียกว่า database first

1.เมื่อเราได้สร้างฐานข้อมูลแล้ว สร้างตารางและความสัมพันธ์เอาไว้ก่อนแล้ว

image

 

2.เพื่อความแน่ใจให้ดูใน web.config ว่ามี connection string ที่เชื่อมต่อระบบของเราเข้ากับ database ที่เราได้สร้างเอาไว้หรือยังหากยังให้กำหนดค่าดังนี้

image

 

3.ให้สร้าง Entity Data Model ขึ้นมา ที่โฟลเดอร์ Model ให้เพิ่ม Entity data model ลงไป

ตั้งชื่อ SchoolModel

4.เลือก Generate จาก Database

image

 

5.ที่ connection เลือกไปยัง database ที่เราได้สร้างเอาไว้

image

 

6.ด้านล่างให้บันทึก entity connection ลง web.config

image

 

เลือกตารางที่ใช้

image

 

และตั้งชื่อว่า SchoolModel

image

 

6. เลือก build project แล้วสร้าง class จาก edm ด้วยการคลิกขวาในหน้าการออกแบบ edm

image

 

7. เลือก code แล้วเลือก Self tracking

image

 

8. เราจะได้คลาสตามที่ edm ได้สร้างเอาไว้

image

 

จบแล้วครับ

ASP.NET MVC Razor Systax

Posted: กรกฎาคม 16, 2011 in asp.net
ป้ายกำกับ:, , , , ,

บทความนี้เป็นการแนะนำเบื่องต้นเกี่ยวกับ syntax ของ Razor

ผมได้แปล สรุป และเรียบเรียงจาก ที่นี่ 

รายละเอียดดังนี้

 

1.จะเพิ่ม code ลงเพจต้องนำหน้าด้วยอักษร @

image

.การเขียนแบบบล็อค เขียนในปีกกา

 

image

2. การเขียนแบบนี้เป็นแบบหลายประโยค ภายในปีกกา

 

image

แบบนี้เขียนร่วมกับแท็ก html

 

3. ภายในบล็อคโค้ดจะต้องปิดท้ายประโยคด้วย ;

 

4.ตัวแปร ประกาศด้วย var นำหน้าชื่อตัวแปร แล้วนำไปใช้ในประโยคต่อไป

image

 

เมื่อรันจะได้ผลดังนี้

image

 

5. กำหนดค่าแบบ string ให้ตัวแปร

ต้องใส่ “…” ครอบข้อความก่อนส่งค่าให้ตัวแปร (แถวนี้เรียกฟันหนู)

image

 

หากต้องการแสดงหรือใช้งานอักษรพิเศษเช่น \ หรือ  “ หรืออื่นๆ ต้องใช้ @นำหน้า

 

image

ภาพนี้แสดงตัวอย่างการใช้ \ ภายในตัวแปรแล้วนำไปแสดงผล

 

image

ภาพนี้เป็นการใช้ “ ภายในตัวแปร

 

เมื่อรันจะได้ผลดังนี้

image

 

6. ตัวแปรเป็นแบบ case sensitive คืออักษรเล็กใหญ่มีผลต่างกันเช่น

image

แม้ว่าชื่อตัวแปรเหมือนกัน แต่ถือว่าเป็นคนละตัวกัน เพราะพิมพ์ไม่เหมือนกัน

 

7.เขียนลักษณะ object ได้

ลักษณะคล้ายกับการเรียกใช้ object และ method สมัยที่ยังใช้ asp classic หากเกิดทันเช่น

image

 

และผลที่ได้คือ

image

 

8.สร้างเงื่อนไขได้

เราสร้างโค้ดที่ใช้ตัดสินใจเช่น if-else ได้

image

จากตัวอย่าง เมื่อปุ่ม submit ถูกกด

จะถูกนำไปตรวจสอบว่ามีการ post กลับมาหรือไม่

หากใช่จะแสดงข้อความผ่านตัวแปร result ว่าเพจนี้มาจากการกด submit

 

9.การใส่หมายเหตุ

image

 

image

อันนี้เป็นการใส่แบบภาษา c#

 

10.ตัวแปรและประเภทข้อมูล

สามารถประกาศตัวแปรแบบไม่ระบุประเภทข้อมูลได้ด้วยใช้ var นำหน้า

หรือจะระบุประเภทตัวแปรเลยก็ได้

image

 

ตารางการแปลงค่า

image

 

การดำเนินการ

 

การ + – * / ปกติ

image

 

การกำหนดค่าให้ตัวแปร

image

 

การเปรียบเทียบ

 

 

เท่ากันหรือไม่ ?image

 

ไม่เท่ากันใช่ใหม ?

image

 

มากกว่า น้อยกว่า มากกว่าหรือเท่ากับหรือไม่

image

 

การเขียน + – แบบย่อ

image

 

การเรียกใช้ method ของ object

image

 

จัดกลุ่มหรือส่งค่าไปยังพารามิเตอร์ของเมธอด

image

 

เข้าถึงลำดับของตัวแปร

image

 

reverse หรือ not แปลงค่าให้ตรงข้าม

image

 

การเปรียบเทียงและ / หรือ

image

 

การเข้าถึง root เสมือน

ใช้ ~ ผมเรียกว่าตัวหนอน ฝรั่งเรียกว่าทิลด้า

image

 

การแปลง Root เสมือนเป็น path บนไดรว

ใช้คำสั่ง server.Mappath จะแสดงพาธออกมาเป็นตำแหน่งใน hdd

image

 

เงื่อนไข

If –else

 

image

 

แบบ switch case

image

 

 

วนรอบการทำงาน

แบบ For

image

 

แบบ Foreach จะวนรอบทำงานจนกว่าหมด Collection

image

 

แบบตรวจสอบเงื่อนก่อนวนลูปด้วย while

image

 

การตรวจจับข้อผิดพลาด ด้วย Try-Catch

 

image

 

จบแล้วคับ

 

บทความนี้ได้สรุปและเรียบเรียงจาก blog ของ Scott  ต้องการอ่านคลิกที่นี่

 

View คือมุมมองหรือ UI ที่รับข้อมูลจาก User ไปดำเนินการ และนำเสนอข้อมูลให้ user ได้เห็น

View Engine ที่มาพร้อมกับ mvc3 ชื่อว่า Razor (มีดโกน ??)

engine ส่วนต่างๆ ของ mvc ตามที่เคยศึกษากันพบว่ามันแบ่งการทำงานออกจากกัน

ดังนั้นหากเราสามารถพัฒนา engine ขึ้นมาได้เองเพื่อติดต่อกับฐานข้อมูลหรือส่วนอื่นๆที่ต้องการได้

ทาง ms ก็นำเสนอ Razor ซึ่งเป็น view engine ตัวใหม่อย่างมากว่าดีอย่างนั้นอย่างนี้

 

คอนเซ็บของ Razor

  • Compact, Expressive, and Fluid: ขนาดเล็กและลื่นไหล (ผมนึกถึงมอเตอร์ไซ ที่ขับตอนรถติดยังไงยังงั้นเลย)

  • Easy to Learn:  เรียนรู้ง่ายหรือใช้ความรู้เดิมที่มีอยู่เช่น HTML
  • Is not a new language: ใช้ความรู้ทางภาษาโปรแกรมมิ่งเดิมที่รู้อยู่แล้ว  C#/VB (or other)

  • Works with any Text Editor: ทำงานกับเครื่องมือหรือใดๆก็ได้เช่น notepad

  • Has great Intellisense: มีตัวช่วยเติมเต็มประโยคที่ดี แน่นอนว่า visual studio กิน.

  • Unit Testable: สามารถทดสอบได้ง่าย (Confused smile).

 

เปรียบเทียบการแสดงผล

ในบทความคุณ scott จะแสดงข้อความที่เพจดังนี้

 

image

ภาพ 1 แสดง O/p ที่ต้องการ

 

เดิมเราใช้ .aspx nuggets คือแท็ก <% =…. %> แบบนี้เพื่อกำหนดการแสดงผล ประมวลผลที่หน้าเว็บเพจ ดังนี้

image

 

 

แต่หากใช้มีดโกนอาบน้ำผึ้งคุณเขียนโค้ดดังนี้

image

 

Razor ใช้เพียง @ นำหน้าตัวแปร หรือ expression ที่ต้องการใช้เท่านั้น

 

การวนลูป

หากเราต้องการแสดงลูปดังภาพนี้

 

image

จากภาพเราๆก็ทราบดีว่าต้องวนลูปจากลิสหรืออาเรย์หรืออื่นๆ แล้วไปแสดงผล

หากวนลูปด้วย .aspx จะเขียนดังนี้

.aspx nuggets Razor
image image

ดูเรียบร้อยขึ้นนะครับ Winking smile

 

การใช้ If – else

image

การเขียนแบบนี้สมัยก่อนเรียกว่าสปาเก็ตตี้โค้ด คือมันปนกันระหว่างบล็อคคำสั่ง กับแท็ก html

แต่ด้วย tool ของ ms คงไม่เป็นปัญหาเท่าใดเพราะช่วยแยกความแตกต่างระหว่าง view engine

กับแท็ก html ได้

 

การเขียนแบบหลายบรรทัด

image

การเขียนแบบนี้เปิดด้วย @{…} แล้วเขียน expression เอาไว้ภายใน จากนั้นนำค่าที่ได้จากการประมวลผลไปใช้ต่อไป

 

การเขียนแบบบรรทัดเดียวแต่หลายส่วน

image

เปิดแท็กด้วย @(….) แบบนี้ใช้ได้เพียงบรรทัดเดียว

 

เมื่อศึกษาผมมีคำถามที่เกิดขึ้นทันทีคือ email address จะถูกแปลเป็นตัวแปรหรือไม่

ทางคุณ scott เขียนไว้ว่าไม่มีปญหาหาเพราะ engine ฉลาด 5555++

ภาพนี้เป็นข้อมูลที่กำหนดใน editor

image

 

ภาพนี้เป็นข้อมูลที่แสดงที่ web browser

image

 

การเขียนแบบโค้ดภายใน

เราสามารถวางแท็ก html ภายในโค้ดบล็อคของ Razor ได้เช่น

image

เห็นว่าภายในมีแท็ก span ครอบเมื่อรันที่เว็บบราวเซอร์จะได้ดังนี้

image

 

การจัดการ Layout ตามแบบ Razor

หากใช้ .aspx จะใช้ masterpage เข้ามาสร้างหน้ากากและเว้นพื้นที่ให้นำไปใช้ทีหลัง

เมื่อเราเปลี่ยนไปใช้ Razor ใช้เพียง Sitelayout.cshtml เท่านั้น

ภายในมีเพียงแท็ก html ที่คงที่เพื่อแสดงผล

image

ภายในแท็ก div จะมีประกาศ @RenderBody() เพื่อให้รู้ว่านี่คือพืนที่แสดงข้อความเมื่อ layout นี้ถูกนำไปใช้

 

การจะนำเลย์เอาไปใช้ต้องประกาศการเรียกใช้ดังนี้้

image

 

จะต่างกับการใช้ masterpage ที่ประกาศอะไรอีกมากมาย

 

เมื่อรันเราตจะได้โค้ดที่เว็บบราวเซอรดังนี้

image

 

การเขียนทับพื้นที่แสดงผล

 

เราสามารถสร้างพื้นที่การแสดงผลที่ต้นแบบได้มากกว่าที่เดียวดังนี้

image

ที่เพิ่มขึ้นมาคือ @RenderSection พร้อมกับกำหนดชื่อ และมี optional เป็น true เพราะหากไม่มีการกำหนดค่าก็ะไม่ Error หากไม่กำหนดค่า

 

สำหรับเพจหรือวิวที่นำเลยเอาท์นี้ไปใช้ และต้องการเขียนข้อมูลงในแท็ก menu กับ footer ทำได้ดังนี้

image

 

และเมื่อรันที่ปลายทางจะได้โค้ดดังนี้

image

 

html helper ตัวใหม่

ผมเรียกว่าตัวช่วยสร้าง html คล้ายกับการสร้าง function แล้วให้ส่งค่าออกมาเป็นแท็ก html

 

image

ภาพนี้เป็นการสร้าง helper ชื่อ ProductListing และรับพารามิเตอร์มาเพื่อวนลูปสร้างแท็ก li

 

เมื่อต้องการเรียกใช้ helper กำหนดลงไปดังนี้

image

 

อย่างไรก็ดี visual studio ก็สนับสนุนเป็นอย่างดี

จบแล้วสำหรับวันนี้ bye.

ASP.NET MVC #01 มันคืออะไร

Posted: กรกฎาคม 14, 2011 in asp.net

MVC เป็นรูปแบบการพัฒนาเว็บแอพพลิเคชั่นแบบหนึ่งที่เป็นที่นิยมในปัจจุบัน

(ในบทความนี้ช้าไปเกือบ 3 ปี คงไม่ช้าไปนะ)

รูปแบบหรือแพทเทิร์นการพัฒนาเว็บแอพที่แบ่งแยกส่วนประกอบออกจากกัน

เป็นสามส่วนคือ Model , View, Control  ทำให้งานมีความยืดหยุ่นขึ้น

สำหรับสาวก Microsoft เค้ามีเครื่องมือให้ใช้ฟรีไปหาโหลดได้ที่ http://www.asp.net/mvc

image

ภาพ 1 แสดงเว็บ asp.net หน้า mvc

หากยังไม่มีก็คลิกที่ปุ่มสีเขียวแล้วติดตั้งโดยเลือกตาม wizard ที่ปรากฏ

ที่พืนที่ส่วนล่างลงมาเป็นแหล่งข้อมูล ที่ดี

image

ภาพ 2 แสดงหัวข้อและแหล่งข้อมูลศึกเพิ่มเติม

MVC คืออะไร ?

โดยสรุปคือการแบ่งส่วนการพัฒนาเว็บแอพออกเป็นสามส่วน

ซึ่งแยกจากกัน แต่ทำงานร่วมกันได้ แต่ละส่วนแยกเป็น..

mvc_DesignPattern

Model

คือต้นแบบหรือตัวแทนของขัอมูลที่ทำงานควบคู่ไปกับฐานข้อมูลที่เราใช้งาน

หากมีการสั่งให้ปรับปรุงข้อมูล จะมีผลไปยังข้อมูลในฐานข้อมูล

ว่าไปแล้วคล้ายๆกับ BLL + DAL

View

คือมุมมองที่ผู้ใช้ระบบเห็น ทำหน้าที่รับ input จากผู้ใช้ หรือเรียกให้ง่ายคือ User interface

รวมถึงแสดงข้อมูลจาก Model

Control

คือส่วนควบคุมการทำงาน ทั้งการตรวจสอบเงื่อนไข การตรวจจับข้อผิดพลาด

และการส่งกลับไปให้ View แสดงผล คล้ายกับ Business Logic Layer ใน n tier

ความเห็นส่วนตัวแล้ว mvc น่าสนใจ(อย่างน้อยก็สำหรับผม)  เพราะการแบ่งส่วนการทำงาน

โดยมีการทำงานร่วมกันได้ คงดีไม่น้อยสำหรับนักพัฒนา และเว็บดีไซเนอร์

สำหรับ php ผมรู้น้อยมาก หากท่านใดมีข้อมูลดีๆโปรดนำมาเล่าให้ฟังบ้าง

จะเป็นพระคุณอย่างสูง

 

สำหรับตอนที่ 3 จะสาธิต

  1. การกรองข้อมูล
  2. จัดเรียงข้อมูล
  3. การใช้คอนโทรลร่วมกันเพื่อการค้นหา
  4. การจัดกลุ่มข้อมูล
  5. การใช้ QueryExtender
  6. การใช้ Like เพื่อการค้นหาข้อมูล

1.การกรองผูู้เรียนและแสดงผล

ในบทนี้คู่มือได้สอนการกรองข้อมูล Student จาก Person ทั้งหมด ซึ่ง Student จะมี่ค่าขอมูลวันลงทะเบียน (ดูจากข้อมูลใน database)

 

1.1 เปิดเพจ Student.aspx แล้วคลิกที่คอนโทรล entity datasouce

image

 

 

 

 

 

 

 

 

 

 

 

 

1.2 แล้วดูที่หน้าต่าง properties ไปที่ Where แล้วพิมพ์ตามนี้

image

 

1.3 จากนั้นให้ทดลองรันเพจ จะได้ผลดังนี้

image

 

2.การเรียงข้อมูลก่อนแสดงผล

เราจะเรียงข้อมูล Student จาก LastName  สามารถทำได้ดังนี้

 

2.1 ที่เพจ Student.aspx เดิมนี้ให้คลิกที่ entity datasource control ไปที่หน้าต่าง properties แล้วดูที่คุณสมบัติ OrderBy แล้วกรอกตามนี้

image

 

2.2 รันเพจจะได้ผลตามนี้

image

 

3. การใช้คอนโทรลร่วมกันเพื่อการค้นหาข้อมูล

การค้นหาข้อมุลแบบนี้เรียกว่าใช้ control parameter เพื่อส่งค่าแล้วนำไปค้นหาด้วยคุณสมบัติ Where

 

3.1 ให้เปิดเพจ Course.aspx แล้วคลิกที่คอนโทรล CourseEntityDataSource แล้วดูที่หน้าต่าง properties แล้วคลิกที่จุด …  ในช่อง Where

image

 

3.2 เมื่อปรากฏหน้าต่าง Expression ให้คลิกเพื่อเลือกที่ช่อง Auto gen the where expression…

image

 

3.3 แล้วคลิกปุ่ม Add Parameter ที่ช่อง Name พิมพ์ฟิล์ดที่เราต้องการนำค่าไปเปรียบเทียบคือ DepartmentID

image

 

3.4 ที่ช่อง Parameter Source ให้เลือก Control จากนั้นที่ช่อง ControlID ให้เลือกเป็นชื่อของ dropdownlist คือ dropDepartment

image

 

3.5 คลิกที่ Show advance.. จะปรากฏคุณสมบัติเพิ่มเติมให้มองหา Type แล้วเปลี่ยนให้เป็น Int32 แล้วคลิก OK เพื่อปิดหน้าต่างการกำหนดค่า

image

 

3.6 จากนั้นให้แก้ไขคอนโทรล CourseGridView ในหน้า Source ดังนี้

<asp:GridView ID=”CoursesGridView” runat=”server” AutoGenerateColumns=”False”
DataKeyNames=”CourseID” DataSourceID=”CoursesEntityDataSource”>
<Columns>
<asp:BoundField DataField=”CourseID” HeaderText=”ID” ReadOnly=”True”
SortExpression=”CourseID” />
<asp:BoundField DataField=”Title” HeaderText=”Title” SortExpression=”Title” />
<asp:BoundField DataField=”Credits” HeaderText=”Credits”
SortExpression=”Credits” />
</Columns>
</asp:GridView>

 

สำหรับ Gridview นี้จะแสดงเพียง 3 คอลัมเท่านั้น คือรหัสวิชา ชื่อวิชา และหน่วยกิต

 

3.7 จากนั้นกลับไปดุที่คอนโทรล dropdownlist  ให้เรา Enable ที่ AutoPostBack โดยเปลี่ยนให้เป็น True เพื่อให้ส่งค่าทันทีที่เลือกข้อมูลจากคอนโทรลนี้

image

 

3.8 ทดลองรันเพจและเปลี่ยนสาขาวิชาจะพบว่าภายใน gridview มีการแสดงผลรายวิชาตามไปด้วย

image

image

 

4. การจัดกลุ่มข้อมูล

ระบบต้องการให้แสดงจำนวนนิสิตที่หน้า About.aspx  โดยจัดกลุ่มจากวันที่ Student ลงทะเบียน

 

4.1 ให้เปิดเพจ About.aspx แล้วแทนที่ข้อความเดิมด้วย

image

 

4.2 จากนั้นให้เพิ่ม entity datasource control ลงไป โดยมีเงื่อนไขดังนี้

  • เราจะกรองมาเฉพาะ Student เท่านั้น ดูที่ Where
  • เราจะจัดกลุ่มจากวันที่ลงทะเบียนเรียน ดูที่ GroupBy
  • เราจะจัดกลุ่มและนับจำนวน Student ดูที่ Select
  • เราจะจัดเรียนตามวันที่การลงทะเบียน ดูที่ OrderBy

เราจะโค้ดที่หน้า source ได้ดังนี้

image

 

4.3 จากนั้นลาก gridview มาวางในเพจและโค้ดตามดังนี้

image

 

4.4 จากนั้นลองรันเพจจะได้ผลดังนี้

image

 

5.การใช้ QueryExtender

 

ส่วนนี้เป็นการสาธิตการใช้คอนโทรล QueryExtender เพื่อช่วยการกรองข้อมูล จัดเรียงข้อมูลจาก eds อีกต่อหนึ่ง

 

5.1 กลับไปที่เพจ Course.aspx แล้วเพิ่มโค้ดเข้าไปส่วนท้ายดังนี้

image

 

เมื่อลองคลิก View จะได้ผลดังนี้

image

 

5.2 จากนั้นให้เพิ่มคอนโทรล QueryExtender ลงไป โดยระบให้ติดต่อกับคอนโทรล SearchEntityDataSource (บรรทัดที่ 49)

การค้นหาให้ค้นจากอักษรนำหน้า ในฟิลด์ Title (ดูบรรทัดที่ 51)

โดยรับค่าที่ป้อนจากคอนโทรลคือ SearchTextbox (บรรทัดที่ 52)

นอกจากนี้ยังจัดเรียงจากฟิลด์ชื่อสาขาวิชา และมีทิศทางจากน้อยไปมาก (56)

นอกจากนั้นยังเรียงตามชือวิชาอีกด้วย (57)

จากที่กลาวมานี่คือโค้ดใน source view

image

 

5.3 สุดท้ายให้เพิ่ม gridview ลงไป

image

จากโค้ดเราจะแสดงชื่อสาขาวิชา รหัสวิชา ชื่อวิชา หน่วยกิต

 

5.4 ให้ลองรันเพจนี้ดู

image

เมื่อไม่ได้ค้นหาวิชาอะไร

 

 

 

 

 

 

 

 

 

 

 

 

 

 

image

เมื่อลองพิมพ์ค่าเพื่อค้นหาลงไป

 

 

 

 

 

 

 

 

 

 

 

 

6. การใช้ Like เพื่อการค้นหาข้อมูล

ส่วนนี้จะสาธิตการใช้ LIkE เพื่อค้นห้าข้อมูล ซึ่งมีลักษณะคล้ายกับการใช้ QueryExtender คอนโทรลดังหัวข้อที่ 5

แต่สำหรับหัวข้อนี้เป็นการแสดงการค้นหาข้อมูลในอีกรูปแบบหนึ่ง ที่สามารถให้ผลการทำงานได้เหมือนกัน หากท่านถนัดแบบใดก็เลือกใช้ตามความต้องการ

สำหรับตอนนี้เราจะสาธิตการค้นหาจากชื่อ หรือสกุลของ Student

 

6.1 ให้เปิดเพจ Student.aspx และเพิ่มโค้ดนี้ลงไปต่อจากโค้ดเดิม

image

 

6.2 และเพิม eds ลงไปโดยให้ติดต่อกับ entity People และที่สำคัญจะต้องระบุเงื่อนไข Where เพื่อกรองคนที่มีวันลงทะเบียนเรียนเท่านั้น และใช้ operator การค้นหา % กับฟิลด์ชื่อ รวมทั้งนามสกุลด้วย

การใช้ % นำหน้าข้อความที่ต้องการค้นหา  หมายถึง จะมีอักษรนำหน้าอะไรก็ตามแต่ต้องมีข้อความที่เราระบุลงไป

และในทางกลับกันหากใชั้ % ตามหลังข้อความที่เราระบุ หมายถึง ค้นห้าอักษรที่มีคำตามเป็นอะไรก็ได้ แต่ต้องมีอักษรนำหน้าตามที่เราระบุ

สำหรับตัวอย่างนี้จะใช้ % ทั้งหน้าและหลังข้อความที่เราระบุ (บรรทัด 60)

image

 

6.3 จากนั้นสร้าง Gridview และระบุฟิลด์ที่ต้องการแสดงผลตามนี้

image

 

6.4 ทดลองรันเพจนี้

image

 

image

 

สำหรับบทที่ 3 จบเพียงเท่านี้ครับ หวัดดี

 

 

 

สาธิตการเพิ่มผู้เรียนลงในรายวิชา
วิดีโอสอนการใช้ระบบ LMS Moodle
วิทยาลัยนานาชาติ มหาวิทยาลัยนเรศวร
หน่วยเทคโนโลยีสารสนเทศ