ASP.NET กับ jQuery: ประยุกต์ใช้ AJAX เรียก Page Method

สวัสดีครับ

ถ้าจะกล่าวถึงวิธีการเพื่อที่จะติดต่อสื่อสารกับ ASP.NET code-behind ที่เป็น logic ด้าน server โดยการ raise event บน web page จากด้าน client ด้วย jQuery นั้นจะมีอยู่ 2 หนทางก็คือ

  • แบบใช้ page method  ซึ่งผมจะกล่าวในบทความนี้ มันคือการประกาศ method ไว้ใน code-behide ของ web page นี้ตรงๆเลย
  • แบบใช้ web services ก็คือจะแยก method นี้โดยประกาศไว้แบบ web services โดยเรียกไปที่ file *.asmx ซึ่งมันจะมี code-behide ที่เป็น service contract

เอาละครับเรามาเริ่มทำกันดีกว่า โดยผมจะแสดงผลที่ทำสำเร็จแล้วให้ดูก่อน มันก็คือ web application ง่ายๆที่ทำงานตรวจสอบว่า username ที่ใส่เข้ามาใน textbox นี้มีอยู่ในระบบหรือไม่ โดยการกดปุ่มเพื่อ raise event

ผลลัพย์ที่เสร็จแล้ว

อธิบายรูปด้านบน

1. กรอกอะไรก็ได้เข้าไปใน textbox

2. กดปุ่ม ตรวจสอบชื่อผู้ใช้ ก็จะขึ้น popup ข้อความว่า ชื่อผู้ใช้นี้ไม่มีในระบบอะ!

3. ทีนี้กรอก testid01 เข้าไปใน textbox อีกที

4. กดปุ่ม ตรวจสอบชื่อผู้ใช้ ก็จะขึ้น popup ข้อความว่า ชื่อผู้ใช้นี้มีในระบบน๊ะ

หลักจากดูว่ามันทำอะไรแล้ว ต่อไปเราก็มาลงมือทำมันกันเลย

เหตุที่มาของผลลัพย์ที่เสร็จแล้ว

1. load  SourceCode นี้แล้วเปิด web projects นี้ขึ้นมา เพิ่ม Web Form ใหม่ โดย Add New Item > Web Form เข้าไปใน projects ตั้งชื่อว่า AjaxPageMethod.aspx

2. ใน code-behide ของ Web Form AjaxPageMethod.aspx ให้เพิ่ม namespace System.Web.Services เข้ามา

using System.Web.Services;

3. หลังจากนั้นประกาศ object เป็น string list ของ User Name เพื่อไว้เก็บ user name สำหรับ logic ตรวจสอบ

public static List<string> UserNameList = null;

4. เพิ่ม code ที่ทำงานเพิ่ม User Name เข้าไปใน object UserNameList  ใน Page_Load เพื่อเป็นตัวอย่างที่ valid ในระบบง่ายๆลงไป สักสอง สามชื่อ

protected void Page_Load(object sender, EventArgs e)
{
UserNameList = new List<string>(new string[] { “testid01”, “testid02”, “testid03” });
}

5. เขียน page method ที่เป็น logic ทำงานตรวสอบ user name ตามนี้

[WebMethod()]
public static bool CheckUserName(string sUserName)
{
return UserNameList.Contains(sUserName);
}

6. กลับมาที่ file web form AjaxPageMethod.aspx เพิ่มหน้าตาของ UI แบบผลลัพย์ที่เสร็จแล้วลงไป

<form id=”form1″ runat=”server”>
<div>
<asp:TextBox ID=”txtUserName” runat=”server”></asp:TextBox>
<asp:Button ID=”btnSubmit” runat=”server” Text=”ตรวจสอบชื่อผู้ใช้” />
</div>
</form>

7. เพิ่ม jQuery library javascript เข้ามาที่ web form นี้

<script src=”Scripts/jquery-1.6.2.js” type=”text/javascript”></script>

8. ใน jQuery script block  ของ function  document.ready() ให้ประกาศ event handler สำหรับ click event ของ button control

$(function () {
$(“#btnSubmit”).click(function (e) {

9. ให้หยุดการ submit form เพราะเราต้องการใช้กลไก AJAX ของเราแทน

e.preventDefault();

10. สรวจสอบถ้า TextBox มีค่าว่างและให้ alert บอกผู้ใช้

if ($(“#txtUserName”).val() == ”)
alert(“กรุณากรอกชื่อผู้ใช้”);

11. ถ้า TextBox นี้มีค่าให้เรียก function sendData() และเอาข้อมูลจาก TextBox  ใส่เข้าไปใน function ด้วย

else
sendData($(“#txtUserName”).val());
});

12. มาถึงขั้นนี้ให้ประกาศ function sendData โดยให้รับ parameter เป็น string UserName

function sendData(sUserName) {

13. เอา base path ของ page นี้

var loc = window.location.href;
loc = (loc.substr(loc.length – 1, 1) == “/”) ? loc + “Recipe3.aspx” : loc;

14. เรียก .ajax() method

$.ajax({

15. กำหนด option เป็นแบบ POST method

type: “POST”,

16. กำหนด option URL ของ page method ให้สมบูรณ์ เพื่อที่จะส่ง request

url: loc + “/CheckUserName”,

17. กำหนด option pass parameter เพื่อเรียก page method CheckUserName ในแบบ JSON format

data: ‘{“sUserName”:”‘ + sUserName + ‘”}’,

18. กำหนด option content type ของ request/response

contentType: “application/json; charset=utf-8”,

19. กำหนด option dataType เป็นแบบ JSON format

dataType: “json”,

20. ประกาศ callback function เมื่อเราเรียก page method AJAX ที่สำเร็จแล้ว(success)

success: function (msg) {
if (msg.d)
alert(“ชื่อผู้ใช้นี้มีในระบบน๊ะ”);
else
alert(“ชื่อผู้ใช้นี้ไม่มีในระบบอะ!”);
},

21.  ประกาศ callback function เมื่อเราเรียก page method AJAX แล้วมีข้อผิดพลาดเกิดขึ้น(error)

error: function () {
alert(“มี error บางอย่างเกิดขึ้น”);
}
});
}
});

OK เสร็จแล้วครับสำหรับ javascript เรียก page method แบบ AJAX โดยใช้ jQuery สรุป code ที่สมบูรณ์สำหรับกลไกทำงานนี้อีกทีครับ

<script language=”javascript” type=”text/javascript”>
$(function () {
$(“#btnSubmit”).click(function (e) {
e.preventDefault();
if ($(“#txtUserName”).val() == ”)
alert(“กรุณากรอกชื่อผู้ใช้”);
else
sendData($(“#txtUserName”).val());
});

function sendData(sUserName) {
var loc = window.location.href;
loc = (loc.substr(loc.length – 1, 1) == “/”) ? loc + “Recipe3.aspx” : loc;
$.ajax({
type: “POST”,
url: loc + “/CheckUserName”,
data: ‘{“sUserName”:”‘ + sUserName + ‘”}’,
contentType: “application/json; charset=utf-8”,
dataType: “json”,
success: function (msg) {
if (msg.d)
alert(“ชื่อผู้ใช้นี้มีในระบบน๊ะ”);
else
alert(“ชื่อผู้ใช้นี้ไม่มีในระบบอะ!”)
},
error: function () {
alert(“มี error บางอย่างเกิดขึ้น”);
}
});
}

});
</script>

ผมขอจบบทความ ASP.NET กับ jQuery: ประยุกต์ใช้ AJAX เรียก Page Method เพียงเท่านี้ครับ

ขอบคุณครับ 🙂

“การออกมาทำงาน ก็คือการออกมาใช้ชีวิต”

— สรยุทธ สุทัศนะจินดา —

Advertisements

#asp-net, #javascript, #jquery