ASP.NET กับ jQuery: การใช้ AJAX เพื่อแสดงรายการข้อมูล ASP.NET DropDownList

เกริ่นนำ

บทความนี้ผมจะแสดงการทำ web page ที่แสดงรายการข้อมูลด้วย ASP.NET DropDownList และเมื่อเลือกข้อมูลใน DropDownList นี้แล้วจะแสดงรายการข้อมูลย่อยใน DropDownList อีกอันด้วยกลไก AJAX เช่น เมื่อเลือก Catalog สินค้าแล้ว ก็จะแสดงรายการข้อมูลลูกออกมาที่ DropDownList อีกตัวที่เตรียมไว้เพื่อให้เลือกรายการลูกนี้ต่อไป และด้วยกลไก AJAX ผู้ใช้จึงไม่รู้สึกว่าหน้า page นี้ทำงานช้าเลย ทั้งๆที่มีการ request ข้อมูลใหม่จาก server มาแสดงเสมอ ก็เพราะว่ามันไม่มีการ refresh page เพื่อดึงข้อมูลรายการลูกใหม่นี้มาแสดงที่ DropDownList เลยนั่นเอง

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

ลงมือทำ เตรียม web form และ service

1. download Source Code นี้เพื่อมาทำต่อเลยครับ

2. เปิด web projects นี้ด้วย Visual Studio แล้วเพิ่ม Web Form ใหม่เข้าไปใน project นี้ตั้งชื่อว่า AjaxDropDownList.aspx

3. เพิ่ม CSS เพื่อใช้ซ่อน control ตามที่เราต้องการ

<style type=”text/css” media=”screen”>
.hidden
{
display:none;
}
</style>

3. เพิ่ม control DropDownList 2 ตัว เข้าไปใน web form และใส่ class hidden เพื่อซ่อน DropDownList ของรายการลูก กับ label ด้วย ตาม code ข้างล่างนี้

<form id=”form1″ runat=”server”>
<div align=”center”>

<table cellpadding=”3″ cellspacing=”3″ border=”0″>
<tr><td>เลือกชื่อผู้แต่ง: </td>
<td align=”left”>
<asp:DropDownList ID=”ddlAuthor” runat=”server”>
<asp:ListItem Text=”Please select” Value=”[-]”></asp:ListItem>
        <asp:ListItem Text=”Martin Fowler” Value=”MartinFowler”></asp:ListItem>
        <asp:ListItem Text=”Robert C. Martin” Value=”UncleBob”></asp:ListItem>
        <asp:ListItem Text=”Steve McConnell” Value=”SteveMcConnell”></asp:ListItem>
        </asp:DropDownList>
</td></tr>
<tr><td>
<label id=”lblBookList” runat=”server”>รายการที่เลือกได้: </label>
</td>
<td align=”left”>
<asp:DropDownList ID=”ddlBookList” CssClass=”hidden” runat=”server”/>
</td></tr>
</table>
</div>
</form>

4. ไปที่ code-behide ของ web form AjaxDropDownList.aspx ผมจะใส่ code ทำงานค้นข้อมูลขึ้นกับ value ของ ddlAuthor เมื่อผู้ใช้เลือก โดยประกาศ service แบบ page method

ให้ using System.Web.Services เข้ามาก่อนครับ แล้วเติม page method  นี้เข้าไป

[WebMethod]
public static ArrayList GetBookList(string sAuthor)
{
ArrayList listArr = new ArrayList();

if (sAuthor== “MartinFowler”)
{
listArr.Add(new ListItem(“Analysis Patterns: Reusable Object Models”, “MartinFowler0”));
listArr.Add(new ListItem(“Refactoring: Improving the Design of Existing Code “, “MartinFowler1”));
listArr.Add(new ListItem(“Patterns of Enterprise Application Architecture “, “MartinFowler2”));
listArr.Add(new ListItem(“Domain-Specific Languages”, “DSL”));
}
else if (sAuthor== “UncleBob”)
{
listArr.Add(new ListItem(“Designing Object Oriented C++ Applications Using The Booch Method”, “UncleBob0”));
listArr.Add(new ListItem(“Agile Principles, Patterns, and Practices in C#”, “UncleBob1”));
listArr.Add(new ListItem(“Clean Code: A Handbook of Agile Software Craftsmanship”, “UncleBob2”));
listArr.Add(new ListItem(“The Clean Coder: A Code of Conduct for Professional Programmers”, “UncleBob3”));
}
else if (sAuthor== “SteveMcConnell”)
{
listArr.Add(new ListItem(“Rapid Development Taming Wild Software Schedules”, “SteveMcConnell0”));
listArr.Add(new ListItem(“Software Project Survival Guide Pro Best Practices”, “SteveMcConnell1”));
listArr.Add(new ListItem(“Code Complete A Practical Handbook of Software Construction”, “SteveMcConnell2”));
listArr.Add(new ListItem(“Software Estimation Demystifying the Black Art”, “SteveMcConnell3”));
}
return listArr;
}

เอาละครับ form พร้อมแล้ว service แบบ page method ก็พร้อมแล้ว ขั้นต่อไปก็เติมกลไล jQuery AJAX ลงไป

เติมกลไก jQuery AJAX

1. เพิ่ม jQuery library เข้ามาใน web form

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

2. เปิด tag javascript ใส่ function ให้ document ready และใช้ jQuery selector ค้นหา ddlAuthor และ ddlBookList มาพักไว้ก่อน

<script language=”javascript” type=”text/javascript”>
$(function () {
var ddlAuthor = $(“#ddlAuthor”);
var ddlBookList = $(“#ddlBookList”);

3. ผูก event change กับ function คือเมื่อผู้ใช้เลือก DropDownList ผู้แต่งและ value ไม่เท่ากับ [-] ให้ sendData ไปที่ server เพื่อดึงข้อมูลลูกเพื่อแสดง และในกรณีอื่นให้ซ้อน label และ DropDownList  ของข้อมูลลูก

ddlAuthor.bind(‘change’, function (e) {
if (ddlAuthor.val() != ‘[-]’)
sendData(ddlAuthor.val());
else {
$(“#lblBookList”).addClass(“hidden”);
ddlBookList.addClass(“hidden”);
}
});

4. เพิ่ม function sendData  เพื่อเรียก service ดึงข้อมูลรายการย่อยโดยรับ parameter Author และจบ tag javascript

function sendData(sAuthor) {
var loc = window.location.href;
loc = (loc.substr(loc.length – 1, 1) == “/”) ? loc + “AjaxDropDownList.aspx” : loc;
$.ajax({
type: “POST”,
url: loc + “/GetBookList”,
data: ‘{“sAuthor”:”‘ + sAuthor+ ‘”}’,
contentType: “application/json; charset=utf-8”,
dataType: “json”,
success: function (msg) {
$(“#lblBookList”).removeClass(“hidden”);
ddlBookList.removeClass(“hidden”);
ddlBookList.empty().append($(“<option></option>”).val(“[-]”).html(“Please select”));
$.each(msg.d, function () {
ddlBookList.append($(“<option></option>”).val(this[‘Value’]).html(this[‘Text’]));
});
},
error: function () {
alert(“เกิดข้อผิดพลาดในระหว่างการเรียก service “);
}
});
}
});
</script>

สำหรับคำอธิบาย request service แบบ AJAXจะเหมื่อนกับบทความ ASP.NET กับ jQuery: ประยุกต์ใช้ AJAX เรียก Page Method ผมจะไม่อธิบายซ้ำ ครับก็ขอจบบทความเพียงเท่านี้

ขอบคุณครับ 🙂

Advertisements

#asp-net, #javascript, #jquery