การขยายการควบคุมแผนที่ HTML โดยใช้กรอบงาน ASP.NET AJAX

ตอนนี้ ให้เขียนวิธีการเว็บของเรา:

นี่คือตัวอย่างราคา:
[วิธีการเว็บ]
[ScriptMethod(UseHttpGet = false, ResponseFormat = ResponseFormat.Json)]
สตริงสาธารณะ GetAreaInfo (พื้นที่สตริง)
-
พื้นที่ขากลับ;
-

ตามคำแนะนำของแหล่งข้อมูลที่เชื่อถือได้ ด้วยเหตุผลด้านความปลอดภัย โดยทั่วไปเราใช้ HttpPost (หรือ HttpGet= false) เพื่อเข้าถึงวิธีการทางเว็บ จากนั้น เรากำหนดค่ารูปแบบข้อมูลที่ส่งคืนเป็นรูปแบบ JSON (โหมดเริ่มต้นคือโหมด JSON)

เพื่อความง่าย เมธอด GetAreaInfo จะส่งกลับค่าเดียวกันของพารามิเตอร์อินพุต แต่ในการพัฒนาจริง เราควรแทนที่ที่นี่เพื่อดึงข้อมูลจากฐานข้อมูล

จนถึงตอนนี้ เราได้สร้างบริการเว็บที่เรียกจากไคลเอนต์โดยใช้ AJAX สำเร็จแล้ว

อย่างไรก็ตาม เรายังจำเป็นต้องทำการกำหนดค่าที่เหมาะสมสำหรับการควบคุมเซิร์ฟเวอร์ ScriptManager ในเพจ ดังที่แสดงด้านล่าง:

ต่อไปนี้เป็นส่วนที่ยกมา:
<asp:ScriptManager ID="ScriptManager1" runat="เซิร์ฟเวอร์">
<บริการ>
<asp:servicereference path="~/LocationService.asmx" />
</บริการ>
</asp:ScriptManager>

ที่นี่ เราได้เพิ่มการอ้างอิงบริการภายใต้โหนดเท่านั้น แต่บทบาทของมันคืออะไร

จากการวิเคราะห์ซอร์สโค้ด HTML ที่สร้างขึ้น การกำหนดค่าข้างต้นจะสร้างเนื้อหาต่อไปนี้:

ต่อไปนี้เป็นส่วนอ้างอิง:

<script src="LocationService .asmx /jsdebug" type="text/javascript"></script>

แท็กสคริปต์ที่นี่อ้างอิงถึงไฟล์ JavaScript LocationService.asmx/jsdebug อันที่จริงนี่คือคลาสพร็อกซีบริการเว็บ ผ่านคลาสพร็อกซีนี้ที่เราสามารถเรียกใช้บริการเว็บฝั่งเซิร์ฟเวอร์แบบอะซิงโครนัสจากไคลเอนต์ได้

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

ต่อไป มาดูวิธีการสร้างคลาสไคลเอนต์แบบกำหนดเอง

4. สร้างคลาสแบบกำหนดเองฝั่งไคลเอ็นต์

เรารู้ว่าหนึ่งใน "สิ่งประดิษฐ์" ที่สำคัญของเฟรมเวิร์ก ASP.NET AJAX คือการแนะนำโมเดลการเขียนโปรแกรม JavaScript เชิงวัตถุ ตอนนี้ ด้วยความช่วยเหลือของรูปแบบการออกแบบ JavaScript เราสามารถสร้างเทมเพลตหรือคลาสของเราเอง เพิ่มแนวคิดการสืบทอด สร้างอินเทอร์เฟซและการแจงนับ ฯลฯ ได้อย่างง่ายดาย

ในบทความนี้ เราจะพัฒนาคลาสไคลเอนต์ที่สรุปการทำงานทั้งหมดที่จำเป็นในตัวอย่างนี้

ตอนนี้ให้คลิกขวาที่โครงการและเพิ่มไฟล์ JavaScript ใหม่ชื่อ ImageMap ในไฟล์นี้ เราจะกำหนดเนมสเปซใหม่ MyServices โดยเนมสเปซนี้จะมีคลาสไคลเอ็นต์ที่เราจะพัฒนา ดังที่แสดงด้านล่าง:

ต่อไปนี้เป็นส่วนของคำพูด:
Type.registerNamespace("บริการของฉัน");

ต่อไป เราจะกำหนด Constructor ของคลาสไคลเอ็นต์ที่เราต้องการสร้าง:

นี่คือตัวอย่างข้อมูลอ้างอิง:

MyServices.Location = function (uiElement, uiBody) {
MyServices.Location.initializeBase (สิ่งนี้);
this._uiElement = uiElement;
this._uiBody = uiBody;
นี่._xAxis = 0;
นี่._yAxis = 0;
-

เทมเพลตหรือตัวสร้างคลาสไม่มีอะไรมากไปกว่าฟังก์ชัน JavaScript ธรรมดา ตัวสร้างนี้มีพารามิเตอร์สองตัว: uiElement และ uiBody

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

ต่อไป เราจะใช้รูปแบบการออกแบบต้นแบบเพื่อเขียนฟังก์ชันและคุณสมบัติสมาชิกในคลาสนี้:

นี่คือส่วนอ้างอิง:

MyServices.Location.prototype =
-
get_uiElement: ฟังก์ชั่น()
-
ส่งคืน this._uiElement;
-
set_uiElement: ฟังก์ชั่น (ค่า)
-
this._uiElement = ค่า;
-
get_uiBody: ฟังก์ชั่น()
-
คืนสิ่งนี้._uiBody;
-
set_uiBody: ฟังก์ชั่น (ค่า)
-
this._uiBody = ค่า;
-

โปรดทราบว่าคำจำกัดความของวิธีแอตทริบิวต์องค์ประกอบ UI ที่นี่คล้ายกับรูปแบบคำจำกัดความในภาษาต่างๆ ใน ​​.NET มาก

ฟังก์ชั่นสมาชิกต่อไปนี้เป็นจุดสนใจของเรา โดยมีหน้าที่รับผิดชอบในการเรียกใช้บริการเว็บระยะไกล:

ต่อไปนี้เป็นส่วนอ้างอิง:
ShowPopupinfo: ฟังก์ชั่น (เหตุการณ์, ชื่อพื้นที่)
-
MyServices.LocationService.GetAreaInfo (ชื่อพื้นที่
Function.createDelegate(นี่ นี่เมื่อเสร็จสมบูรณ์)
this.OnError, //ฟังก์ชันโทรกลับที่รับผิดชอบในการจัดการข้อผิดพลาด
this.OnTimeOut); //ฟังก์ชันโทรกลับที่รับผิดชอบในการประมวลผลการหมดเวลา
this._xAxis = event.clientX;
this._yAxis = เหตุการณ์ ลูกค้า Y;
-

โค้ดด้านบนแสดงวิธีการทั่วไปในการเรียกบริการเว็บจากไคลเอนต์:

1) แบบฟอร์มนี้เกือบจะสะดวกพอ ๆ กับการเรียกวิธีท้องถิ่นทั่วไป

2) ฟังก์ชัน Function.createDelegate มีความสำคัญอย่างยิ่งในการพัฒนาไคลเอนต์ ASP.NET AJAX ทั่วโลก การทำงาน. จุดประสงค์เดิมประการหนึ่งของการสร้างฟังก์ชันนี้คือเพื่อแก้ไขปัญหาของคีย์เวิร์ดนี้ ในตัวจัดการเหตุการณ์ที่ถูกทริกเกอร์โดยองค์ประกอบ DOM คำสำคัญนี้จะอ้างอิงถึงองค์ประกอบ DOM เสมอ แทนที่จะเป็นคลาสเอง แต่ที่นี่ เหตุผลที่เราใช้ฟังก์ชันนี้ก็เพื่อให้สภาพแวดล้อม AJAX เรียกใช้ฟังก์ชันการเรียกกลับเมื่อประสบความสำเร็จในอินสแตนซ์คลาสเดียวกันที่ทริกเกอร์บริการเว็บ สิ่งนี้ค่อนข้างสำคัญเมื่อคุณต้องการอ้างอิงคุณสมบัติและวิธีการของคลาสไคลเอนต์ กล่าวโดยสรุป การใช้ฟังก์ชันนี้จะทำให้การเข้าถึงคุณสมบัติและวิธีการของคลาสไคลเอ็นต์ที่เรียกใช้บริการเว็บปลอดภัยและแม่นยำ มิฉะนั้น อินสแตนซ์คลาสไคลเอ็นต์ที่ทำการโทรแบบอะซิงโครนัสจะเป็นโมฆะเนื่องจากการตอบกลับของบริการเว็บดำเนินการในบริบทอื่น บริบทนี้จะไม่เทียบเท่ากับบริบทที่มีการร้องขอการโทรผ่านเว็บแบบอะซิงโครนัสอีกต่อไป

3) สิ่งที่น่าสนใจคือเมธอด GetAreaInfo ในที่นี้ไม่ใช่เมธอดในบริการบนเว็บที่เราสร้างไว้ก่อนหน้านี้ แต่เป็นของคลาสพร็อกซีบริการเว็บที่สร้างขึ้นเมื่อรันไทม์ คลาสพร็อกซีนี้ทำหน้าที่เป็นพร็อกซีไคลเอ็นต์ในการเข้าถึงบริการเว็บ ASMX ทางฝั่งเซิร์ฟเวอร์ .

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

ต่อไปนี้เป็นรหัสการใช้งานของฟังก์ชันการเรียกกลับที่สอดคล้องกันเมื่อการโทรสำเร็จ:

ต่อไปนี้เป็นส่วนอ้างอิง:

OnCompleted: function(result, userContext, methodName)
-
var uiElement = $get(this.get_uiElement());
var uiBody = $get(this.get_uiBody());
ถ้า (uiBody != null)
-
var textNode = uiBody.firstChild;
ถ้า (!textNode)
-
textNode = document.createTextNode (ผลลัพธ์);
uiBody.appendChild(textNode);
-
อื่น
-
textNode.nodeValue = ผลลัพธ์;
-
ถ้า (uiElement != null)
-
uiElement.style.visibility = "มองเห็นได้";
uiElement.style.display = "อินไลน์";
uiElement.style.left = this._xAxis + "px";
uiElement.style.top = this._yAxis + "px";
-
-
-

เนื้อหาค่อนข้างง่าย - ตั้งค่าข้อมูลที่ส่งคืนจากเซิร์ฟเวอร์เพื่อแสดงเนื้อหาในหน้าต่างป๊อปอัปและตรวจสอบให้แน่ใจว่าหน้าต่างนี้แสดงตามสถานการณ์

ในตอนท้ายของการสร้างคลาสไคลเอนต์ เรายังต้องบอกให้เฟรมเวิร์ก AJAX ลงทะเบียนบนฝั่งไคลเอ็นต์เพื่อให้สามารถเข้าถึงได้จากไคลเอนต์:

นี่คือตัวอย่างราคา:
MyServices.Location.registerClass("MyServices.Location");

ณ จุดนี้ MyServices.Location คลาสไคลเอ็นต์ได้ถูกสร้างขึ้นเรียบร้อยแล้ว ดังนั้นจะใช้มันอย่างไร

อันดับแรก เราต้องกำหนดอินสแตนซ์ใหม่ของคลาสไคลเอนต์เมื่อโหลดเพจ ในการดำเนินการนี้ เราจำเป็นต้องตั้งโปรแกรมในฟังก์ชัน pageLoad:

นี่คือตัวอย่างราคา:
ตำแหน่ง var = null;
ฟังก์ชั่น pageLoad (ผู้ส่ง args) {
location = ใหม่ MyServices.Location("modal", "modalBody");
location.HidePopupInfo();
-

โค้ดด้านบนเพียงสร้างอินสแตนซ์ใหม่ของคลาส MyServices.Location จากนั้นเรียกฟังก์ชันสมาชิกของคลาสไคลเอ็นต์อย่างใดอย่างหนึ่งเพื่อซ่อนหน้าต่างป๊อปอัปในหน้า เหตุใดเราจึงสร้างอินสแตนซ์ของคลาสไคลเอ็นต์ในฟังก์ชัน pageLoad เหตุผลก็คือเมื่อโฟลว์การควบคุมสภาพแวดล้อม AJAX ไปถึงฟังก์ชัน pageLoad ไคลเอ็นต์ AJAX ทั้งหมดและโค้ด JavaScript ที่ผู้ใช้กำหนดก็จะถูกโหลดสำเร็จ ดังนั้น ในขณะนี้ เราสามารถเข้าถึงโค้ด JavaScript ที่กำหนดโดยผู้ใช้หรือระบบได้อย่างปลอดภัย

ฟังก์ชันเครื่องมืออื่นๆ หลายอย่างค่อนข้างเรียบง่าย และจะไม่ได้อธิบายรายละเอียดไว้ที่นี่

5. สรุป

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

[เอกสารแนบ] สภาพแวดล้อมการดีบักซอร์สโค้ดของบทความนี้: Windows XP Professional Edition + Visual Studio 2005 + ASP.NET AJAX 1.0