ASP.NET กับ jQuery: การสร้ง ASP.NET CheckBoxList ใน Template

ความต้องการ

ต้องการใช้ template เพื่อสร้าง CheckBoxList บน ASP.NET โดยที่ CheckBoxList สามารถเพิ่ม item ได้ในขณะ runtime พร้อมกับเพิ่ม CheckBoxList เลือกหรือไม่เอาทั้งหมดได้ด้วย

ตัวอย่างหน้าจอเมื่อทำเสร็จ

1. เปิดครั้งแรก

2. เมื่อ click เลือกรายการใดๆ

3. และเมื่อ click เลือก เอาหมดเลย

ลงมือทำ… Action!

1. เปิด Visual Studio .NET 2010 แล้วสร้าง web projects ครับ

2. download jQuery library จาก http://code.jquery.com/jquery-1.7.1.min.js และ jQuery template จาก https://github.com/jquery/jquery-tmpl

3. เพิ่ม web form *.aspx ใหม่เข้ามาใน projects ตั้งชื่อว่า CheckBoxListTemplate.aspx

4. เตรียม layout บน form ให้พร้อมก่อนแสดง  information ตัวอย่างนี้ผมกำหนด layout เป็นแบบ table และให้อยู่ตรงกลางของ form เพิ่ม script ตามข้างล่างนี้เข้าไปใน form CheckBoxListTemplate.aspx

<body>

<form id=”form1″ runat=”server”>

<div align=”center”>

<table border=”0″ cellpadding=”0″ cellspacing=”0″ id=”contentTble”>

<tr><td align=”left”><asp:CheckBox ID=”chkSelectAll” runat=”server” Text=”เอาหมดเลย” /></td></tr>

</table>

</div>

</form>

</body>

5. เพิ่ม file JavaScript lib จากข้อ 2 เข้ามาใน projects แล้ว reference เข้ามาใน web form CheckBoxListTemplate.aspx ด้วย script นี้

<script src=”Scripts/jquery-1.7.1.min.js” type=”text/javascript”></script>
<script src=”Scripts/jquery.tmpl.min.js” type=”text/javascript”></script>

6. สร้าง jQuery template  เพื่อแสดง item ของเราให้เป็น CheckBoxList ตามต้องการ ด้วย script นี้

<script type=”text/x-jquery-tmpl” id=”bookTemplate”>

<tr><td align=”left”><input type=”checkbox” ID=”CheckBoxList1″>${Author} –> ${BookTitle}</input></td></tr>

</script>

7. ขั้นตอนสุดท้ายครับเป็น javascript ที่เขียนเข้าไปใน ready function ของ form โดยมีขั้นตอนดังนี้

– เตรียม data เป็นข้อมูลตัวอย่าง เพื่อแสดงผลใน template ที่เตรียมไว้ ด้วย script นี้ (ดูข้อ 6)

var books = [

{ Author: “Gojko Adzic”, BookTitle: “Specification by Example: How Successful Teams Deliver the Right Software” },
{ Author: “David J. Anderson, Donald G Reinertsen”, BookTitle: “Kanban: Successful Evolutionary Change for Your Technology Business” },
{ Author: “Jonathan Rasmusson”, BookTitle: “The Agile Samurai: How Agile Masters Deliver Great Software” },
{ Author: “Henrik Kniberg, Mattias Skarin”, BookTitle: “Kanban and Scrum – making the most of both ” }

];

– ทำการ binding data ที่ได้เตรียมไว้ เข้าไปใน bookTemplate เพื่อสร้าง checkbox list แล้ว append ผลนี้เข้าไปใน table contentTble ซึ่งเป็น layout เพื่อแสดงผลที่เตรียมไว้ (ดูข้อ 4)

$(“#bookTemplate”).tmpl(books).appendTo(“#contentTble”);

– ทำการ binding คำสั่งกับ CheckBox chkSelectAll เพื่อให้มันทำงาน เลือก หรือ ไม่เลือก item ทั้งหมดใน  checkbox list (ดูข้อ 4)

$(“#chkSelectAll”).click(function () {

$(“INPUT[type=’checkbox’]”).attr(‘checked’, $(‘#chkSelectAll’).is(‘:checked’));

});

สรุปว่า ผมได้เติม JavaScript เข้าใปใน form CheckBoxListTemplate.aspx เป็นแบบนี้

<script language=”javascript” type=”text/javascript”>

$(function () {

var books = [

{ Author: “Gojko Adzic”, BookTitle: “Specification by Example: How Successful Teams Deliver the Right Software” },
{ Author: “David J. Anderson, Donald G Reinertsen”, BookTitle: “Kanban: Successful Evolutionary Change for Your Technology Business” },
{ Author: “Jonathan Rasmusson”, BookTitle: “The Agile Samurai: How Agile Masters Deliver Great Software” },
{ Author: “Henrik Kniberg, Mattias Skarin”, BookTitle: “Kanban and Scrum – making the most of both ” }

];

$(“#bookTemplate”).tmpl(books).appendTo(“#contentTble”);

$(“#chkSelectAll”).click(function () {

$(“INPUT[type=’checkbox’]”).attr(‘checked’, $(‘#chkSelectAll’).is(‘:checked’));

});

});

</script>

ก็เสร็จแล้วครับ ลอง run แล้วทดสอบ form ดู ผลที่ออกมาก็จะเหมือนกับ ตัวอย่างหน้าจอเมื่อทำเสร็จแล้ว มีคำถามอะไรก็ติดต่อมาได้ครับผ่าน email หรือ facebook ของผมก็ได้

อ่านเพิ่มติม: ASP.NET กับ jQuery: แนะนำให้รู้จัก jQuery Template

ขอบคุณครับ

#:P

Advertisements

#asp-net, #javascript, #jquery