จัดการข้อมูลใน 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/CRUDthedatainGridViewwithLINQandAJAX|_source|_code.zip


 

บทนำ

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

คอนโทรล GridView เป็นคอนโทรลที่ถูกบรรจุใน ASP.Net 2.0 (มาพร้อมกับ VS2005) เรียกได้ว่ามาแทนที่คอนโทรล DataGrid (ใน VS2003) ซึ่งการแทนที่ดังกล่าว เป็นการเพิ่มคุณสมบัติใหม่ต่างๆ ให้เหล่านักพัฒนาได้เลือกใช้งาน เพื่อทำงานกับชุดของข้อมูลดาต้าเบสเรกคอร์ด ได้อย่างง่ายขึ้น

คอนโทรล GridView ช่วยให้นักพัฒนาเว็บแอพพลิเคชันด้วย ASP.Net สามารถทำงานกับข้อมูลต่างๆ ได้โดยแม้มิต้องเขียนโค้ดใดๆ เลยเช่น:

  • แสดงผลชุดข้อมูล
  • จัดเรียงชุดข้อมูล
  • จัดเพจชุดข้อมูล
  • แก้ไขชุดข้อมูลเรกคอร์ด
  • ลบชุดข้อมูลเรกคอร์ด

นอกจากนั้น GridView ยังช่วยให้นักพัฒนาสามารถจัดเรียง และจัดเพจได้โดยไม่มีการแจ้งกลับ (PostBack) ไปยังเซอร์ฟเวอร์ ทำให้การทำงานกับข้อมูลดูราบรื่นขึ้นในแง่ของความรู้สึกของผู้ใช้งาน

CRUD the data in GridView คืออะไร ???

CRUD the data in GridView นั้นมันคืออะไร? ท่านผู้อ่านคงรู้จักกันดีอยู่แล้ว หรืออย่างน้อยที่สุดท่านผู้อ่านคงเห็นจากชื่อภาษาไทยของบทความนี้แล้ว ผู้เขียนขอขยายความเพิ่มเติม CRUD เกิดจากสิ่งร้าวที่เหล่านักพัฒนาใช้กันบ่อยๆ ดังนี้

  • C = Create อันได้แก่การสร้างชุดข้อมูลเรกคอร์ดใหม่เข้าไปในดาต้าเบส
  • R = Read อันได้แก่การอ่านชุดข้อมูลจากดาต้าเบส
  • U = Update อันได้แก่การแก้ไขชุดข้อมูลเรกคอร์ดในดาต้าเบส
  • D = Delete อันได้แก่การลบชุดข้อมูลเรกคอร์ดในดาต้าเบส

จากคำขยายความดังกล่าวจึงเทียบเคียงได้ว่า CRUD the data in GridView คือการ สร้าง อ่าน แก้ไข ลบ ข้อมูลใน GridView และการสร้าง อ่าน แก้ไข และลบข้อมูลใน GridView จึงเป็นที่มาของการเล่าความเป็นบทความสู่ท่านผู้อ่าน ซึ่งกำลังดำเนินการขึ้นในลำดับต่อไป:

 

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

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

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

 

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

คุณสมบัติเด่นของคอนโทรล GridView นักพัฒนาสามารถใช้มันทำงานกับข้อมูล กล่าวคือการการแก้ไขข้อมูล และการลบข้อมูล สามารถกระทำได้โดยไม่มีการใส่โค้ดแต่อย่างใด เพียงแค่เราทำการเปิดการทำงาน (Enable) ของมัน แต่มันยังไม่มีสนับสนุน (Support) การสร้างข้อมูลใหม่ (Insert new Data) เรามาทำการเพิ่มความสามารถให้คอนโทรล GridView ให้สามารถสร้างข้อมูลใหม่ โดยลำดับมีขั้นตอนมีหกขั้นตอนดังต่อไปนี้:

  • ขั้นตอนที่ หนึ่ง: สร้างโปรเจ็กต์
  • ขั้นตอนที่ สอง: สร้างฐานข้อมูลตัวอย่าง SQL 2005 EXPRESS บน VS2008
  • ขั้นตอนที่ สาม: สร้าง LINQ
  • ขั้นตอนที่ สี่: ตั้งค่า DataSource ให้คอนโทรล GridView
  • ขั้นตอนที่ ห้า: ปรับคุณสมบัติของคอนโทรล GridView
  • ขั้นตอนที่ หก: ใช้งาน AJAX UpdatePanel และ ConfirmButton Extender

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

แน่นอนว่าเราต้องอาศัยเครื่องมือมีระดับอย่าง VS2008 ในการพัฒนาแอพพลิเคชัน CRUD the data in GridView with LINQ and AJAX ให้ท่านผู้อ่านทำการหยิบเครื่องมือดังกล่าวขึ้นมา ถึงเวลานำมาใช้งานกันแล้ว

เรามาทำการสร้างโปรเจ็กต์ โดยคลิกเมาส์บนเมนู File=>NewProject จะได้หน้าต่าง New Project ให้เลือกไปที่ Visual C# เนื่องจากบทความนี้เราใส่โค้ดเป็น C# จากนั้นคลิกเมาส์ลงบน Web เพราะเราจะพัฒนาแอพพลิเคชันเป็น ASP.NET จากนั้นในช่อง Templates: ให้เลือกรูปแบบ

โปรเจ็กต์เป็น ASP.NET AJAX Futures WebApplication เนื่องจากเรามีการใช้งาน AJAX ด้วย เพื่อเพิ่มความราบรื่นในการใช้งาน

เป้าประสงค์ของแอพพลิเคชัน CRUD the data in GridView with LINQ and AJAX หน้าจอใช้งานจะออกมาเป็นเหมือนดังที่ผู้เขียนได้บันทึกเป็นภาพเรียบร้อยแล้ว ดังรูปที่ 1:

 

1

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

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

  • C = Create
    • เทียบเคียงได้กับ ปุ่มรูปภาพกลมสีเขียวมีเครื่องหมายถูก เป็นปุ่มสำหรับกด เพื่อส่งข้อมูลจาก TextBox บน GridView ไปบันทึกเป็นเรกคอร์ดใหม่ลงในฐานข้อมูล
  • U = Update
    • เทียบเคียงได้กับ ปุ่มรูปภาพสี่เหลี่ยมมีเครื่องถูก เมื่อใช้เมาส์คลิก จะเป็นการแก้ไขข้อมูลในเรกคอร์ดนั้นๆ ลงไปในฐานข้อมูล
  • D = Delete
    • เทียบเคียงได้กับ ปุ่มรูปภาพกลมสีแดงมีเครื่องหมายกากบาท เมื่อใช้เมาส์คลิกลงไปจะเป็นการลบข้อมูลในเรกคอร์ดดังกล่าว

 

ขั้นตอนที่ สอง: สร้างฐานข้อมูลตัวอย่าง SQL 2005 EXPRESS บน VS2008

เพื่อเป็นการง่ายต่อการเล่าความของผู้เขียน และง่ายต่อการทำความเข้าใจของท่านผู้อ่าน ผู้เขียนขอสร้างฐานข้อมูลตัวอย่างง่ายๆ ขึ้นมาเพื่อประกอบการเล่าความดังกล่าว รวมถึงท่านผู้อ่านจะได้เรียนรู้ถึงวิธีการใช้งานฐานข้อมูลของ SQL 2005 EXPRESS ผ่านเครื่องมือมีระดับ อย่าง VS2008

ในหน้าต่าง Solution Explorer คลิกขวาบนโปรเจ็กต์ของเราแล้วเลื่อนเมาส์ไปเลือกเมนู Add New Item… จากนั้นทำตามขั้นตอนที่ผู้เขียนได้บันทึกเป็นภาพเรียบร้อยแล้วแสดงดังรูปที่ 2:

 

2

รูปที่ 2 ขั้นตอนการสร้างฐานข้อมูลบน VS2008

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

หมายเลข 1:

  • Add new item เป็น SQL Server Database เป้าประสงค์ของเราคือใช้ VS2008 ในการสร้างฐานข้อมูล

หมายเลข 2:

  • ให้ตั้งชื่อฐานข้อมูล Database.mdf ในหน้าต่าง Solution Explorer คลิกเมาส์ลงบนโฟลเดอร์ App_Data จากนั้นคลิก Database.mdf รอชั่วขณะ VS2008 จะนำเราเข้าสู่หน้าต่าง SQL Server Database ให้คลิกเมาส์ลงบน และTables ตามลำดับจากนั้น คลิกขวาบน Tables และเลื่อนเมาส์ไปเลือกเมนู Add New Table เพื่อเป็นการสร้างตารางใหม่ ในขั้นตอนที่สองนี้เมื่อเราสร้างฐานข้อมูลให้เรียบร้อยแล้ว ในเบื้องหลังของ VS2008 จะเจนเนอเรต คอนเนคชันสตริง (ConnectionString) ใน Web.config ให้ ดังนี้:

คอนเนคชันสตริง (ConnectionString) ในไฟล์ Web.config

<connectionStrings>

<add name="DatabaseConnectionString"

connectionString="Data Source=.SQLEXPRESS;AttachDbFilename=|DataDirectory|Database.mdf;Integrated Security=True;User Instance=True" providerName="System.Data.SqlClient"/>

</connectionStrings>

หมายเลข 3:

  • ให้สร้างฟิลด์และกำหนดประเภทของข้อมูลต่างๆ เป็นดังตรารงที่ 1:

ตารางที่ 1: ฟิลด์ของตาราง Employee

Column Name (ชื่อ ฟิลด์)

DataType(ประเภทข้อมูล)

Allow Nulls (ยอมให้เป็นค่า null)

Primary Key

EMP_ID

int

 

PK

FirstName

nvarchar(50)

null

 

LastName

nvarchar(50)

null

 

EMail

nvarchar(50)

null

 

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

ตารางที่ 2: ตั้งค่าให้ฟิลด์ EMP_ID เพิ่มค่าอัตโนมัติ

Identity Specification

ชื่อ

ค่า

ความหมาย

(Is Identity)

Yes

Yes = เพิ่มค่าอัตโนมัติ, No = ตามการป้อนของผู้ใช้งาน

Identity Increment

1

เพิ่มค่าครั้งละ 1

Identity Speed

1000

เริ่มเพิ่มค่าที่ 1000

หมายเลข 4:

  • บันทึกชื่อตารางเป็น Employee

การสร้างฐานข้อมูลโดยใช้ VS2008 เป็นอันเสร็จเรียบร้อยครับ ต่อไปจะก้าวสู่ขั้นตอนการสร้าง LINQ เพื่อดึงฐานข้อมูลดังกล่าวไปใช้งานต่อไป

 

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

ในหน้าต่าง Solution Explorer คลิกขวาบนโปรเจ็กต์ของเราแล้วเลื่อนเมาส์ไปเลือกเมนู Add New Item… เลือก Templates: เป็น LINQ to SQL Class ดังที่ผู้เขียนได้บันทึกเป็นภาพไว้เรียบร้อยแล้วในภาพที่ 3:

 

3

รูปที่ 3 สร้าง LINQ

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

หมายเลข 1:

  • เลือก Templates: เป็น LINQ to SQL Class

หมายเลข 2:

  • ตั้งชื่อ dbml (Data base modeling) เป็นชื่อ DataClasses.dbml

หมายเลข 3:

  • ใช้เมาส์คลิกบน ตารางEmployee แล้วลากไปวางบนพื้นที่ออกแบบของ dbml

หมายเลข 4:

  • วางตาราง Employee บนพื้นที่ออกแบบของ dbml

จากนั้นกดปุ่มไอคอน Build Web Site บนเมนูบาร์ของ VS2008 หนึ่งครั้งเพื่อบันทึก DataClasses.dbml และ Build โปรเจ็กต์เพื่อให้ VS2008 แมปปิ้ง(mapping) ตาราง Employee เป็นออบเจ็กต์ Employee ขั้นตอนการสร้าง LINQ เป็นอันเรียบร้อยครับ

 

ขั้นตอนที่ สี่: ตั้งค่า Data Source ให้คอนโทรล GridView

ให้เราทำการเปิดเพจดีดีฟอลต์(Default.aspx) แล้วทำการเพิ่มคอนโทรล GridView โดยในโปรเจ็กต์ของเราให้ทำการคลิกคอนโทรล GridView บนทูลบอกซ์(ToolBox) แล้วลากมาวางบนเพจ Default.aspx จากนั้นให้ปรับฟอร์แมต GridView ได้ตามใจต้องการของผู้อ่าน โดยคลิกเมาส์ลงบน GridView มุมบนขวาสุดตรงเครื่องหมาย > (GridView Tasks) แล้วเลือกเมนู Auto Format…

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

 

4

รูปที่ 4 ตั้งค่า Data Source ให้คอนโทรล GridView

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

หมายเลข 1:

  • คลิกเมาส์บนเครื่องหมาย > (มุมขวาบนของคอนโทรล GridView)
  • คลิกเมาส์ลง ดรอปดาวน์ลิสต์ตรง Shoose Data Source: เลือก <New data source…>

หมายเลข 2:

  • เลือกประเภทดาต้าซอร์สเป็น LINQ
  • ตั้งชื่อดาต้าซอร์สเป็น LinqDataSource1

หมายเลข 3:

  • เลือกตาราง Employee และตรง Select ให้คลิกเมาส์เลือกตรง * เพื่อเป็นการเลือกทุกฟิลด์

หมายเลข 4:

  • คลิกเมาส์บนปุ่ม Advancedจะได้หน้าต่าง Advanced Options ให้ติกเลือกทั้งหมด เพื่อให้คอนโทรล GridView สามารถทำการลบ, เพิ่ม, และแก้ไขข้อมูลได้ตามเป้าประสงค์ของเรา

มาถึงตรงนี้ขั้นตอนตั้งค่า Data Source ให้คอนโทรล GridView เป็นอันสำเร็จเรียบร้อยแล้ว ขั้นตอนต่อไปจะเข้าสู่ ขั้นตอนการปรับคุณสมบัติของคอนโทรล GridView

 

ขั้นตอนที่ ห้า: ปรับคุณสมบัติของคอนโทรล GridView

ในขั้นตอนที่ห้านี้ เราจะมาทำการปรับคุณสมบัติของคอนโทรล GridView ให้แสดงปุ่ม เพิ่ม, แก้ไข และลบข้อมูล ให้เราสามารถทำงานกับข้อมูลผ่านคอนโทรล GridView ได้ ขั้นตอนต่างๆ แสดงดังที่ผู้เขียนได้บันทึกเป็นภาพเรียบร้อยแล้วในรูปที่ 5:

 

5

รูปที่ 5 การปรับคุณสมบัติของคอนโทรล GridView

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

หมายเลข 1:

  • คลิกเมาส์บนเครื่องหมาย > ของคอนโทรล GridView

หมายเลข 2:

  • คลิกเมาส์เลือก Enable Page, Enable Edite และ Enable Delete

หมายเลข 3:

  • คลิกเมาส์บนเมนู Edit Columns…

หมายเลข 4:

  • นอกจากฟิลด์ที่เราได้จากดาต้าซอร์สแล้วท่านผู้อ่านจะเห็นว่ามีฟิลด์ CommandField เพิ่มมาอีกหนึ่งฟิลด์ ซึ่งได้จากหมายเลข 2: เมื่อคลิกเลือก Enable Edite และ Enable Delete ซึ่งฟิลด์ดังกล่าวเป็นปมเด่นของคอนโทรล GridView มาช่วยให้นักพัฒนาสามารถทำงานกับข้อมูลได้โดยไม่จำเป็นต้องใส่โค้ดใดๆ เพียงคลิกเลือก Enable Edite และ Enable Delete ดังกล่าว

หมายเลข 5:

  • ให้เราทำการคอนเวิร์ตฟิลด์ทั้งหมดในหมายเลข 4 เป็นเทมเพลตฟิลด์ (TemplateField) โดยเลือกบนฟิลด์ในหมายเลข 4 แล้วคลิกบนเมนู Convert this field into a TemplateField ในหมายเลข 5

หมายเลข 6 และ 7:

  • เป็นการปรับเปลี่ยนป้ายชื่อบนคอลัมน์ของคอนโทรล GridView ให้เข้าใจได้ง่ายขึ้น ดังนี้

ตารางที่ 3: การเปลี่ยนป้ายชื่อบนคอลัมน์ของคอนโทรล GridView

Table3

หมายเลข 8:

  • แล้วเป้าประสงค์ของผลการกระทำดังกล่าวของเรา จะได้ดังหมายเลข 8

จากการปรับคุณสมบัติของคอนโทรล GridView ในรูปที่ 5 ท่านผู้อ่านได้รับทราบไปแล้วว่าเราได้ทำการคอนเวิร์ตฟิลด์ของคอนโทรล GridView เป็นเทมเพลตฟิลด์ไปแล้วนั้น ขั้นตอนต่อจากนี้เราจะมาทำการเข้าไปปรับเทมเพลตฟิลด์ในคอนโทรล GridView ขั้นตอนการปรับเทมเพลตฟิลด์ ผู้เขียนได้ทำการบันทึกเป็นภาพเรียบร้อยแล้วแสดงดังรูปที่ 6: และรูปที่ 7: เราไปดูการปรับเทมเพลตในคอลัมน์แรก (Column[0]) ของคอนโทรล GridView ก่อนครับซึ่งเป็นเทมเพลตที่คอนเวิร์ตจาก CommandField ซึ่งกล่าวคือมันเป็นคอลัมน์ที่เก็บปุ่ม เพิ่ม, แก้ไข และลบข้อมูลบนคอนโทรลของ GridView นั่นเอง ซึ่งแท้จริงแล้วคอนโทรลดังกล่าวเป็น LinkButton แต่เราจะไม่ใช้ของเดิมให้เราทำการลบคอนโทรลดังกล่าวออกแล้วทำการเพิ่ม ImageButton ลงไปแทนเพื่อการใส่รูปภาพแทนปุ่มที่มีตัวอักษรธรรมดา เพื่อเป็นการให้หน้าตาแอพพลิเคชันของเราน่าใช้งานยิ่งขึ้น ไปดูขั้นตอน การปรับเทมเพลตในคอลัมน์แรก กันเลยครับ:

 

6

รูปที่ 6 ขั้นตอนการปรับเทมเพลตของคอนโทรล GridView ในคอลัมน์แรก (Column[0])

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

หมายเลข 1:

  • คลิกเมาส์บนมุมขวาของ GridView ตรงเครื่องหมาย > จากนั้นเลื่อนเมาส์ลงมาคลิกเมนู Edit Temoaltes

หมายเลข 2:

  • ท่านผู้อ่านได้เข้าสู่หน้าจอการปรับเทมเพลตของ GridView แล้ว ตรงหน้าต่าง GridView Tasks Tempalte Editing Mode ช่อง Display ให้คลิกเมาส์เลือกไปที่ Column[0] เพื่อให้แสดงเทมเพลตทั้งหมดของคอลัมน์ศูนย์ (Column[0])

หมายเลข 3:

  • GridView – Column[0] มีเทมเพลตทั้งหมดดังนี้

ตารางที่ 4: เทมเพลตของคอนโทรล GridView

Table4

หมายเลข 4, 5 และ 6:

  • ใช้เมาส์คลิกบนคอนโทรล ImageButton ในหมายเลข 4 แล้วลากไปวางบนเทมเพลตในหมายเลข 5 โดยในเทมเพลต ItemTempalte และ EditItemTemplate วางคอนโทรล ImageButton อย่างละสองอัน ในเทมเพลต FooterTemplate วางคอนโทรล ImageButton หนึ่งอัน
  • ในหมายเลข 6 ให้ปรับพรอเพอร์ตี้ของ คอนโทรล ImageButton ต่างๆ ดังนี้:

ตารางที่ 5: ItemTempalte                           ตารางที่ 6: EditItemTemplate

Table5      Table6

 

ตารางที่ 7: FooterTemplate

Table7  

#หมายเหตุ:

พรอเพอร์ตี้ ImageUrl ของคอนโทรล ImageButton จะเห็นว่ามันชี้แหล่งข้อมูลรูปภาพจาก โฟลเดอร์ชื่อ Image (~/Image/*.gif) ซึ่งมันเกิดขึ้นมาจากที่เราสร้างขึ้นโดย คลิกขวาบนโปรเจ็กต์ แล้วเลือกเมนู New Folder จากนั้นตั้งชื่อเป็น Image แล้ว Copy รูปภาพที่ต้องการไปวางไว้ภายใน

ขั้นตอนการปรับเทมเพลตของคอนโทรล GridView ในคอลัมน์แรก เป็นอันเรียบร้อย ขั้นตอนต่อไปเราจะเข้าสู่การปรับเทมเพลตในคอลัมน์ รหัส, ชื่อ, นามสกุลm และ E-Mail ดังรูปที่ 7 ครับ

 

7

รูปที่ 7 การปรับเทมเพลตในคอลัมน์ รหัส, ชื่อ, นามสกุลm และ E-Mail

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

คลิกเมาส์บนคอนโทรล TextBox แล้วลากไปวางบน FooterTemplate หนึ่งอัน ในหมายเลข 2 และ บน EmptyDataTempalte สามอันในหมายเลข 3 ซึ่งเทมเพลต EmptyDataTempalte มันจะแสดงเทมเพลตนี้เมื่อ ดาต้าซอร์สไม่มีข้อมูลส่งคอนโทรล GridView แสดง เราจึงอาศัยเทมเพลต ในการใส่ TextBox ไปสามอันเพื่อให้ผู้ใช้งานสามารถเพิ่มข้อมูลใหม่ผ่านช่องทางนี้

เมื่อใดก็ตามที่ดาต้าซอร์สมีข้อมูลอย่างน้อยหนึ่งเรกคอร์ต ส่งให้คอนโทรล GridView แสดงแล้ว เทมเพลต EmptyDataTempalte จะไม่ถูกแสดงอีก ฉะนั้นเราจึงอาศัยเทมเพลต FooterTemplate ในการวาง TextBox ให้เราสามารถทำการเพิ่มข้อมูลใหม่ผ่านทาง GridView และจุดนี้จะเป็นจุดสำคัญของบทความนี้ ให้ท่านผู้อ่านสังเกตในหมายเลข 2 อีกครั้งจะเห็นว่าในแต่ละคอลัมน์ของ คอลัมน์ รหัส, ชื่อ, นามสกุลm และ E-Mail เราจะวาง TextBox ช่องละหนึ่งอัน เพื่อเป็นการรอรับการกรอกข้อมูลผ่านทางTextbox ตามคอลัมน์ของมันนั่นเอง เรามาทำการปรับพรอเพอร์ตี้ ID ของ TextBox ในคอลัมน์ต่างๆ ดังนี้:

ตารางที่ 8: การปรับพรอเพอร์ตี้ ID ของ TextBox ในคอลัมน์ต่างๆ 

Table8 

เมื่อเราปรับพรอเพอร์ตี้ของ TextBox เรียบร้อยให้คลิกมุนบนของ GridView บนเครื่องหมาย > ในหน้าต่าง GridView Tasks ให้เลื่อนเมาส์ลงมาคลิกเมนู End Template Editing เป็นการปิดโหมดในการแก้ไขเทมเพลตของ GridView จะเข้าสู่โหมดปกติของ GridView แล้วจะได้ของ GridView แสดงดังรูปที่ 7: ในหมายเลข 4:

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

เนื่องจากในโค้ดมีการใช้เครื่องหมาย: ?? ซึ่งภาษาโปรแกรมมิ่งเรียกว่า null coalescing operator ซึ่งเป็นสิ่งที่เพิ่มมาใน C# 2.0 เพื่อช่วยให้การใส่โค้ดโปรแกรมนั้นสั้นลง ผู้เขียนขอแจงประกอบการเล่าความดังนี้:

?? null coalescing operator

string x = "",y = null, z = "Z";
     
//โค้ดที่ใช้ ?? null coalescing operator
x = y ?? z; //หมายถึง ถ้าค่า y เป็น null ให้เอาค่า z แต่ถ้าค่า y ไม่เป็น null ให้เอาค่า y นั่นเอง


//ซึ่งมีความหมายเดียวกับโค้ดรูปแบบทั่วไป ดังนี้:
//โค้ดรูปแบบทั่วไปที่เรารู้จักกันดี 
if (y != null)
x = y;
else 
x = z;

 

เราจะเห็นว่าการใช้ ?? null coalescing operator ช่วยให้รูปแบบการขียนโค้ดสั้น และสวยงามกันมาก

โค้ดสมบูรณ์

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    //==============================================================//
    //เมธอด adNewData() เป็นการเพิ่มข้อมูลใหม่เข้าไปในฐานข้อมูลผ่านคอนโทรล GridView//
    //==============================================================//
    private void adNewData()
    {
        //ประกาศตัวแปรประเภท TextBox แล้วค้นหาคอนโทรล TextBox ใน GridView ไปใส่ใว้ในตัวแปรที่ได้ประกาศไว้
        //GridView1.Controls[0].Controls[0].FindControl: หมายถึงค้นหาคอนโทรลใน EmptyDataTemplate
        //GridView1.FooterRow.FindControl: หมายถึง ค้นหาคอนโทรลใน FooterTemplate

        //ชื่อ====================================================//
        //ถ้าคอนโทรล txtFNameEmpty คือคอนโทรลใน EmptyDataTemplate ไม่มี กล่าวคือ เป็น null 
        //ให้ไปหาในคอนโทรล txtFNameNew ใน FooterTemplate แทน แล้วแปลงเป็น TextBox
        TextBox txtFName = GridView1.Controls[0].Controls[0].FindControl("txtFNameEmpty") as TextBox ??
            GridView1.FooterRow.FindControl("txtFNameNew") as TextBox;

        //นามสกุล=================================================//
        //ถ้าคอนโทรล txtLNameEmpty คือคอนโทรลใน EmptyDataTemplate ไม่มี กล่าวคือ เป็น null 
        //ให้ไปหาในคอนโทรล txtLNameNew ใน FooterTemplate แทน แล้วแปลงเป็น TextBox
        TextBox txtLName = GridView1.Controls[0].Controls[0].FindControl("txtLNameEmpty") as TextBox ??
           GridView1.FooterRow.FindControl("txtLNameNew") as TextBox;

        //E-Mail==================================================//
        //ถ้าคอนโทรล txtEmailEmpty คือคอนโทรลใน EmptyDataTemplate ไม่มี กล่าวคือ เป็น null 
        //ให้ไปหาในคอนโทรล txtEmailNew ใน FooterTemplate แทน แล้วแปลงเป็น TextBox
        TextBox txtEMail = GridView1.Controls[0].Controls[0].FindControl("txtEmailEmpty") as TextBox ??
           GridView1.FooterRow.FindControl("txtEmailNew") as TextBox;

        //ประกาศ DataContext LINQ ที่เราสร้างไว้แล้ว============================//
        using (DataClassesDataContext db = new DataClassesDataContext())
        {
            //สร้างอ็อบเจ็กต์ใหม่ Employee แล้วกำหนดค่าจาก TextBox ด้านบนที่เราค้นหาได้จาก GridView1
            Employee emp = new Employee()
            {
                FirstName = txtFName.Text,//ชื่อ
                LastName = txtLName.Text,//นามสกุล
                EMail = txtEMail.Text//E-Mail
            };

            //ใส่ค่าอ็อบเจ็กต์ใหม่ของ Employee บน LINQ (memory)
            db.Employees.InsertOnSubmit(emp);
            //บันทึกข้อมูลลงบนฐานข้อมูล
            db.SubmitChanges();
        }

        //สั่งให้ GridView1 โหลดข้อมูลใหม่อีกครั้ง 
        GridView1.DataBind();
    }

    //เมื่อคลิกปุ่ม ImageButton ใน FooterTemplate
    protected void ImageBtupdate_Click(object sender, ImageClickEventArgs e)
    {
        adNewData();
    }

    //เมื่อคลิกปุ่ม ImageButton ใน EmptyDataTemplate
    protected void ImageBtupdateEmpty_Click(object sender, ImageClickEventArgs e)
    {
        adNewData();
    }
}
 

 

ทดสอบแอพพลิเคชัน

เมื่อเราใส่โค้ดสมบูรณ์เรียบร้อยแล้ว ก็มาถึงขั้นตอนทดสอบแอพพลิเคชันแล้ว ให้กด F5 เพื่อรัน(RUN) แอพพลิเคชัน หน้าตาและผลสำเร็จจะได้ตามรูปที่เขียนได้บันทึกไว้ในรูปที่ 8:

 

8

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

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

หมายเลข 1 และ 2:

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

หมายเลข 3:

  • GridView จะแสดงข้อมูลที่เราบันทึกไปเมื่อสักครู่ ทันที เนื่องจากเราใส่โค้ด GridView1.DataBind(); ไว้ในท้ายสุดของ เมธอด adNewData()

หมายเลข 4:

  • ในหมายเลข 4 จะเห็นว่ามี TexBox ขึ้นมารอการกรอกข้อมูลตามคอลัมน์ต่างๆ เนื่องจาก เราได้เพิ่มคอนโทรล TextBox ลงไปในเทมเพลต ของ FooterTemplate นั่นเอง ซึ่งจุดนี้ทำให้เราสามารถเพิ่มข้อมูลใหม่ได้เรื่อยๆ ไม่สิ้นสุดตามที่เราต้องการ

ตอนนี้คอนโทรล GridView ของเราสามารถทำการ สร้าง อ่าน แก้ไข ลบ ข้อมูลด้วย LINQ เรียบร้อยแล้ว สามารถนำไปใช้ทำงานกับข้อมูลได้ แต่เพื่อให้การใช้งานเป็นไปด้วยความราบรื่น และหรูหรา เราจึงทำการเสริมแต่งด้วย AJAX ดังสุภาษิตที่ว่าไก่งามเพราะขน คนงามเพราะแต่ง ฉันได เว็บแอพพลิเคชันของเรา งาม และหรูหราได้ด้วย AJAX ก็ฉันนั้น (รู้สึกมันเข้ากันได้นะครับ)

 

ขั้นตอนที่ หก: ใช้งาน AJAX UpdatePanel และ ConfirmButton Extender

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

 

9

รูปที่ 9 ขั้นตอนการปรับแต่งแอพพลิเคชันด้วย AJAX

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

หมายเลข 1 และ 2:

  • ให้เข้าโหมด Source View แล้วทำการลากคอนโทรล UpdatePanel จากหมายเลข 1 ไปวางใต้ ScriptManager ในหมายเลข 2
  • จากนั้นให้กลับไปเข้าโหมด Design แล้วทำการคลิกเมาส์ลงบน GridView แล้วลาก GridView ไปวางภายใน UpdatePanel

หมายเลข 3 และ 4:

  • ให้เข้าโหมด EditTemplates โดยคลิกบนเครื่องหมาย > บน GridView แล้วคลิกที่เมนู EditTemplates จากนั้นเข้าไปที่คอมลัมน์แรก (Column[0]) เราจะทำการเพิ่มคำยืนยันการลบข้อมูลให้กับปุ่มลบข้อมูล โดยคลิกลงบนปุ่มลบข้อมูล (รูปกากบาทสีแดง) แล้วคลิกตรงเครื่องหมาย > เลื่อนเมาส์มาเลือกเมนู Add Extender จากนั้นในหน้าต่าง Extender Wizard ให้เลือก ConfirmButtonExtener ในหมายเลข 4

หมายเลข 5:

  • เข้าไปปรับพรอเพอร์ตี้ของปุ่มลบข้อมูล เข้าไปที่ ImageButton2_ComfirmButtonExtender ให้ใส่ ComfirmText="คุณต้องการลบข้อมูลใช่หรือไม่ ???"
  • จากนั้นทำการทดสอบแอพพลิเคชัน แล้วท่านผู้อ่านลองทำการกดปุ่มลบข้อมูล จะมีข้อความเตือนขึ้นให้ยืนยันการลบข้อมูล ถ้ากด OK ข้อมูลเรกคอร์ดนั้นจะโดนลบออกจากฐานข้อมูล

เมื่อเราได้ทำการแต่งแอพพลิเคชันของเราด้วย AJAX แล้วมาทำการทำสอบรันแอพพลิเคชันอีกครั้งโดยกด F5 แล้วลองทำการแก้ไข ลบ และเพิ่มข้อมูล จากนั้นดูความแตกต่างเมื่อก่อนที่แอพพลิเคชันของเรายังไม่ได้รับการเสริมแต่งด้วย AJAX

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

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

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

 

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

เราจึงได้ทำการเสริมข้อด้อยของ GridView ด้วยการใส่โค้ดให้มันสามารถเพิ่มข้อมูลใหม่ได้ด้วย LINQ และเติมแต่งให้ทำงานราบรื่นด้วย AJAX

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

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

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

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

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

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

เขียนใน 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: