ASP.NET กับ jQuery: การเรียก external template โดยใช้ jQuery

สวัสดีครับ

เอาละครับ บทความนี้เป็นบทสุดท้ายแล้ว ของหัวข้อเรื่อง ASP.NET กับ jQuery: แนะนำให้รู้จัก jQuery Template บทความนี้ผมจะแสดงวิธีการ load template จาก file ที่อยู่ข้างนอก web form หรือ external template ครับ

ก็บทความที่ผ่านๆมาเป็นการ inline template เข้าไปใน web form ทั้งหมดเลย ประโยชน์ของการแยก file template ออกมาไว้ข้างนอกก็คือ การ share กันใช้ template จาก web form อื่นๆได้ไงละครับ

ลงมือทำกันเลย

1. สร้าง file SampleTemplate.temp ใส่ไว้ใน projects web ของคุณครับ แล้วเขียน template ตามนี้ลงไป

<li>${Author}, ${BookTitle}</li>

จาก template ข้างบน มันจะสร้าง HTML  tag  li โดยมันเริ่มด้วยการเปิดด้วย <li> แล้วต่อด้วยการเอาข้อมูล field Author จากนั้นก็ขั้นด้วย , แล้วต่อด้วยเอาข้อมูล field BookTitle และปิดท้ายด้วย </li> เป็นอันเสร็จงานครับ

2. เข้าไปในเอกสาร web form ที่เราต้องการใช้ template SampleTemplate.temp ให้เตรียม tag div หรือ section เปล่าๆไว้ เพื่อที่เราจะได้เอาเอกสารที่สร้างแล้วโดย template มาเติมลงไปครับ แบบนี้

<form>

<ul id=”contentArea” />

</form>

จากเอกสาร form ข้างบน ผมได้เตรียมพื้นที่ ul(เพราะว่า template ผมสร้าง li เลยต้องเอา ul มาเตรียมบรรจุไว้) มี id ว่า contentArea เพื่อเตรียมไว้ขยายเอกสารที่สร้างจาก template  SampleTemplate.temp นี้ลงไปครับ

3. เติม JavaScript ใน scope ของ document ready function โดยใช้ jQuery ช่วย เพื่อที่จะ load file SampleTemplate.temp ที่เขียนแยกไว้ต่างหากจาก form มาใช้งานได้ แบบนี้

 //reference jQuery library เข้ามาก่อน

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

//อย่าลืม reference jQuery template plugin เข้ามาด้วย

<script src=”js/jquery.tmpl.js” type=”text/javascript”></script>

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

$(function () {

var books = [

{ Author: “Mitch Albom”, BookTitle: “Tuesdays with Morrie” },
{ Author: “Paulo Coelho”, BookTitle: “Alchemist” },
{ Author: “Barack Obama”, BookTitle: “The Audacity of Hope” },
{ Author: “Richard Bach”, BookTitle: “One” }

];

$.get(“SampleTemplate.temp”, function (msg) {

$.tmpl(msg, books).appendTo(“#contentArea”);

});

});

</script>

อธิบาย code JavaScript ข้างบน เริ่มจาก code สีเขียว ทำงานสร้าง books ที่เป็น collection ของ book ที่ประกอบไปด้วย field Author และ BookTitle เพื่อไว้แสดงใน template เหตุที่สร้างไว้แบบนี้ต้องการให้ง่ายต่อการนำเสนอครับ

เจ้า code สีแดง มันทำงาน load file SampleTemplate.temp ให้เราไงครับโดยใช้ function get ของ jQuery ช่วย เมื่อ load เสร็จจะมี function callback ที่รับ msg มันก็คือเอกสาร SampleTemplate.temp ที่ load เสร็จสมบูรณ์แล้ว เพื่อนำมันมาสร้างเอกสารตาม template ที่ได้ออกแบบไว้ กับ data books ตัวอย่าง ด้วย function tmpl แล้วขยายมันต่อไปกับ contentArea ที่เตรียมไว้ ก็เป็นอันเสร็จงานครับ

ขอบคุณครับ

#:P

Advertisements

#asp-net, #javascript, #jquery