Dreamwaver MX และ ASP.NET (6)

ผู้เขียน：Eve Cole เวลาอัปเดต：2009-05-31 21:06:05

6. สร้างหน้าแก้ไขบันทึก

บทนำที่เกี่ยวข้อง (หมายเหตุ: ในการแสดงโค้ด รหัสต่อไปนี้ทั้งหมดจะมีช่องว่างหลัง "<" และก่อนหน้า ">" ขออภัยในความไม่สะดวก!):

การเพิ่ม การแก้ไข และการลบข้อมูลเป็นการดำเนินการพื้นฐานสามประการในฐานข้อมูล ในส่วนนี้จะแนะนำส่วนบันทึกการแก้ไข

ขั้นตอนที่ 1 กระบวนการปรับเปลี่ยนการออกแบบ

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

ขั้นแรก สร้างหน้าแบบสอบถาม ในกระบวนการสร้างชุดข้อมูลเราสามารถเลือกข้อมูลที่ต้องการผ่านตัวกรองข้อมูล Filter เนื่องจากเราจะคลิกลิงก์ในรายการข้อมูลเพื่อเข้าถึงหน้านี้ เลือกพารามิเตอร์ URL และใช้คำหลัก CODE เพื่อกรองหน้าที่ต้องการออก

[รูปที่ 6-1 การกรองข้อมูล]

เมื่อต้องการทำเช่นนี้ ให้สร้างไฟล์ modified.aspx ใหม่ในไซต์ และเพิ่มชุดข้อมูลดังที่แสดงด้านบน

ขั้นตอนที่ 2 สร้างหน้ารายละเอียด

ในการสร้างลิงค์ ควรสร้างหน้าการนำทางก่อน หน้า DataGrid ที่สร้างขึ้นในส่วนที่ 3 สามารถแก้ไขได้เพื่อให้บรรลุผลการนำทางดังกล่าว รูปแบบของ DataGrid ได้รับการแก้ไข และรายการข้อมูลยังสามารถตั้งค่าให้แสดงข้อความที่เชื่อมโยงได้ ฟังก์ชั่นเดียวกันนี้สามารถทำได้ใน DataList และ Repeater ซึ่งทั้งสองอย่างนี้ตั้งค่าไฮเปอร์ลิงก์ไปยังหน้ารายละเอียด

เปิดไฟล์ location2.aspx ดั้งเดิม และปรับเปลี่ยนลักษณะ DataList ดั้งเดิม เลือก DataListm และคลิก แก้ไขคอลัมน์ (รูปที่ 6-2) ในกล่องโต้ตอบการออกแบบสไตล์ DataGrid แบบป๊อปอัป (รูปที่ 6-3) คุณสามารถตั้งค่าประเภทของ Location_name เป็น Hyperlink เลือก Location_name แล้วคลิกปุ่มเปลี่ยนประเภทคอลัมน์เพื่อเปลี่ยนเป็นไฮเปอร์ลิงก์

[รูปที่ 6-2 แก้ไขคอลัมน์...]

[รูปที่ 6-3 การตั้งค่าไฮเปอร์ลิงก์]
การตั้งค่าไฮเปอร์ลิงก์มีดังต่อไปนี้:

[ภาพที่ 6-4 การตั้งค่าคำสำคัญลิงค์]

ฟิลด์ข้อมูลที่แสดง Location_name คำสำคัญในการเชื่อมต่อคือรหัส และเพจที่ต้องข้ามไปคือเพจ modified.aspx หลังจากคลิกลิงค์แล้ว ลิงค์ URL เฉพาะจะเป็น

http://yoursite/modify.aspx?CODE=ค่าโค้ดของบันทึกที่ถูกคลิก

หน้า modified.aspx จะสอบถามบันทึกที่จำเป็นจากฐานข้อมูลผ่านค่ารหัสที่ส่งผ่าน

ในการอัปเดตข้อมูลในหน้า modified.aspx คุณต้องใช้แบบฟอร์ม สิ่งนี้จำเป็นต้องผูกบันทึกข้อมูลเข้ากับกล่องอินพุต การเชื่อมโยงข้อมูลใน Dreamweaver MX นั้นคล้ายคลึงกับการเชื่อมโยงข้อมูลใน Dreamweaver UltraDev ตั้งค่าหน้าดังแสดงในรูปที่ 6-5 สร้างช่องข้อความใหม่ 6 ช่อง ช่องซ่อน 1 ช่อง และปุ่มส่ง 1 ปุ่ม และวางไว้ในตำแหน่งที่เหมาะสม HiddenField ใช้เพื่อบันทึกค่า CODE ของเรกคอร์ดนี้ เนื่องจากค่าโค้ดเป็นคีย์เวิร์ด จึงไม่จำเป็นต้องเปลี่ยนแปลง

[รูปที่ 6-5 หน้า modified.aspx]

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

[รูปที่ 6-6 การเข้าเล่ม] [รูปที่ 6-7 การเลือกประเภทข้อมูล] [รูปที่ 6-8 คุณลักษณะการเข้าเล่ม]

รายการ ตั้งค่าคุณสมบัติฟิลด์ข้อความที่เชื่อมโยงกับแหล่งข้อมูล
ขั้นตอนที่ 3 การอัปเดตข้อมูล

สำหรับการอัพเดตข้อมูล คุณสามารถคลิกปุ่ม "+" ใน Server Behaviors ในแผง Application และเลือก Update Record

[รูปที่ 6-9 เลือก Update Record]

[รูปที่ 6-10 การตั้งค่าการเชื่อมโยง]

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

ตอนนี้คุณสามารถดูตัวอย่างหน้าที่เสร็จแล้วได้ ป้อน URL http://yoursite/location3.aspx และคุณจะเห็นหน้าเว็บแสดงในรูปที่ 6-11

[รูปที่ 6-11 การเรียกดูหน้า location3.aspx]

รายการ Location_name สามารถคลิกได้ และจะข้ามไปยังหน้ารายละเอียด modified.aspx

[รูปที่ 6-12 ดูตัวอย่างหน้าอัพเดต]
ข้อมูลที่มีอยู่สามารถแก้ไขได้ผ่านเพจ modified.aspx และข้อมูลสามารถอัปเดตได้ผ่านเหตุการณ์การส่งแบบฟอร์ม

รหัสที่อัพเดตหลักมีดังนี้:

<MM:อัปเดต

runat = "เซิร์ฟเวอร์"

CommandText='< %# "อัปเดตที่ตั้งเมือง=?, STATE_COUNTRY=?, FAX=?, TELEPHONE=?, ADDRESS=? WHERE CODE=?"

ConnectionString='< %# System.Configuration.ConfigurationSettings.AppSettings("MM_CONNECTION_STRING_location") % >'

DatabaseType='< %# System.Configuration.ConfigurationSettings.AppSettings("MM_CONNECTION_DATABASETYPE_location") % >'

Expression='< %# Request.Form("MM_update") = "form1" % >'

CreateDataSet = "เท็จ"

SuccessURL='< % # "location3.aspx" % >'

ตรวจแก้จุดบกพร่อง = "จริง"

-

<พารามิเตอร์>

< ชื่อพารามิเตอร์ = "@CITY" Value='< %# IIf((Request.Form("city") < > Nothing), Request.Form("city"), "") % >' Type="WChar" />

< ชื่อพารามิเตอร์ = "@STATE_COUNTRY" Value='< %# IIf((Request.Form("state") < > Nothing), Request.Form("state"), "") % >' Type="WChar" />

< ชื่อพารามิเตอร์="@FAX" Value='< %# IIf((Request.Form("fax") < > Nothing), Request.Form("fax"), "") % >' Type="WChar" />

< ชื่อพารามิเตอร์ = "@TELEPHONE" Value='< %# IIf((Request.Form("tele") < > Nothing), Request.Form("tele"), "") % >' Type="WChar" />

< ชื่อพารามิเตอร์ = "@ADDRESS" Value='< %# IIf((Request.Form("address") < > Nothing), Request.Form("address"), "") % >' Type="WChar" />

< ชื่อพารามิเตอร์ = "@CODE" Value='< %# IIf((Request.Form("hiddenField") < > Nothing), Request.Form("hiddenField"), "") % >' Type="WChar" />

</ /พารามิเตอร์ >

</MM:อัปเดต>

Dreamweaver MX ใช้ mm:update เพื่อแสดงโค้ดที่อัปเดต รูปแบบจะคล้ายกับ MM:Insert