เกี่ยวกับการใช้งาน ASP.NET ที่เรียก JavaScript

บทความนี้รวมตัวอย่างเพื่ออธิบายวิธีใช้สคริปต์ Javascript ฝั่งไคลเอ็นต์ในแอปพลิเคชัน ASP.net เพื่อปรับปรุงประสิทธิภาพการทำงานของโปรแกรมและบรรลุฟังก์ชันเพิ่มเติม

1. ASP.Net และ Javascript

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

ในบทความและหนังสือต่างๆ ที่แนะนำ ASP.Net มุ่งเน้นไปที่การควบคุมเซิร์ฟเวอร์และ .Net Framework SDK เนื่องจากสิ่งเหล่านี้เป็นการปรับปรุงล่าสุดและปฏิวัติวงการที่สุดใน ASP.Net ในทางตรงกันข้าม Javascript สคริปต์ฝั่งไคลเอ็นต์ (รวมถึง VBScript ด้วย) ซึ่ง ในอดีตมีบทบาทสำคัญในการพัฒนาเว็บ ซึ่งไม่ค่อยมีใครกล่าวถึง ดูเหมือนว่าโปรแกรมฝั่งเซิร์ฟเวอร์จะไม่จำเป็นต้องใช้สคริปต์ฝั่งไคลเอ็นต์อีกต่อไป อย่างไรก็ตาม โปรแกรมฝั่งเซิร์ฟเวอร์จำเป็นต้องมีการโต้ตอบระหว่างเบราว์เซอร์และเว็บเซิร์ฟเวอร์ สำหรับ ASP.Net นั้นเป็นการส่งเพจซึ่งต้องใช้ข้อมูลจำนวนมากในการส่งกลับไปกลับมา การตรวจสอบอินพุตหรือการยืนยันการลบ ดำเนินการได้อย่างสมบูรณ์โดยใช้ Javascript ดังนั้นจึงยังจำเป็นต้องศึกษาวิธีใช้ Javascript ใน ASP.Net

2. ตัวอย่างแอปพลิเคชัน Javascript

1. การเพิ่มเหตุการณ์ Javascript ให้กับการควบคุมเซิร์ฟเวอร์บนเพจ

ในที่สุดการควบคุมเซิร์ฟเวอร์จะสร้าง HTML ธรรมดา เช่น การสร้างข้อความอินพุต ตัวควบคุม HTML แต่ละรายการในแบบฟอร์มมีเหตุการณ์ Javascript ของตัวเอง เช่น กล่องข้อความมีเหตุการณ์ onchange, Button มีเหตุการณ์ onclick, กล่องรายการมีเหตุการณ์ onchange เป็นต้น หากต้องการเพิ่มเหตุการณ์ฝั่งไคลเอ็นต์ให้กับการควบคุมเซิร์ฟเวอร์ คุณต้องใช้คุณสมบัติแอตทริบิวต์ แอ็ตทริบิวต์ Attributes คือแอ็ตทริบิวต์ที่ตัวควบคุมเซิร์ฟเวอร์ทั้งหมดมี ซึ่งใช้เพื่อเพิ่มแท็กที่กำหนดเองลงใน HTML ที่สร้างขึ้นในขั้นสุดท้าย สมมติว่ามีปุ่มบันทึก btnSave บนเว็บฟอร์ม และคุณต้องการแจ้งให้ผู้ใช้ทราบว่าเขาต้องการบันทึกจริงๆ หรือไม่เมื่อคลิกปุ่มนี้ (เช่น เมื่อบันทึกแล้ว ไม่สามารถกู้คืนได้ เป็นต้น) รหัสต่อไปนี้ควร จะถูกเพิ่มในเหตุการณ์ Page_Load:

หากไม่ใช่ page.isPostBack() ดังนั้น

btnSave.Attributes.Add("onclick","Javascript:returnfirm('Are you Sure to save?');")

สิ้นสุดหาก

ควรสังเกตว่า 'return' จะไม่ละเว้น มิฉะนั้นแม้ว่าผู้ใช้จะคลิกยกเลิก ข้อมูลจะยังคงถูกบันทึกไว้

2. เพิ่มเหตุการณ์ Javascript สำหรับแต่ละแถวใน Datagrid

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

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

...Columns Definition ที่นี่

ในที่นี้จะอธิบายว่า ItemDataBound เมธอดนี้ถูกเรียกเมื่อเหตุการณ์ OnItemDataBound เกิดขึ้น ให้เพิ่มคำจำกัดความของเมธอดนี้ในไฟล์โค้ดที่อยู่เบื้องหลัง:

Sub ItemDataBound(ByVal sender As Object, ByVal e As DataGridItemEventArgs)

ถ้า e.Item.ItemType <> ListItemType.Header และ e.Item.ItemType <> ListItemType.Footer จากนั้น

Dim oDeleteButton As LinkButton = e.Item.Cells(5) Controls(0)

oDeleteButton.Attributes("onclick") = "javascript:return ยืนยัน ('คุณแน่ใจหรือไม่ว่าต้องการลบ" & DataBinder.Eval(e.Item.DataItem, "m_sName") & "?')"

สิ้นสุด ถ้า

End Sub

เนื่องจากแถวหัวเรื่องและแถวส่วนท้ายของ Datagrid จะทริกเกอร์เหตุการณ์นี้ด้วย อันดับแรกจะตัดสินว่าแถวที่ทำให้เกิดเหตุการณ์นี้ไม่ใช่แถวหัวเรื่องหรือแถวส่วนท้าย สันนิษฐานที่นี่ว่าปุ่ม Delete อยู่ในคอลัมน์ 6 ของ Datagrid (คอลัมน์แรกคือ 0) และแหล่งข้อมูลของ Datagrid มีคอลัมน์ชื่อ "m_sName"

3. การอ้างอิงถึงส่วนควบคุมใน Datagrid ในสถานะการแก้ไข

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

หากเป็นตัวควบคุมกล่องข้อความเซิร์ฟเวอร์ธรรมดา ID จะเหมือนกับ ID ของกล่องอินพุต HTML ที่สร้างขึ้น แต่ในสถานะการแก้ไขของ Datagrid รหัสทั้งสองจะไม่เหมือนกัน (เหตุผลเหมือนกับตัวอย่างข้างต้น ) ซึ่งต้องใช้คุณสมบัติ ClientID ของตัวควบคุม

Protected Sub ItemEdit (แหล่งที่มา ByVal As Object, ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs)

Dim sDateCtrl เป็นสตริง

sDateCtrl = grd1. Items (e.Item.ItemIndex Cells(2) ClientID

End Sub

จะถือว่าที่นี่เมธอด ItemEdit เป็นตัวจัดการเหตุการณ์ OnItemEdit ของ Dategrid และคอลัมน์ที่สามของ Datagrid ประกอบด้วยตัวควบคุมกล่องข้อความเซิร์ฟเวอร์ชื่อ txtDate

4.

อ้างถึงโปรแกรม Javascript ที่สร้างขึ้นโดยอัตโนมัติโดย ASP.Net

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

ใด

ก็ได้บน Datagrid เพื่อเลือกแถว

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

Sub Item_Bound(ByVal sender As Object, ByVal e As DataGridItemEventArgs )

Dim itemType As ListItemType

itemType = CType(e.Item.ItemType, ListItemType)

ถ้า (itemType <> ListItemType.Header) และ _

(itemType <> ListItemType.Footer) และ _

(itemType <> ListItemType.Separator) จากนั้น

หรี่ oSelect As LinkButton = CType(e.Item.Cells(5).Controls(0), LinkButton)

e.Item.Attributes("onclick") = Page. GetPostBackClientHyperlink (oSelect, " ")

สิ้นสุด

ย่อย ถือว่าปุ่มเลือกอยู่ในคอลัมน์ 6 e.Item แสดงถึงแถว เมื่อพิจารณาจาก HTML ที่สร้างขึ้น เหตุการณ์ onclick จะถูกเพิ่มลงในแต่ละ กระบวนการPage.GetPostBackClientHyperLinkส่งกลับสคริปต์ไคลเอ็นต์ที่สร้างโดยตัวควบคุม LinkButton ในเพจ พารามิเตอร์แรกคือตัวควบคุม Linkbutton และพารามิเตอร์ที่สองคือพารามิเตอร์ที่ส่งผ่านไปยังตัวควบคุมนี้ ซึ่งมักจะว่างเปล่า ถ้าไม่ใช่ตัวควบคุม LinkButton ก็จะมีฟังก์ชัน GetPostBackClientEvent ที่คล้ายกัน ผู้อ่านสามารถอ้างถึง MSDN ได้

● สคริปต์ที่สร้างโดยเซิร์ฟเวอร์ขัดแย้งกับสคริปต์ที่เพิ่มด้วยตนเอง

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

วิธี Page_Load มีดังต่อไปนี้:

Dim sCmd เป็นสตริง

sCmd=Page.GetPostBackClientHyperlink(btnUpdate, "")

ถ้าไม่ใช่ page.isPostback ให้

เลื่อนลงรายการ1.Attributes.add("onchange","ConfirmUpdate(""" & sCmd & """ )")

สิ้นสุดถ้า

ฟังก์ชั่น ConfirmUpdate จะเป็นดังนี้

ฟังก์ชั่น Javascript eval ถูกใช้ที่นี่เพื่อ เรียกคำสั่งสตริงที่อยู่ใน . ควรสังเกตว่าสตริงที่มีคำสั่งไม่สามารถอยู่ในเครื่องหมายคำพูดเดี่ยวได้ เนื่องจากสคริปต์ที่สร้างขึ้นโดยอัตโนมัติมีเครื่องหมายคำพูดเดี่ยว ดังนั้นที่นี่จึงใช้เครื่องหมายคำพูดคู่สองเครื่องหมายเพื่อแสดงเครื่องหมายคำพูดคู่ของสตริงเอง

3. บทสรุป

ข้างต้นได้กล่าวถึงสถานการณ์ต่างๆ ของการแทรก Javascript ใน ASP.Net โดยย่อ การแทรกสคริปต์ Javascript ฝั่งไคลเอ็นต์ลงในโปรแกรมเซิร์ฟเวอร์อย่างเหมาะสมสามารถปรับปรุงประสิทธิภาพการทำงานของโปรแกรมและให้อินเทอร์เฟซผู้ใช้ที่เป็นมิตรมากขึ้น