การติดตั้ง และใช้งาน Online Control (XmlEditGrid)

ขั้นตอนในการติดตั้ง

• เปิดโปรแกรม ASP.NET Web Matrix แล้วทำการเลือก Template แบบ (General)
• เลือก Project แบบ ASP.NET Page
• ทำการเลือกตำแหน่ง ที่ต้องการ บันทึกไฟล์ จากหัวข้อ Location
• กำหนดชื่อไฟล์ที่ต้องการ (ในที่นี้ใช้เป็น OnlineControl.phpx)
• เลือกภาษา (Language) เป็น Visual Basic .NET
• คลิกปุ่ม OK

• ไปที่ Toolbox เลือก Custom Controls
• ทำการคลิกเมาส์ขวา ในพื้นที่ของ Custom Controls แล้วคลิกขวา เลือกที่ Add Online Toolbox Components จาก pop-up menu จะปรากฏหน้าต่าง ดังรูป

• จะปรากฏหน้าต่าง ที่จะแสดง Online Controls แบ่งตามหัวข้อ
• ให้ทำการเลือก Data and XML Control จากหัวข้อ Categories (คุณสามารถค้นหา Control อื่นๆ ได้จากหัวข้อต่างๆ ที่มีการจัดไว้ให้)
• คลิกเลือก XMLEditGrid จากหัวข้อ Name

• คลิกปุ่ม Install
• ที่หน้าต่างของ Security Warning คลิก Yes เพื่อยืนยัน

• ที่หน้าต่างการยืนยันการติดตั้ง ลงใน GAC (Global Assembly Cache) ให้คลิกปุ่ม Yes

• จะปรากฏ Control ที่ชื่อ XmlEditGrid ในกลุ่มของ Custom Controls

• จะปรากฏ Control ที่ชื่อ XmlEditGrid ในกลุ่มของ Custom Controls

ขั้นตอนในการใช้งาน

• ทำการ ลาก-วาง XmlEditGrid ที่อยู่ในกลุ่ม Custom Controls

• ทำการสร้างไฟล์ XML โดยเลือกที่ เมนู File->New File ที่หน้าต่าง ให้ทำการเลือกสร้าง XML File โดยเลือก Template แบบ (General)
• กำหนด FileName เป็น xmlFile.xml แล้วคลิกปุ่ม OK

• คัดลอกโค้ดต่อไปนี้ แล้วทำการบันทึก โดยเลือกที่ เมนู File->Save File

<?xml version="1.0" standalone="yes"?>
<Persons xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
 <Person>
  <Name>Suppakit</Name>
  <Surname>Thongdee</Surname>
  <Age>26</Age>
 </Person>
 <Person>
  <Name>Pitsanu</Name>
  <Surname>Thongdee</Surname>
  <Age>25</Age>
 </Person>
 <Person>
  <Name>Aumaporn</Name>
  <Surname>Thongdee</Surname>
  <Age>12</Age>
 </Person>
</Persons>

• ทำการปิดหน้าต่างแก้ไข File XML
• ที่หน้าต่าง Design ให้ทำการคลิกเลือกที่ Control XmlEditGrid
• ทำการแก้ไข Property ของ XmlEditGrid จากหน้าต่าง Property กำหนด XmlFile เป็น xmlFile.xml
• คลิกที่ ปุ่ม (ตัวอักษรลิงค์) Auto Format... จะปรากฏหน้าต่าง ให้ทำการเลือกรูปแบบที่ต้องการ แล้วคลิก OK

• ทำการ บันทึก และ Run โดยกดปุ่ม F5 หรือคลิกเลือก เมนู View->Start จะปรากฏหน้าต่าง IE แสดงผลการทำงาน

• จะสังเกตุได้ว่า เราสามารถแก้ไข ลบ และเพิ่มเติม ข้อมูลเข้าไปได้