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

สวัสดีครับ

กลับมาต่อกันกับการประยุกต์ใช้ jQuery AJAX เพื่อเรียก logic ที่ประกาศ contract แบบ web services ครับ ซึ่งผลลัพย์จะเป็นแบบเดียวกับบทความ ASP.NET กับ jQuery: ประยุกต์ใช้ AJAX เรียก Page Method

เรามาเริ่มทำกันเลยดีกว่า

1. load Source Code  นี้เพื่อเอามาทำต่อได้เลย หลังจาก load มาแล้วแตก file ออกมา เปิด projects ด้วย Visual Studio 2010 ครับ

2. เพิ่ม web services UserNameWS.asmx เข้าไปใน projects นี้ ดูภาพข้างล่างครับ

3. เพื่อเปิดให้สามารถเรียก web services โดยใช้ AJAX ได้ให้เพิ่ม atribute นี้เข้าไปที่ class UserNameWS ซึ่งมันอยู่ใน code-behide ของ UserNameWS.asmx

[System.Web.Script.Services.ScriptService]

4. เพิ่ม web method เพื่อ validate user name ง่ายๆตามข้างล้างนี้เข้าไป

[WebMethod]
public bool CheckUserName(string sUserName)
{
List<string> UserNameList = new List<string>(new string[] { “testid01”, “testid02”, “testid03” });
return UserNameList.Contains(sUserName); ;
}

5. เพิ่ม Web Form ใหม่  โดย Add New Item > Web Form เข้าไปใน projects ตั้งชื่อว่า AjaxWebServices.aspx

6. เพิ่ม TextBox และ Button control เข้าไปใน form ตามนี้

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

จากขั้นตอนข้างต้น สรุปว่าผมสร้าง web services method และเปิดให้สามารถเรียกแบบ AJAX ได้ และสร้าง web form ไว้สำหรับเรียก web services ไว้ลำดับต่อไป ผมจะเพิ่มกลไก jQuery AJAX เพื่อเรียก web services

เติมกลไก AJAX อีกเล็กน้อย

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

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

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

e.preventDefault();

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

if ($(“#txtUserName”).val() == ”)
alert(“Please enter the UserName”);

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

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

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

function sendData(sUserName) {

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

$.ajax({

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

type: “POST”,

8. กำหนด option URL ของ web services เพื่อ request แบบ AJAX

url: “UserNameWS.asmx/CheckUserName”,

9. กำหนด option pass parameter เพื่อเรียก web services CheckUserName ในแบบ JSON format

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

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

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

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

dataType: “json”,

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

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

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

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

สรุป jQuery ทั้งหมดจากขั้นตอนข้างต้นได้แบบนี้

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

function sendData(sUserName) {
$.ajax({
type: “POST”,
url: “UserNameWS.asmx/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 เรียก Web Services

ขอบคุณครับ 🙂

Advertisements

#asp-net, #javascript, #jquery