ทดสอบการใช้ JQuery กับ ASP.NET ที่มี Master Page

จากการที่ JQuery เริ่มโด่งดังขึ้นมาจากความนิยมใช้ AJAX (Asynchronous JavaScript and XML) และเป็น Framework ที่ดีที่สุดตัวนึง ดีขนาดที่ Microsoft ยังเลือกเอาไปบรรจุไว้ใน Visual Studio 2010
ทำให้ผู้เขียนเริ่มสนใจ หลังจากที่ผู้เขียนไม่ค่อยได้ใส่ใจในการศึกษาภาษาที่ใช้ในส่วนของ DOM (Document Object Model) ในปัจจุบันเกือบทั้งหมดคือ Java Script นั่นเอง
จากสมัยก่อน เมื่อประมาณ 4-7 ปีก่อนที่ Java Script ยังเป็นแค่ภาษากิ๊กก๊อกที่สามารถคัดลอกได้จากหน้าเพจ และใช้เพียงแค่แต่งแต้มสีสันของเพจเท่านั้น ตอนนี้ยังมีการใช้งานแบบ AJAX ซึ่งมีประสิทธิภาพมากขึ้น ถึงแม้ AJAX จะไม่ใช่สิ่งจำเป็นเสมอไปในการเขียนเว็บไซต์ แต่ก็พูดได้ว่าการใช้ AJAX เข้ามาช่วยมันเป็นสิ่งที่ทำให้เว็บดีขึ้น ดูเป็นมืออาชีพมากขึ้น และช่วยลดปริมาณข้อมูลที่ส่งผ่านกันระหว่าง Browser กับ Server ได้

ตอนนี้ผู้เขียนจะทดสอบ JQuery กับ Visual Studio 2008 Service Pack 1 ซึ่งผู้เขียนใช้ทำงานอยู่เป็นประจำ โดยจะทดสอบกับหน้าเพจเปล่า และหน้าเพจที่มีการใช้ Master Page ด้วย

อันดับแรกสร้าง Project เป็น ASP.NET Web Application

จากนั้นสร้าง Folder ย่อยใน Solution Explorer

ใน Folder JQuery นั้นผู้เขียนได้ใส่ JQuery Framework Libraly ไว้ เป็น Version 1.4.1 จำนวนไฟล์ 2 ไฟล์ คือ

•     JQuery/jquery-1.4.1.min.js
•     JQuery/jquery-1.4.1-vsdoc.js 

ดาวน์โหลดได้ฟรี ที่ http://docs.jquery.com/Downloading_jQuery

ผู้เขียนสร้าง หน้าเพจชื่อ "WebForm1.aspx"
และสร้าง Master Page ชื่อ "Site1.Master" ใน Folder ชื่อ "masterPage"
อีกเพจนึงคือ Content Page ชื่อ "index.aspx" เพจนี้สร้างเพื่อใช้งานกับ Master Page "Site1.Master"

ผู้เขียนเริ่มทดลองกับเพจ  "WebForm1.aspx"  โดยที่ผู้เขียนจะใช้ Web Control ของ ASP.NET ที่ชื่อว่า
"ScriptManager" และวางปุ่ม Button เพื่อทดสอบ

(ScriptManager อยู่ใน Tab AJAX Extensions)

จากนั้นผู้เขียนให้ Control ScriptManager1 เป็นตัว Reference มาที่ JQuery Framework โดยเลือกที่ Property Scripts และกำหนด Path ของไฟล์ทั้ง 2 ไฟล์ของ JQuery

 ถ้าไปดูหน้า Source Code ของ ScriptManager1 จะเป็นแบบนี้
<asp:ScriptManager ID="ScriptManager1" runat="server">
     <Scripts>
        <asp:ScriptReference Path="../JQuery/jquery-1.4.1.min.js" />
        <asp:ScriptReference Path="../JQuery/jquery-1.4.1-vsdoc.js" />
     </Scripts>
</asp:ScriptManager>

ทดสอบ Code Java Script ให้แสดงกล่องข้อความ "Hello World"
 <script type="text/javascript">
      $(document).ready(function () {
           $("#Button1").click(function () {
                    alert("Hello World");
           });
       });
  </script>
ทดสอบโดย Compiler และ run และกดปุ่ม Button1 ว่าทำงานหรือไม่

ปรากฎว่าทำงานตามคำสั่ง Java Script ที่เขียนเอาไว้
จากนั้นผู้เขียนก็มาออกแบบ Master Page โดยใส่ Control ScriptManager อยู่อันเดียวตามรูป

ส่วนใน Content Page ผู้เขียนใส่ปุ่ม 2 ปุ่มคือ Button1 ซึ่งเป็น Server Control และ Button2 คือ input type html ดัง Code ด้านล่างนี้
<asp:Button ID="Button1" runat="server" Text="Button (Server Control)" />
<input id="Button2" type="button" value="button (HTML)" />

จากนั้นผู้เขียนจะใช้ Java Script JQuery ในการทดสอบเหมือนเดิม แต่ใส่คำสั่งในทั้ง 2 ปุ่ม โดยใส่ภายใน tag ContentPlaceHolder
<script type="text/javascript">
     $(document).ready(function() {
        $("#Button2").click(function() {
               alert("Hello World");
         });

        $("#Button1").click(function() {
               alert("Hello World");
         });
     });
</script>

จากนั้นก็ run ทดสอบทั้ง 2 ปุ่ม จะได้ผลดังนี้

ปุ่มแรกคือปุ่มที่เป็น Server Control จะเห็นว่าปุ่มไม่ทำงานตามคำสั่ง

ปุ่มที่ 2 ซึ่งเป็น html input type จะสามารถทำงานได้ตามปกติ

สาเหตุเกิดจาก JQuery หา Selection Name ที่ระบุไม่เจอ คือ $("#Button1")
นี่คือจุดอ่อนอีกจุดของ ASP.NET กับ JQuery เพราะการ Design ของ ASP.NET ต่างจาก php และ jsp ที่ส่วนใหญ่จะใช้ html เป็นหลัก และทำงานในภาษาที่เป็น Script อยู่ตลอด

สาเหตุที่ JQuery หา Selection #Button ไม่พบก็เพราะว่า Server Control ที่ Compiler แล้วส่งมาที่ Browser ชื่อ ID ของมันเปลี่ยนไป โดยดูที่ View Source ที่ Browser จะพบสาเหตุครับ

 <input type="submit" name="ctl00$ContentPlaceHolder1$Button1" value="Button (Server Control)" id="ctl00_ContentPlaceHolder1_Button1" />

Code ด้านบนนี้คือปุ่ม Button1 ที่เป็น Server Control ที่ ID Name ได้เปลี่ยนไปเป็น "ctl00_ContentPlaceHolder1_Button1" ดังนั้นจึงต้$29;งอ้างอิงใช้งานชื่อนี้แทน

<input id="Button2" type="button" value="button (HTML)" />