จัดการข้อมูลไบนารีใน GridView ด้วย LINQ และ AJAX


สิ่งที่จำเป็น (Prerequisites)

  • Visual Studio 2008
  • Microsoft SQL Server 2005 EXPRESS
  • ASP.NET 2.0 AJAX Extensions
  • ASP.NET Futures July 2007
  • AjaxControlToolkit-Framework3.5

Download source:
http://cid-7d608959d854cb28.skydrive.live.com/embedrowdetail.aspx/CODEITMAGAZIN/CRUD|_the|_binary|_data|_in|_GridView|_with|_LINQ|_and|_AJAX|_source|_code.zip

 

บทนำ

จากบทความที่ผมเขียนตีพิมพ์ลง นิตยสาร CODE IT [สอดอยู่ในเล่ม Windows ITPro ฉบับเดือน กันยายน 2551] ซึ่งผมได้ขออนุญาตในการนำบทความไปเผยแพร่จากทางสำนักพิมพ์เป็นที่เรียบร้อยแล้ว ติดตามกันได้เลยครับ:

ในบทความนี้ผู้เขียนขอนำท่านผู้อ่านเข้าสู่ การพัฒนาแอพพลิเคชันเพื่อทำงานกับข้อมูลในรูปแบบ ของข้อมูลไบนารี (Binary) หรือที่เรียกว่า BLOBs (binary large objects) ซึ่งในฐานข้อมูลของ SQL 2005 นั้นมีประเภทของฟิลด์ที่เก็บข้อมูลในรูปแบบไบนารี นั่นคือประเภทข้อมูล แบบ Image นั่นเอง

เราจะมาใช้ความสามารถของคอนโทรล GridView ในการนำข้อมูลไบนารีลงเข้าฐานข้อมูลข้อมูลไบนารีดังกล่าวได้แก่ ข้อมูลในรูปของรูปภาพ, ไฟล์ฟอร์แมตต่างๆ เช่น Microsoft Office Excel, Microsoft Office Word, Zip หรือไฟล์ PDF เป็นต้น เราจะใช้ LINQ ในการอ่านข้อมูลไฟล์ฟอร์แมตต่างๆ เหล่านั้นออกมาในหน่วยของไบต์อาร์เรย์ (byte array) จากนั้นใช้ LINQ แปลงไบต์อาร์เรย์ เป็นอ็อบเจ็กต์ไบนารี แล้วนำอ็อบเจ็กต์ไบนารีบันทึกลงฐานข้อมูล และขณะเดียวกันเราสามารถเรียกข้อมูลไบนารีเหล่านั้นกลับคืนมาใช้งานได้ โดยใช้ LINQ อ่านข้อมูลไบนารีออกมา และทำการเขียนข้อมูลในหน่วยไบนารี่ออกมาเป็นไฟล์ตามฟอร์แมตเดิมของมัน บทความนี้: อ้างอิงจากบทความ CRUD the data in GridView with LINQ and AJAX(สร้าง อ่าน แก้ไข ลบ ข้อมูลใน GridView ด้วย LINQ และ AJAX) ในนิตยสาร CODE IT ในฉบับก่อนหน้านี้ ฉะนั้นรายละเอียดต่างๆ ของคอนโทรล GridView, การสร้างฐานข้อมูลด้วย VS2008 และการสร้าง LINQ ผู้เขียนจะไม่เล่าลงรายละเอียดมากนัก เพียงเกริ่นนำเป็นแนวทางในการเล่าความ ซึ่งท่านผู้อ่านสามารถอ่านบทความก่อนหน้านี้ประกอบด้วยกันได้ครับ

 

เป้าประสงค์ของบทความนี้:

  • สามารถอัพโหลดไฟล์ต่างๆ ผ่านคอนโทรล GridView
  • สามารถแก้ไขข้อมูลผ่านคอนโทรล GridView
  • สามารถดาวน์โหลดไฟล์ต่างๆ เหล่านั้นกลับมาใช้งานได้
  • สามารถแสดงรูปภาพบน GridView ได้

หน้าตาแอพพลิเคชัน CRUD the binary data in GridView with LINQ ของเราจะเป็นดังรูปที่ 1:

 

1

รูปที่ 1 หน้าตาแอพพลิเคชัน CRUD the binary data in GridView with LINQ

จากรูปที่ 1 กล่าวได้ว่า

  • เราสามารถทำการอัพโหลดข้อมูลไฟล์ฟอร์แมตต่างๆ ไปบันทึกลงฐานข้อมูลผ่านคอนโทรล GridView โดยใช้ร่วมกับคอนโทรล FileUpload
  • เราสามารถดาวน์โหลดไฟล์เหล่านั้นกลับมาใช้งานได้โดยการอ่านข้อมูลไบนารีแล้วแปลงเป็นข้อมูลต้นฉบับของมัน โดยคลิกที่ LintButton ตรงช่องคอลัมน์ File_Name
  • สามารถแก้ไข และลบข้อมูลได้
  • สามารถแสดงรูปภาพบนคอนโทรล GridView ได้

 

สำรวจความพร้อม:

สิ่งจำเป็นสำหรับบทความนี้ ที่ท่านผู้อ่านต้องมีอยู่ในเครื่องคอมพิวเตอร์

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

 

ขั้นตอนการพัฒนาแอพพลิเคชัน

  • ขั้นตอนที่หนึ่ง: สร้างโปรเจ็กต์
  • ขั้นตอนที่สอง: สร้างฐานข้อมูล
  • ขั้นตอนที่สาม: สร้าง LINQ
  • ขั้นตอนที่สี่: ปรับไอเท็มเทมเพลตของคอนโทรล GridView
  • ขั้นตอนที่ห้า: กำหนด AJAX ConfirmButtonExtender
  • ขั้นตอนที่หก: ทดสอบแอพพลิเคชัน

 

ขั้นตอนที่หนึ่ง: สร้างโปรเจ็กต์

ให้เราทำการสร้างโปรเจ็กต์ใหม่ด้วยเทมเพลตของ ASP.Net Web Site จากนั้นทำการเพิ่มโฟลเดอร์ Images เพื่อเก็บไอคอน ของไฟล์ที่ไม่ใช่รูปภาพเช่น Excel, Word และ ไฟล์ Zip เป็นต้น เพื่อให้แสดงเป็นไอคอนแทนฟอร์แมตของไฟล์เหล่านั้น การสร้างโปรเจ็กต์แสดงดังรูปที่ 2:

 

2

รูปที่ 2 การสร้างโปรเจ็กต์

จากรูปที่ 2 กล่าวได้ว่า

หมายเลข 1:

  • สร้างโปรเจ็กต์ใหม่ด้วยเทมเพลตของ ASP.Net Web Site โดยใช้ภาษา C#

หมายเลข 2:

  • ส่วนประกอบของไฟล์ต่างๆ ในโซลูชัน (Solution) ของเรา

หมายเลข 3:

  • ลาก ScriptManager ไปวางบนสุดของหน้าดีฟอลต์ ตรงใต้แทกของ ฟอร์ม(<form />) เนื่องจากเรามีการใช้ AJAX ในดีฟอลต์เพจด้วย

 

ขั้นตอนที่สอง: สร้างฐานข้อมูล

ขั้นตอนนี้ เราจะมาใช้เครื่องมือมีระดับอย่าง VS2008 ในการสร้างฐานข้อมูล SQL 2005 EXPRESS โดยเราทำการเพิ่ม Item SQL Server Database เข้ามาในโปรเจ็ต์ของเรา จากนั้นสร้างตารางใหม่ให้ตั้งชื่อตารางเป็น Table_StoreFiles และใส่ฟิลด์ต่างๆ เหมือนในตารางที่1 ดังนี้:

ตารางที่1: ฟิลด์ต่างๆ ในตาราง Table_StoreFiles

t1

จากตารางที่ 1: กล่าวได้ว่า

ฟิลด์ File_ID:

  • กำหนดเป็น Primary Key โดยคลิกบนไอคอนรูปกุญแจ จากนั้นตั้งค่าให้มันเพิ่มค่าอัตโนมัติโดยคลิกบน Identity Specification และกำหนด(Is Identity) เป็น Yes และ เริ่มเพิ่มค่าที่ 1000

ฟิลด์ File_Name:

  • ใช้เก็บข้อมูลชื่อไฟล์

ฟิลด์ File_Content:

  • ใช้เก็บข้อมูลไบนารี

ฟิลด์ File_Type:

  • ใช้เก็บประเภทไฟล์

ฟิลด์ File_Size:

  • ใช้เก็บข้อมูลขนาดไฟล์

ขั้นตอนที่สาม: สร้าง LINQ

ในขั้นตอนของการสร้าง LINQ ให้เราทำการเพิ่มเทมเพลต LINQ to SQL Class เข้ามาในโปรเจ็กต์, ทำการลากตาราง Table_StoreFiles เข้ามาในพื้นที่ออกแบบดาต้าเบสโมเดล (dbml) จากนั้นบิลด์โปรเจ็กต์หนึ่งครั้งเพื่อให้ LINQ ทำการแมปตาราง Table_StoreFiles เป็นอ็อบเจ็กต์ Table_StoreFiles เพื่อให้เราสามารถนำไปใช้ในการใส่โค้ดแบบอ็อบเจ็กต์ (OOP) ได้

เมื่อการสร้าง LINQ เป็นที่เรียบร้อยแล้ว ให้ทำการกำหนดดาต้าซอร์สให้คอนโทรล GridView โดยเลือกประเภทดาต้าซอร์สเป็น LINQ และเลือกตาราง Table_StoreFiles โดยให้เลือกทุกฟิลด์ จากนั้นทำการคลิกบนปุ่ม Advanced ให้คลิกเลือก Advanced ทั้งหมดเพื่อให้ดาต้าซอร์สสามารถทำลบข้อมูล เพิ่มข้อมูล และแก้ไขข้อมูลได้ แสดงดังภาพที่ผู้เขียนได้บันทึกไว้แล้วในรูปที่ 3

 

3

รูปที่ 3 ขั้นตอนการการกำหนดคุณสมบัติ ของดาต้าซอร์ส (Configure Data Source)

จากรูปที่ 3 กล่าวได้ว่า

หมายเลข 1:

  • เลือกตาราง Table_StoreFiles จากนั้นทำการเลื่อนเมาส์ลงไปเลือกทุกฟิลด์

(Select: *)

หมายเลข 2:

  • คลิกเมาส์ลงบนปุ่ม Advanced…

หมายเลข 3:

  • ให้คลิกเลือก Advance Options ทั้งหมดโดย

? Enable the LinqDataSource to perform automatic deletes: กล่าวคือ ใช้ LinqDataSource ที่จะปฎิบัติการลบอัตโนมัติ

? Enable the LinqDataSource to perform automatic Inserts: กล่าวคือ ใช้ LinqDataSource ที่จะปฎิบัติการเพิ่มอัตโนมัติ

? Enable the LinqDataSource to perform automatic updates: กล่าวคือ ใช้ LinqDataSource ที่จะปฎิบัติการแก้ไขอัตโนมัติ

ขั้นตอนที่สี่: ปรับไอเท็มเทมเพลตของคอนโทรล GridView

ก่อนที่เราจะเข้าไปปรับไอเท็มเทมเพลต เราต้องทำการคอนเวอร์ตฟิด์ลให้เป็นเทมเพลตฟิด์ลเสียก่อน ดังนี้ ให้คลิกที่ GridView Tasks (บนเครื่องหมาย > มุมบนขวาของ GridView) จากนั้นเลื่อนเมาส์ลงมาเลือกเมนู Edit Columns… แล้วทำการเลือกฟิด์ลที่ต้องการคอนเวอร์ต จากนั้นคลิกเมาส์บนเมนู Convert this field into a TemplateField เพียงเท่านี้ฟิด์ลดังกล่าวจะกลายเป็น เทมเพลตฟิด์ลเรียบร้อย ทำให้เราสามารถเข้าไปปรับเปลี่ยนมัน และใส่คอนโทรลอื่นได้ตามใจต้องการ ให้เราทำการปรับสามคอลัมน์ดังนี้:

หลังจากเราทำการกำหนดดาต้าซอร์ส์ให้คอนโทรล GridView เรียบร้อยแล้วในขั้นตอนนี้ เรามาทำการปรับไอเท็มเทมเพลตของ GridView ซึ่งขั้นตอนการปรับไอเท็มเทมเพลตผู้เขียนได้บันทึกเป็นภาพเรียบร้อยแล้วดังรูปที่ 4:

 

4

รูปที่ 4 การปรับไอเท็มเทมเพลตของ GridView

จากรูปที่ 4 กล่าวได้ว่า

เราปรับไอเท็มเทมเพลตต่างๆ ของคอนโทรล GridView ที่อยู่ในคอลัมน์ต่างๆ ดังนี้:

  • คอลัมน์แรกในหมายเลข 1 ซึ่งเป็นคอลัมน์ของคอมมานด์ที่เก็บปุ่ม Insert, Update และ Delete การปรับไอเท็มเทมเพลตคอลัมน์แรก (Column[0]) แสดงดังตารางที่ 2
  • คอลัมน์ File_Name ในหมายเลข 2 เป็นคอลัมน์เก็บลิงค์สำหรับดาวน์โหลดไฟล์ เข้าไปกำหนด DataBinding โดยคลิกบน HyperLink Tasks (บนเครื่องหมาย > ของคอนโทรล HyperLink1) ดังภาพที่ได้บันทึกไว้แล้วในรูปที่ 5 จากนั้นกำหนด Bindable properties: แสดงดังตารางที่ 3
  • คอลัมน์สุดท้ายเป็นคอลัมน์ ในหมายเลข 3 เก็บรูปภาพ สำหรับข้อมูลที่เป็นรูปภาพ และรูปภาพไอคอนสำหรับข้อมูลที่เป็นไฟล์อื่นๆ เช่น Word, Excel, ZIP หรือ PDF เป็นต้น และใส่คอนโทรล FileUpload ในหมายเลข 4 สำหรับอับโหลดไฟล์เข้าเซอร์ฟเวอร์ ก่อนแปลงเป็นไบนารีเพื่อเก็บลงฐานข้อมูล การปรับไอเท็มเทมเพลตคอลัมน์สุดท้ายโดย ItemTemplate ลากคอนโทรล Image ไปใส่ EditItemTemplate และ FooterTemplate ให้ลากคอนโทรล FileUpload ไปใส่
  • EmptyDataTemplate ในหมายเลข 5 ให้ใส่ป้ายข้อความ “ในระบบยังไม่มีข้อมูล กรุณาอับโหลดข้อมูล…” และใส่ป้าย Upload new: จากนั้นลากคอนโทรล FileUpload ไปใส่

ตารางที่ 2: ปรับไอเท็มเทมเพลตของ GridView คอลัมน์แรก

t2

 

5

รูปที่ 5 กำหนด DataBinding ให้คอนโทรล HyperLink1

จากรูปที่ 5 กล่าวได้ว่า

ในการกำหนด DataBinding ให้คอนโทรล HyperLink1 ให้ทำการกำหนดค่าต่างๆ ตามตารางที่ 3

ตารางที่ 3: ปรับไอเท็มเทมเพลตของ GridView คอลัมน์เก็บลิงค์สำหรับดาวน์โหลดไฟล์

t3

 

จากรูปที่ 5 เบื้องหลัง VS2008 เจนโค้ด HTML Markup ให้ดังนี้:

โค้ด HTML Markup กำหนด DataBinding ให้ HyperLink1:

<ItemTemplate>

<asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("File_ID", "LoadBinary.aspx?FileID={0}") %>' ToolTip ='<%# Eval("File_Type") %>' />

</ItemTemplate>

 

ขั้นตอนที่ห้า: กำหนด AJAX ConfirmButtonExtender

ในขั้นตอนนี้เป็นการใช้งาน AjaxControlToolkit-Framework3.5 โดยเรียกใช้คอนโทรล ConfirmButtonExtender โดยเราเอาคอนโทรลดังกล่าวไปเกาะกับปุ่มลบข้อมูลของเรา ในไอเท็มเทมเพลตของคอนโทรล GridView เพื่อเป็นการยืนยันการลบข้อมูล ขั้นตอนการกำหนดเป็นดังภาพที่ผู้เขียนได้บันทึกไว้ในรูปที่ 6:

 

6

รูปที่ 6 กำหนด AJAX ConfirmButtonExtender ให้ปุ่มลบข้อมูล

จากรูปที่ 6 กล่าวได้ว่า

ให้เข้าไปแก้ไขไอเท็มเทมเพลตของคอนโทรล GridView ในคอลัมน์แรก โดยลากคอนโทรล ConfirmButtonExtender (หมายเลข 1) ไปวางบนปุ่มลบข้อมูล (รูปภาพลูกบอลสีแดงมีกากบาท) จากนั้นเข้าไปปรับพรอเพอร์ตี้ของปุ่มดังกล่าว ให้คลิกเครื่องหมายบวกข้างหน้า ImageButton2_ConfirmButtonExtender เพื่อขยายออก แล้วทำการใส่ข้อความตรง ConfirmText = "คุณต้องการลบข้อมูลใช่หรือไม่?…" ในหมายเลข 2

ในเบื้องหลังแล้ว VS2008 เจนโค้ด HTML Markup ให้กับปุ่มลบข้อมูลดังนี้:

โค้ด HTML Markup ของปุ่มลบข้อมูล:

<asp:ImageButton ID="ImageButton2" runat="server" CausesValidation="False"

CommandName="Delete" ImageUrl="~/Images/Delete.gif" ToolTip="Delete" />

<cc1:ConfirmButtonExtender ID="ImageButton2_ConfirmButtonExtender"

runat="server" ConfirmText="คุณต้องการลบข้อมูลใช่หรือไม่?..." Enabled="True"

TargetControlID="ImageButton2">

 

ขั้นตอนที่ห้า: ทดสอบแอพพลิเคชัน

เมื่อเราทำการออกแบบแอพพลิเคชันเป็นที่เรียบร้อยแล้ว ขั้นตอนสุดท้ายเรามาทำการทดสอบระบบดูว่ามันเป็นไปตามเป้าประสงค์ของเราหรือไม่? ให้ทำการกด F5 เพื่อรัน(Run) แอพพลิเคชัน ผลการรันเป็นดังภาพที่ผู้เขียนได้บันทึกไว้ในรูปที่ 7:

 

7

รูปที่ 7 ทดสอบแอพพลิเคชัน

จากรูปที่ 7 กล่าวได้ว่า

ในการรันครั้งแรก ฐานข้อมูลของเรายังไม่เคยมีข้อมูลใดๆ อยู่ภายในเมื่อคอนโทรล GridView ไม่มีข้อมูลใดๆ ไปแสดง มันจะแสดงข้อมูลในส่วนของ EmptyDataTemplate ในหมายเลข 1 ที่ได้ทำการกำหนดใน ขั้นตอนที่สี่: ปรับไอเท็มเทมเพลตของคอนโทรล GridView ของรูปที่ 5 ในหมายเลข 5 จากนั้นเราทำการบราวซ์ (Browse…) และอับโหลดไฟล์ ข้อมูลจะถูกนำๆปแสดงบนคอนโทรล GridView ตามเป้าประสงค์ของเรา

การแก้ไขข้อมูล:

  • ให้เราทำการคลิกเมาส์บนปุ่ม(รูปสี่เหลี่ยมสีเทามีกากบาท) ในหมายเลข 2 จะเป็นการแก้ไขเรกคอร์ดนั้นๆ เราสามารทำการแก้ไขข้อมูลใหม่โดยการอับโหลดไฟล์ขึ้นไป เพื่อจัดเก็บลงฐานข้อมูล

การลบข้อมูล:

  • ให้คลิกปุ่มลบข้อมูล (รูปบอลกลมสีแดงมีกากบาท) ในหมายเลข 3 จะมีกล่องข้อความยืนยันการลบข้อมูล ถ้าเรายืนยันการลบข้อมูลโดยการกด OK เรกคอร์ดนั้นจะถูกลบออกจากฐานข้อมูล

การเพิ่มข้อมูล:

  • เราสามารถทำการอับโหลดข้อมูลใหม่จากคอนโทรล FileUpload ตรงบรรทัดใต้ (Footer) สุดของ GridView ในหมายเลข 4

การดาวน์โหลดข้อมูลใบนารีในฐานข้อมูลกลับมาใช้งาน:

เราสามารถนำข้อมูลไฟล์ต่างๆ ที่ถูกเก็บในฐานข้อมูลด้วยรูปแบบข้อมูลไบนารี กลับมาใช้งานได้ ด้วยการอ่านข้อมูลไบนารีด้วย LINQ แล้วเขียนข้อมูลดังกล่าวด้วยเมธอด HttpResponse.BinaryWrite() ด้วยการผ่านชุดข้อมูลไบนารีอาร์เรย์ ดังกล่าวเข้าไปในเมธอด ถ้าเป็นข้อมูลไฟล์ต่างจะมีหน้าต่างให้เราดาวน์โหลดไฟล์ ถ้าเป็นข้อมูลรูปภาพมันจะแสดงรูปภาพบนบราวเซอร์ โดยการดาวน์โหลดข้อมูลไฟล์ต่างๆ ดังกล่าวจะออกมาเขียนไฟล์ในหน้าเพจ LoadBinary.aspx ดูได้จาก โค้ด HTML Markup กำหนด DataBinding ให้ HyperLink1: ดังที่ได้กล่าวไปก่อนหน้านี้แล้ว ส่วนไฟล์ที่เป็นรูปภาพ โค้ด HTML Markup เป็นดังนี้:

โค้ด HTML Markup ส่วนของไฟล์ที่เป็นรูปภาพ

<ItemTemplate>

<asp:Image ID="Image1" runat="server"

ImageUrl='<%# Eval("File_ID", "LoadBinary.aspx?FileID={0}") %>'

ToolTip ='<%# Eval("File_Type") %>' />

</ItemTemplate>

ซึ่งโค้ดโดยสมบูรณ์ จะกล่าวถึงในลำดับต่อไป การทำงานเป็น ดังภาพที่ผู้เขียนได้ทำการบันทึกไว้ในรูปที่ 8:

 

8

รูปที่ 8 ดาวน์โหลดข้อมูลกลับมาใช้งาน

จากรูปที่ 8 กล่าวได้ว่า

หมายเลข 1:

  • เมื่อเราทำการคลิกบนลิงค์ที่เป็นข้อมูลรูปภาพ มันจะแสดงรูปภาพดังกล่าวบนบราวเซอร์ ซึ่งถ้าเราต้องการนำรูปดังกล่าวไปใช้งานสามารถทำการ Copy รูปดังกล่าวมาเก็บไว้บนเครื่องของเราได้ โดยคลิกขวาบนรูปภาพแล้วเลื่อนเมาส์มาเลือกเมนู Save Picture As… จากนั้นเลือกพาธตามต้องการ

หมายเลข 2:

  • เราทำการคลิกบนลิงค์ที่เป็นข้อมูลไฟล์อื่นๆ มันจะขึ้นหน้าต่างให้เราดาวน์โหลด (Save) ไฟล์ ให้ทำการกดปุ่ม Save จะเป็นการดาวน์โหลดไฟล์มาไว้ในเครื่องของเรา (Client) หรือทำการกดปุ่ม Open เพื่อเปิดไฟล์ดังกล่าว

โค้ดสมบูรณ์:

Default.aspx.cs:


using System;

using System.Collections;

using System.Configuration;

using System.Data;

using System.Linq;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.HtmlControls;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Xml.Linq;

public partial class _Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

}

private void FileUpload(FileUpload fileUpload, string mode)

{

if (fileUpload.HasFile && fileUpload.PostedFile.ContentLength > 0)

{

//คอนเวอร์ต fileupload.postedfile ไปเป็น system.data.linq.binary 

byte[] fileArray = new byte[fileUpload.PostedFile.ContentLength + 1];

fileArray[fileUpload.PostedFile.ContentLength] = new byte();

fileUpload.PostedFile.InputStream.Read(fileArray, 0, fileUpload.PostedFile.ContentLength);

//แปลงข้อมูลไบต์อาร์เรย์ เป็นอ็อบเจ็กต์ไบนารี

System.Data.Linq.Binary image = new System.Data.Linq.Binary(fileArray);

//ประกาศตัวแปร db เป็น DataClassesDataContext 

using (DataClassesDataContext db = new DataClassesDataContext())

{

if (mode == "New")//เป็นการเพิ่มข้อมูลใหม่

{

//ประกาศตัวแปร newTb พร้อมสร้างอ็อบเจ็กต์ใหม่ เป็นประเภท อ็อบเจ็กต์ Table_StoreFile 

Table_StoreFile newTb = new Table_StoreFile()

{

//กำหนดค่า File_Type เก็บค่าของประเภทไฟล์จาก fileUpload.PostedFile.ContentType

File_Type = fileUpload.PostedFile.ContentType,

//กำหนด File_Content เก็บข้อมูลไบนารี ที่ได้จากการคอนเวร์ตด้านบน

File_Content = image,

//กำหนดค่า File_Name เก็บค่าของชื่อไฟล์จาก fileUpload.FileName 

File_Name = fileUpload.FileName,

//กำหนดค่า File_Size เก็บค่าของขนาดไฟล์จาก fileUpload.PostedFile.ContentLength

File_Size = fileUpload.PostedFile.ContentLength

};

//เพิ่มข้อมูลอ็อบเจ็กต์ newTb ไปบน LINQ หน่วยความจำของระบบ)

db.Table_StoreFiles.InsertOnSubmit(newTb);

}

else//เป็นการแก้ไข

{

int xr = GridView1.EditIndex;//เก็บ Index ของบรรทัดที่ทำการแก้ไข

//ดึงรหัสของไฟล์ออกมาไปเก็บบน label1

Label label1 = GridView1.Rows[xr].Cells[5].FindControl("Label1") as Label;

//ถ้ารหัสที่เก็บบน label1 เป็นค่าว่าง ให้เป็นค่า 0 ถ้าไม่ใช่ให้คอนเวอร์ตเป็น Int แล้วเก็บไว้บนตัวแปร fileid

int fileid = (label1.Text == "") ? 0 : Convert.ToInt32(label1.Text);

//ใช้ LINQ คิวรี่ข้อมูลไบนารีออกมา โดยกำหนดเงื่อนไขให้ รหัส (File_ID) เท่ากับ fileid ที่ได้จากการคลิกบน GridView 

//เก็บค่าไว้ที่ตัวแปร tb ประเภทอ็อบเจ็กต์ของ Table_StoreFile

Table_StoreFile tb = (from tbs in db.Table_StoreFiles where tbs.File_ID == fileid select tbs).FirstOrDefault();

if (tb != null)//ถ้ามันมีข้อมูลอยู่ในฐานข้อมูล กล่าวคือ อ็อบเจ็กต์ tb ไม่เป็น null

{

//เก็บประเภทไฟล์

tb.File_Type = fileUpload.PostedFile.ContentType;

//เก็บข้อมูลไบนารี

tb.File_Content = image;

//เก็บชื่อไฟล์

tb.File_Name = fileUpload.FileName;

//เก็บขนาดของไฟล์

tb.File_Size = fileUpload.PostedFile.ContentLength;

}

}

//บันทึกข้อมูลจริงลงบน Table

db.SubmitChanges();

}

}

//โหลดข้อมูลเข้า GridView1 ใหม่

GridView1.DataBind();

}

//เมธอด เมื่อแถวของ GridView1 ถูกผูกข้อมูล

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)

{

//ถ้าประเภทของแถวเป็น ของข้อมูล

if (e.Row.RowType == DataControlRowType.DataRow)

{

//ดึงคอนโทรล Image1 ออกมาจากไอเท็มเทมเพลตของ GridView

Image im = e.Row.Cells[5].FindControl("Image1") as Image;

if (im != null)//ถ้าดึงได้ กล่าวคือมันมีค่าไม่เป็น null

{

//ให้ im แสดงรูปเหล่านี้แทน ตามเงื่อนไข ต่อไปนี้:

switch (e.Row.Cells[3].Text.Trim())

{

//ถ้าเป็นไฟล์ Excel: ให้ im ดึงรูปใน ~/Images/excel.jpg แสดงแทน

case "application/vnd.ms-excel": im.ImageUrl = "~/Images/excel.jpg"; break;

//ถ้าเป็นไฟล์ Word: ให้ im ดึงรูปใน ~/Images/word.jpg แสดงแทน

case "application/msword": im.ImageUrl = "~/Images/word.jpg"; break;

//ถ้าเป็นไฟล์ PDF: ให้ im ดึงรูปใน ~/Images/pdf.jpg แสดงแทน

case "application/pdf": im.ImageUrl = "~/Images/pdf.jpg"; break;

//ถ้าเป็นไฟล์ ZIP: ให้ im ดึงรูปใน ~/Images/zip.jpg แสดงแทน

case "application/x-zip-compressed": im.ImageUrl = "~/Images/zip.jpg"; break;

}

}

}//if (e.Row.RowType == DataControlRowType.DataRow)

}

protected void ImageBtEmpty_Click(object sender, ImageClickEventArgs e)

{

//ดึงคอนโทรล FileUpload3 ออกจาก EmptyDataTemplate ของ คอนโทรล GridView 

FileUpload fileUpload = GridView1.Controls[0].Controls[0].FindControl("FileUpload3") as FileUpload;

//เรียกเมธอด FileUpload โดยส่งพารามิเตอร์ คอนโทรล fileUpload และ "New" เพื่อเป็นการบอกว่าต้องการเพิ่มข้อมูลใหม่

FileUpload(fileUpload, "New");

}

protected void ImageBtNew_Click(object sender, ImageClickEventArgs e)

{

//ดึงคอนโทรล FileUpload2 ออกจาก FooterRow ของ คอนโทรล GridView 

FileUpload fileUpload = GridView1.FooterRow.FindControl("FileUpload2") as FileUpload;

//เรียกเมธอด FileUpload โดยส่งพารามิเตอร์ คอนโทรล fileUpload และ "New" เพื่อเป็นการบอกว่าต้องการเพิ่มข้อมูลใหม่

FileUpload(fileUpload, "New");

}

protected void ImageBtEdit_Click(object sender, ImageClickEventArgs e)

{

//ดึง Index ของแถวที่แก้ไข

int xr = GridView1.EditIndex;

//ดึงคอนโทรล FileUpload1 ออกจากแถวที่แก้ไข(Rows[xr])และคอลันม์สุดท้าย (Cells[5]) ของ คอนโทรล GridView 

FileUpload fileUpload = GridView1.Rows[xr].Cells[5].FindControl("FileUpload1") as FileUpload;

//เรียกเมธอด FileUpload โดยส่งพารามิเตอร์ คอนโทรล fileUpload และ "Edit" เพื่อเป็นการบอกว่าต้องการแก้ไขข้อมูล

FileUpload(fileUpload, "Edit");

}

}

โค้ดในส่วนของการอ่านข้อมูลในรูปของ ข้อมูลใบนารี แล้วเขียนออกมาเป็นไฟล์ต้นฉบับ ให้เราสามารถนำกลับไปใช้งานได้ (Download) อยู่ในไฟล์ LoadBinary.aspx ดังนี้:

LoadBinary.aspx.cs:

using System;

using System.Collections;

using System.Configuration;

using System.Data;

using System.Linq;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.HtmlControls;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Xml.Linq;

public partial class LoadBinary : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

//ถ้าตัวแปร QueryString["FileID"]มีข้อมูล กล่าวคือไม่เป็น null

if (Request.QueryString["FileID"] != null)

{

//คอนเวิร์ตตัวแปร QueryString["FileID"]เป็น Int ไปเก็บบนตัวแปร fileID ประเภท Int

int fileID = Convert.ToInt32(Request.QueryString["FileID"]);

//ประกาศตัวแปร db เป็น DataClassesDataContext

using (DataClassesDataContext db = new DataClassesDataContext())

{

//ใช้ LINQ คิวรี่ข้อมูลไบนารีออกมา โดยกำหนดเงื่อนไขให้ รหัส (File_ID) เท่ากับ fileID 

//เก็บค่าไว้ที่ตัวแปร tb ประเภทอ็อบเจ็กต์ของ Table_StoreFile

Table_StoreFile tb = db.Table_StoreFiles.Single(t => t.File_ID == fileID);

//เก็บข้อมูลไบนารีใน tb.File_Content ไปเก็บในตัวแปร biny

System.Data.Linq.Binary biny = tb.File_Content;

if (biny != null)//ถ้า biny มีข้อมูล กล่าวคือไม่เป็น null

{

//กำหนดประเภทเนื้อหา ให้เท่ากับจาก tb.File_Type ที่ดึงจากฐานข้อมูล

Response.ContentType = tb.File_Type;

//ใช้เมธอด BinaryWrite เขียนอ็อบเจ็กต์ biny ที่แปลงเป็นอาร์เรย์ ออกเป็นข้อมูล

Response.BinaryWrite(biny.ToArray());

Response.Flush();

Response.End();

Response.Close();

}

}

}

}

}

 

บทสรุป

เราสามารถใช้คอนโทรล GridView ทำงานกับข้อมูลโดยใช้ LINQ และ AJAX ตามเป้าประสงค์ของเรานั่นคือ

  • สามารถอัพโหลดไฟล์ต่างๆ ผ่านคอนโทรล GridView ได้
  • สามารถแก้ไขข้อมูลผ่านคอนโทรล GridView ได้
  • สามารถดาวน์โหลดไฟล์ต่างๆ เหล่านั้นกลับมาใช้งานได้ ได้
  • สามารถแสดงรูปภาพบน GridView ได้
  • สามารถเข้าไปทำการปรับเปลี่ยนไอเท็มเทมเพลต ของคอนโทรล GridView ได้

หากท่านผู้อ่านประสบปัญหาการเรียนรู้ตามบทความ หรือปัญหาการโปรแกรมมิ่งต่างๆ สามารถเข้ามาพบกัน เพื่อพูดคุยกันบนชุมชน http://greatfriends.biz ชุมชนแห่งโลกของ .Net พวกเราเผื่อแผ่กันทุกสิ่ง ด้วยความจริงใจ… และสามารถมาทำความรู้จักผู้เขียนบน Blogs ส่วนตัว http://janawat.spaces.live.com/ (Software Developer (กรรมกรซอฟต์แวร์))

หากบทความนี้มีข้อผิดพลาดประการใด ผู้เขียนขอน้อมรับความผิดพลาดทั้งหมดไว้แต่เพียงผู้เดียว และยินดีรับฟังคำชี้แนะทุกประการ เพื่อปรับปรุงเปลี่ยนแปลงให้เกิดสิ่งดีๆ ครั้งต่อๆ ไป

 

แหล่งข้อมูลอ้างอิง:

บทความ CRUD the data in GridView with LINQ and AJAX (สร้าง อ่าน แก้ไข ลบ ข้อมูลใน GridView ด้วย LINQ และ AJAX) ในนิตยสาร CODE IT ฉบับก่อนหน้านี้:

 

แหล่งดาวน์โหลดซอร์สโค้ด:

Source:> จากนิตยสาร CODE IT [สอดอยู่ในเล่ม Windows ITPro ฉบับเดือน กันยายน 2551]

เกี่ยวกับ

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

เขียนใน AJAX

ใส่ความเห็น

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: