บทความนี้รวมตัวอย่างเพื่ออธิบายวิธีใช้สคริปต์ 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 ธรรมดา เช่น <asp:textbox> การสร้างข้อความอินพุต ตัวควบคุม 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:
<asp:datagrid id="grd1" runat="server" OnItemDataBound = "ItemDataBound" >
...Columns Definition ที่นี่
</asp:datagrid> ในที่นี้จะอธิบายว่า 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 จะถูกเพิ่มลงในแต่ละ <tr> กระบวนการPage.GetPostBackClientHyperLinkส่งกลับสคริปต์ไคลเอ็นต์ที่สร้างโดยตัวควบคุม LinkButton ในเพจ พารามิเตอร์แรกคือตัวควบคุม Linkbutton และพารามิเตอร์ที่สองคือพารามิเตอร์ที่ส่งผ่านไปยังตัวควบคุมนี้ ซึ่งมักจะว่างเปล่า ถ้าไม่ใช่ตัวควบคุม LinkButton ก็จะมีฟังก์ชัน GetPostBackClientEvent ที่คล้ายกัน ผู้อ่านสามารถอ้างถึง MSDN ได้
● สคริปต์ที่สร้างโดยเซิร์ฟเวอร์ขัดแย้งกับสคริปต์ที่เพิ่มด้วยตนเอง
โดยทั่วไปจะสอดคล้องกับเหตุการณ์ที่สอดคล้องกันของการควบคุมไคลเอนต์ ตัวอย่างเช่น เหตุการณ์ SelectedIndexChanged ของ Dropdownlist สอดคล้องกับเหตุการณ์ onchange ของ HTML <Select> หากคุณต้องการเพิ่มเหตุการณ์ onchange ด้วยตนเอง จะมีการสร้าง onchange สองรายการในฝั่งไคลเอ็นต์ และเบราว์เซอร์จะละเว้นเหตุการณ์หนึ่ง ตัวอย่างเช่น ผู้ใช้ต้องการบันทึกลงในฐานข้อมูลทุกครั้งที่เขาเปลี่ยนตัวเลือกใน Dropdownlist (ถึงแม้จะไม่บ่อยนักแต่ก็มีความต้องการนี้) แต่ในขณะเดียวกันเขาก็ต้องการเตือนผู้ใช้ด้วยว่าเขา อยากประหยัดจริงๆ แน่นอนว่าควรวางโค้ดที่บันทึกไว้ในเหตุการณ์ SelectedIndexChanged และควรเพิ่มการแจ้งเตือนด้วยตนเองพร้อมกับเหตุการณ์ onchange ผลลัพธ์ก็คือสามารถดำเนินการการเปลี่ยนแปลงได้เพียงหนึ่งในสองรายการเท่านั้น วิธีที่ถูกต้องควรเพิ่มปุ่มบันทึกที่มองไม่เห็นและเรียกโปรแกรมที่สร้างโดยปุ่มนี้ในเหตุการณ์ onchange ที่เพิ่มด้วยตนเอง
วิธี Page_Load มีดังต่อไปนี้:
Dim sCmd เป็นสตริง
sCmd=Page.GetPostBackClientHyperlink(btnUpdate, "")
ถ้าไม่ใช่ page.isPostback ให้
เลื่อนลงรายการ1.Attributes.add("onchange","ConfirmUpdate(""" & sCmd & """ )")
สิ้นสุดถ้า
ฟังก์ชั่น ConfirmUpdate จะเป็นดังนี้
<Script language=”javascript”>
function ConfirmUpdate(cmd){
if Confirm(“Are you Sure to update?”)
eval(cmd);
}
</Script>
ฟังก์ชั่น Javascript eval ถูกใช้ที่นี่เพื่อ เรียกคำสั่งสตริงที่อยู่ใน . ควรสังเกตว่าสตริงที่มีคำสั่งไม่สามารถอยู่ในเครื่องหมายคำพูดเดี่ยวได้ เนื่องจากสคริปต์ที่สร้างขึ้นโดยอัตโนมัติมีเครื่องหมายคำพูดเดี่ยว ดังนั้นที่นี่จึงใช้เครื่องหมายคำพูดคู่สองเครื่องหมายเพื่อแสดงเครื่องหมายคำพูดคู่ของสตริงเอง
3. บทสรุป
ข้างต้นได้กล่าวถึงสถานการณ์ต่างๆ ของการแทรก Javascript ใน ASP.Net โดยย่อ การแทรกสคริปต์ Javascript ฝั่งไคลเอ็นต์ลงในโปรแกรมเซิร์ฟเวอร์อย่างเหมาะสมสามารถปรับปรุงประสิทธิภาพการทำงานของโปรแกรมและให้อินเทอร์เฟซผู้ใช้ที่เป็นมิตรมากขึ้น