ASP.NET กับ jQuery: การใช้ template เพื่อ render ข้อมูลที่มีรูปแบบจาก web services

ความต้องการ

ในกรณีที่เราพัฒนา web-based application ที่การนำเสนอจะถูกแสดงบน browser และต้องการประมวลผล logic โดย server ผ่าน Web Services แล้ว return ผลตอบกลับด้วยโครงสร้างข้อมูลแบบ JSON

บทความนี้ผมจะใช้ประโยชน์จาก  jQuery Template plugin เพื่อ parse ข้อมูล และสร้างเอกสาร HTML จากข้อมูลที่ return โดย web service ซึ่งข้อมูลจะอยู่ในรูปแบบ JSON

UX Presentation Mockups

1. เปิดหน้าจอครั้งแรก

2. เมื่อกดปุ่ม [Click to retrieve Employee data] จะทำการค้นข้อมูล employee แล้วแสดงข้อมูลเป็นรูปแบบตาราง และทำการซ้อนปุ่ม

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

ก่อนอื่นผมจะสร้าง web service สัก method หนึ่งเพื่อที่จะ return ข้อมูลพนักงาน เพื่อแสดงบน browser เริ่มต้นนี้ผมอยากให้คุณ เริ่ม projects เหมือนๆกับบนความที่ผ่านๆมาของผม แล้วเริ่มทำต่อกันเลย

1. สร้าง class Employee ที่ประกอบด้วย field ต่างๆตามนี้  EmpID, Name, Email, Contact ซึ่งเขียนเป็น class ออกมาได้เป็น

public class Employee
{

public string EmpID { get; set; }
public string Name { get; set; }
public string Email { get; set; }
public string Contact { get; set; }

}

2. เพิ่ม web services EmployeeService.asmx เข้าไปใน projects แล้วเติมสิ่งที่อยู่ข้างล่างนี้เข้าไปในส่วนของ code behide หรือ file EmployeeService.asmx.cs

[System.Web.Script.Services.ScriptService]

3. บทความนี้ผมต้องการให้ง่าย และเร็วในการนำเสนอ สร้างข้อมูล employee สมมติสักชุดหนึ่งไว้แสดงใน template ลงไปใน code behide ดังนี้

List<Employee> _empList = new List<Employee>
{

new Employee{EmpID=”I53434″,Name=”Richard Tan”,Email=”richard@someemail.com”,Contact=”+65 24242444″},
new Employee{EmpID=”I53435″,Name=”Thomas Lee”,Email=”thomas@someemail.com”,Contact=”+65 8664664″},
new Employee{EmpID=”I53436″,Name=”Joseph Yeo”,Email=”joseph@someemail.com”,Contact=”+65 94643646″},
new Employee{EmpID=”I53437″,Name=”JasmineD’Souza”,Email=”jasmine@someemail.com”,Contact=”+65 4225252″},

};

4. เพิ่ม web services method ลงไปใน code behide ของ EmployeeService อย่างนี้

[WebMethod]
public List<Employee> GetEmployeeData()
{

return _empList;

}

ถึงตรงนี้ก็เสร็จในฝั่งของ server ที่เป็น web services แล้วละครับ ต่อจากนี้ไปผมจะแสดงขั้นตอนการทำฝั่ง client โดยจะเริ่มจากสร้างส่วนนำเสนอ(presentation) หรือ UI ก่อน

5. เพิ่ม web form EmployeeTemplateForm.aspx เข้าไปใน projects

6. เพิ่ม css style เพื่อซ่อน element ตามข้างล่างนี้เข้าไป (เพิ่มเข้าไปในส่วน header ของ EmployeeTemplateForm.aspx)

<style>

.hide
{

display:none;

}

</style>

7. เพิ่มวัตถุเพื่อนำเสนอเข้าไปในส่วน body ของ EmployeeTemplateForm.aspx ตามนี้

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

<div align=”center”>

<asp:Button ID=”btnSubmit” runat=”server” Text=”Click to retrieve Employee data” />
<br /><br />
<table border=”1″ cellspacing=”2″ cellpadding=”2″ id=”contentTble”>

<tr class=”header”>

<td>Employee ID</td>
<td>Employee Name</td>
<td>Email</td>
<td>Contact</td>

</tr>

</table>

</div>

</form>

8. สร้าง jQuery template เพื่อนำเสนอข้อมูล employee เข้าไปใน EmployeeTemplateForm.aspx (เติม script ไว้ที่ header หรือ บรรทัดสุดท้ายของ form ก็ได้) ตามนี้

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

<tr>

<td>${EmpID}</td>
<td>${Name}</td>
<td>${Email} </td>
<td>${Contact}</td>

</tr>

</script>

คุณจะสังเกตุเห็นว่ารูปแบบที่เราต้องการจะสร้างออกมาใน template เพื่อที่จะ append แต่ละ element เข้าไปใน layout หลักของ form ได้พอดีกัน ในที่นี้ layout เป็น table ดังนั้น template จะสร้าง tr ในแต่ละ employee list เพื่อที่จะแสดงใน layout table ได้อย่างถูกต้องนั่นเอง

ต่อจากนี้ไปจะเป็นส่วนของ JavaScript หรือมันก็คือกลไกในฝั่งของ client logic เพื่อที่จะเรียกขอบริการจาก web service EmployeeService ที่ผมได้สร้างไว้แล้วข้างต้น และทำการบริโภคข้อมูล(ในบทความนี้ก็แค่แสดงข้อมูลเป็นตาราง)ที่กลับมานี้ซะ

9. ก่อนอื่นก็ include library jQuery และ jQuery template plugin เข้าใน form ก่อน

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

10. เปิด scope javascript เพื่อเตรียมเพิ่ม code เข้าไปใน function ready ของ document โดยใช้วิธีแบบ jQuery เพื่อ binding function ready ดังนี้

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

$(function () {

});

</script>

11. ใน $(function () { บรรทัดแรกให้ซ่อน contentTble (ดูข้อ 6, 7) ก่อนที่จะแสดงข้อมูล employee

$(“#contentTble”).addClass(“hide”);

12. code บรรทัดต่อมาผมจะทำการ binding function ให้กับปุ่ม btnSubmit คือเมื่อ click แล้วให้เรียก web service GetEmployeeData เมื่อได้ข้อมูลมาแล้วให้แสดงผลใน contentTble โดยใช้ jQuery template ช่วย

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

e.preventDefault();

sendAndRenderData();

});

13. จากข้อ 12 ผมต้องเพิ่ม function sendAndRenderData ที่ได้เขียนเตรียมไว้ก่อน เพื่อที่จะเรียก GetEmployeeData และแสดงผลใน contentTble

function sendAndRenderData () {

$.ajax({

type: “POST”,
url: “EmployeeService.asmx/GetEmployeeData”,
contentType: “application/json; charset=utf-8”,
dataType: “json”,

success: function (msg) {

$(“#contentTble”).removeClass(“hide”);
$(“#empTemplate”).tmpl(msg.d).appendTo(“#contentTble”);
$(“#btnSubmit”).addClass(“hide”);

},

error: function () {

alert(“An unexpected error has occurred during processing.”);

}

});

}

สรุป code ในส่วนของ JavaScript ได้แบบนี้ครับ
<script language=”javascript” type=”text/javascript”>

$(function () {

$(“#contentTble”).addClass(“hide”);
$(“#btnSubmit”).click(function (e) {

e.preventDefault();
sendData();

});

function sendData() {

$.ajax({

type: “POST”,
url: “EmployeeService.asmx/GetEmployeeData”,
contentType: “application/json; charset=utf-8”,
dataType: “json”,

success: function (msg) {

$(“#contentTble”).removeClass(“hide”);
$(“#empTemplate”).tmpl(msg.d).appendTo(“#contentTble”);
$(“#btnSubmit”).addClass(“hide”);

},
error: function () {

alert(“An unexpected error has occurred during processing.”);

}

});

}

});

</script>

ทดสอบ

เสร็จแล้วก็ลอง run form ขึ้นมาครับ แล้วลองเล่นดู มันก็จะมีลักษณะเหมือน UX mockup ที่ผมได้แสดงให้ดูไปแล้วในตอนต้น

สรุป

คุณจะเห็นว่า ด้วยการใช้ jQuery template คุณไม่จำเป็นต้องสนใจงานการ parse ข้อมูลที่มีโครงสร้าง JSON เลยแม้แต่น้อย คุณก็แค่สร้าง template และ binding มันเหมือนกับบทความที่ผ่านๆมาของผมเลยเป๊ะๆ ซึ่งก็ส่งผลทำให้คุณประหยัด code ที่ต้องเขียนไปอีก  ถ้าคุณเคยเขียนงานลักษณะนี้คุณก็คงรู้ได้ทันทีเลยว่ามันประหยัดได้จริงใช่มั้ยละ

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

ขอบคุณครับ

#:P

Advertisements

#asp-net, #javascript, #jquery