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

ASP.NET กับ jQuery: การใช้ callback function ใน jQuery template

ความต้องการ

ในขณะที่ template กำลัง render ข้อมูลอยู่ เราต้องการทำงานบางอย่างกับข้อมูล หรือ template นั้นๆ ในขณะกำลังแสดงผลข้อมูล (callback function) ตัวอย่างที่จะทำต่อไปนี้ผมจะทำต่อจากบทความ ASP.NET กับ jQuery: การใช้ template เพื่อ render ข้อมูลที่มีรูปแบบจาก web services โดยจะใส่ callback function เข้าไปในแต่ละ row เพื่อ highlight สีให้สลับกัน

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

จากบทความก่อนที่ผมอ้างถึง ให้ไปที่ code ตรงส่วนของ JavaScript แล้วเติม callback function ให้ทำงาน  highlight row สลับสีกัน ใส่เข้าไปหลังจบ function tmpl โดย binding การทำงานนี้เข้าไปที่ function each หลังจากทำงานกำหนดค่า highlight สีในแต่ละ rowเป็นที่เรียบร้อยแล้ว ก็ให้แสดงผลนี้เข้าไปใน table contentTble ที่เตียมไว้โดยใช้ function appendTo ครับ code หลังจากเขียนเสร็จจะเป็นแบบนี้

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).each(

function(index, item){

if (index % 2)//ตรวจสอบ row index เป็นแถวคู่มั้ย

$(this).css(“background-color”, “Silver”);//เป็นแถวคู่ก็จัดสีพื้นหลังให้เป็นสี Silver

}).appendTo(“#contentTble”);

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

},

error: function () {

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

}

});

ผมได้แสดงสีแดงกับ code ที่เพิ่งจะเติมเข้าไปเมื่อตะกี้นี้ เพื่อให้มันแสดงผลตามต้องการ

ทดสอบ

ลอง run web form นี้ขึ้นมาใหม่ แล้วกดปุ่ม [Click to retrieve Employee data] จะแสดงแบบนี้

เสร็จแล้วละ…

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

ขอบคุณครับ

#:P

#asp-net, #javascript, #jquery

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

#asp-net, #javascript, #jquery

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

#asp-net, #javascript, #jquery

ASP.NET กับ jQuery: การเรียก JavaScrip function และ conditional statement ใน template

สวัสดีครับ

jQuery templates สามารถเรียก JavaScript function ข้างใน template code และก็สามารถเขียน conditional statement หรือเขียน code เพื่อแสดง logic เงือนไขได้ ด้วย template tag {{if}}…{{else}}…{{/if}} ได้ โดยผมจะแสดงให้ดูในบทความนี้

ลงมือทำ

1. ตรงนี้ผมอยากให้คุณอ่านบทความ ASP.NET กับ jQuery: แนะนำให้รู้จัก jQuery Template ของผมก่อนแล้ว download code จาก https://github.com/chavp/MyWebLabs/tree/master/jQueryTemplates มาทำต่อได้เลยครับ

2. หลังจากอ่านบทความแรก และ download code มาแล้วให้เปิด projects ด้วย Vistual Studio 2010 ครับ

3. เพิ่ม web form ใหม่เข้ามาครับตั้งชื่อว่า Template3.aspx

4. ไปที่ web from Template1.aspx ครับแล้วทำการ copy code ตั้งแต่ tag head จนถึง script แล้วไปวางไว้ที่ Template3.aspx ที่ได้สร้างจากขั้นตอนที่ 3 ครับ คุณจะมี code หน้าตาแบบข้างล่างนี้ที่ Template3.aspx

<head id="Head1" runat="server">
    <title></title>
    <style media="screen" type="text/css">
    .header
    {
    	background-color:Gray;
    	font-weight:bold;
    	color:White;
    	text-align:center;
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <div align="center">
       <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>
    </div>
    </form>
</body>
</html>
<script type="text/x-jquery-tmpl" id="empTemplate">
       <tr><td>${EmpID}</td><td>${Name}</td><td>${Email} </td><td>${Contact}</td></tr>
</script>
<script src="Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.tmpl.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        var EmpData = [
             { EmpID: "CHAVP0", Name: "Chav:P", Email: "Chav.P@Chavp.com", Contact: "08123456789" },
             { EmpID: "CHAVP1", Name: "Chav:Pvn", Email: "Chav.Pvn@Chavp.com", Contact: "08123456789" },
             { EmpID: "CHAVP2", Name: "Chav:Ptmk", Email: "Chav.Ptmk@Chavp.com", Contact: "08123456789" },
             { EmpID: "CHAVP3", Name: "Chav:Pty", Email: "Chav.Pty@Chavp.com", Contact: "08123456789" }
             ];
        $("#empTemplate").tmpl(EmpData).appendTo("#contentTble");
    });
</script>

ถึงตรงนี้ผมจะอธิบายความต้องการที่จะมีการใช้เงื่อนไข และเรียก JavaScript function กันก่อน คือใน template code ของผมจะมีการตรวจสอบ contact ก่อนคือถ้ามีก้ให้แสดงเลข contact แต่ถ้าไม่มีผมจะแสดงว่า ไม่พบ contact และผมจะสร้าง function หนึ่งให้นับจำนวน contact ที่ใช้ติดต่อได้ ดังนั้นขั้นตอนต่อไปผมก็ต้องกลับแก้ไข code ตามขั้นตอนดังนี้

1. แก้ไขโครงสร้างข้อมูล EmpData เล็กน้อยก่อนให้ contact เก็บข้อมูลเป็น array แล้วเติม contact เป็นตัวอย่างเพิ่มเข้าไปอีกเล็กน้อย

 $(function () {
        var EmpData = [
             { EmpID: "CHAVP0", Name: "Chav:P", Email: "Chav.P@Chavp.com", Contact: ["08123456789"] },
             { EmpID: "CHAVP1", Name: "Chav:Pvn", Email: "Chav.Pvn@Chavp.com", Contact: [] },
             { EmpID: "CHAVP2", Name: "Chav:Ptmk", Email: "Chav.Ptmk@Chavp.com", Contact: ["08123456789", "0123456789"] },
             { EmpID: "CHAVP3", Name: "Chav:Pty", Email: "Chav.Pty@Chavp.com", Contact: ["08123456789", "08123456789", "08123456789"] }
             ];
        $("#empTemplate").tmpl(EmpData).appendTo("#contentTble");
    });

2. แก้ไข tag table โดยเพิ่ม field ที่แสดงจำนวน contact ที่สามารถใช้ติดต่อได้

<tr><td>Employee ID</td><td>Employee Name</td><td>Email</td><td>Contact</td><td>Available Contact Numbers</td></tr>

3. เพิ่ม function JavaScript นับจำนวน contact ลงไป

   function getCount() {
        var retval = this.data.Contact.length;
        return ((retval > 0) ? retval : "ไม่มีหมายเลข contact ที่ไว้ประโยชน์ได้");
    }

4. กลับไปแก้ template เพื่อแสดง contact ตามเงื่อนไข และเรียกใช้ function getCount ตามต้องการครับ

<script type="text/x-jquery-tmpl" id="empTemplate">
       <tr>
            <td>${EmpID}</td>
            <td>${Name}</td>
            <td>${Email} </td>
            <td align="center">
                {{if Contact.length > 0}}
                    ${Contact}
                {{else}}
                    -
                {{/if}}
            </td>
            <td align="center">
                ${getCount()}
            </td>
        </tr>
</script>

OK เสร็จแล้วครับ คราวนี้ก็ลอง run web form Template3.aspx ขึ้นมาแบบนี้ครับ

ขอบคุณครับ 😉

#asp-net, #javascript, #jquery

ASP.NET กับ jQuery: แสดง array ข้อมูลโดยการอ้างอิง template อื่นร่วมกันสร้างเอกสาร

สวัสดีครับ

บทความนี้แสดงการสร้างเอกสาร template ซ้อน template หรือ nested template ก็คือ เราสามารถอ้างอิง template อื่นเข้ามาใน template ที่กำลังสร้างได้เลย นั่นหมายความว่าเราไม่จำเป็นต้องสร้าง template ซ้ำเดิมอีกต่อไป ถ้าเรามี template ที่สร้างเอกสารออกมาตามที่เราต้องการไว้แล้วนั่นเอง

ลงมือสร้างกันเลย

1. อ่านบทความ ASP.NET กับ jQuery: แนะนำให้รู้จัก jQuery Template กันก่อนนะครับแล้วเตรียมตัวตามนั้น อ่านไป ลงมือทำไป  ให้เวลา 15 นาที ถ้าขี้เกียจก็ load source code มาอ่านเองได้เลยจาก https://github.com/chavp/MyWebLabs/tree/master/jQueryTemplates

2. เมื่ออ่านบทความจากข้อแรกเสร็จแล้วคุณจะต้องมี projects jQueryTemplates และมี page ที่ชื่อว่า Template1.aspx อยู่ 1 page เตรียมไว้เรียบร้อยแล้ว พอลอง run มันจะแสดงข้อมูลออกมาเป็น table ที่มี field อยู่ 4 field ได้แก่ Employee ID, Employee Name, Email และ Contact พร้อมข้อมูลอยู่ 4 record ถึงตรงนี้ ผมต้องการเพิ่มข้อมูล Contact อีก 1 contact เพื่อสำรองไว้ถ้าเกิด contact แรกต่อไม่ติด ผมก็จะใช้ contact ที่สอง เอาละทีนี้ก็ดำเนินการต่อ

3. กลับไปที่ projects ของเราครับเพิ่ม web form ใหม่เข้าไป ตั้งชื่อว่า Template2.aspx ตามภาพ

4. ให้ copy code จาก file Template1.aspx ตั้งแต่ tag head ยัน script แล้วไป paste ไว้ที่ web form ใหม่ Template2.aspx ของเราเลยครับ ตามภาพ

5. ไปที่ script block ของ jQuery ready function แก้ไขโครงสร้างข้อมูล employee ให้เพิ่ม contact ตัวที่สองเข้าไป ซึ่งผมได้เปลี่ยนแปลงโครงสร้างของ contact ให้เป็นแบบ array  จึงได้ code แบบนี้

<script type="text/javascript">
    $(function () {
        var EmpData = [
             { EmpID: "CHAVP0", Name: "Chav:P", Email: "Chav.P@Chavp.com", Contact: ["08123456789", "02123456789"] },
             { EmpID: "CHAVP1", Name: "Chav:Pvn", Email: "Chav.Pvn@Chavp.com", Contact: ["08123456789", "02123456789"] },
             { EmpID: "CHAVP2", Name: "Chav:Ptmk", Email: "Chav.Ptmk@Chavp.com", Contact: ["08123456789", "02123456789"] },
             { EmpID: "CHAVP3", Name: "Chav:Pty", Email: "Chav.Pty@Chavp.com", Contact: ["08123456789", "02123456789"] }
             ];
        $("#empTemplate").tmpl(EmpData).appendTo("#contentTble");
    });
</script>

6. เอาละครับ ลองทดสอบ web form Template2 กันดูครับเลย

จากที่เห็นในตาราง ที่ column contact แสดงข้อมูลตามที่ผมต้องการเรียบร้อยแล้ว แต่รู้สึกว่าจะอ่านยากไปหน่อย ผมเลยต้องแต่งเติมมันอีกเล็กน้อย โดยให้ส่วน contact นี้แสดงเป็น list รายการที่อ่านง่ายขึ้น ต่อไปจะเป็นการสร้างและใช้ nested template กันละทีนี้

สร้าง template และใช้งาน template โดยการอ้างอิง

1. สร้าง template เพื่อแสดงข้อมูล contact ในแบบ list ข้อมูล

<script type="text/x-jquery-tmpl" id="contactTemplate">
    <ul>
        {{each Contact}}
            <li>${$value}</li>
        {{/each}}
    </ul>
</script>

อธิบายกันเล็กน้อย: เริ่มจาก template จะ render <ul> แล้วตามด้วยการ loop โดยใช้คำสั่ง {{each Contact}} เพื่อท่องเข้าไปใน list ของ contact แล้วแสดง value ของแต่ละ contact  ออกมาด้วย template tag ${$value} พร้อมกับปิดท้ายด้วย </li> พอท่องไปจนหมดแล้วปิดคำสั่ง loop  ด้วย {{/each}} จบส่วนแสดงรายการก็ปิดท้ายด้วย tag </ul> ครับ

2. กลับไปแก้ไข template empTemplate ในส่วนที่ต้องแสดงข้อมูล contact ให้อ้างอิงมาที่ template contactTemplate ใหม่ของเรา

<script type="text/x-jquery-tmpl" id="empTemplate">
       <tr><td>${EmpID}</td><td>${Name}</td><td>${Email} </td><td align="left">{{tmpl '#contactTemplate'}}</td></tr>
</script>

อธิบายกันเล็กน้อย: การอ้างอิง template ใช้คำสั่ง {{tmpl ‘#contactTemplate’}} เจ้า ‘#contactTemplate’ ก็คือ jQuery selector แบบใช้ id ก็คือ contactTemplate นั่นเองครับ กลับมาลอง run web page Template2.aspx อีกครั้ง ก็จะได้หน้าตา table ที่อ่านง่ายแล้วตามที่ผมต้องการ

เสร็จแล้วครับ การแสดง array ข้อมูลโดยการอ้างอิง template อื่นร่วมกันสร้างเอกสาร ผมก็ขอจบบทความเพียงเท่านี้

ขอบคุณครับ 😉

…ทุ่มเทเต็ม 100 ให้กับการทำงาน เมื่อคุณได้ทำงาน

ทุ่มเทเต็ม 100 ให้กับการค้นคว้า เมื่อคุณได้ค้นคว้า

และทุ่มเทเต็ม 100 ให้กับการเล่น เมื่อคุณได้เล่น…”

— Chav:P —

#asp-net, #javascript, #jquery

ASP.NET กับ jQuery: แนะนำให้รู้จัก jQuery Template

สวัสดีครับ

jQuery Template มันก็คือ jQuery library plugin ตัวหนึ่งที่จะมาช่วยให้เราสามารถสร้างเอกสารใดๆเพื่อแสดงข้อมูล หรือวัตถุประสงค์ใดๆ ก็ตามแต่ที่ต้องการ นำข้อมูลมาสร้างเอกสารขึ้นในรูปแบบที่กำหนดไว้แล้วจาก template ที่ฝั่ง client ได้นั่นเองครับ นั่นหมายความว่า เราสามารถสร้างงานการนำเสนอข้อมูลที่ปกติจะทำการประมวลผลจากฝั่ง server แล้วเขียนส่งออกไปเป็น HTML เพื่อให้มันไปแสดงผลที่ browser บนฝั่งของ client เองได้ง่ายขึ้น โดยสร้างแค่ template ไว้แล้ว มันยังสามารถแชร์ใช้ร่วมกันใน javascript ที่จุดใดๆของ client logic ได้เลยทันที อ่านง่าย แก้ไขง่าย ลดต้นทุนเขียน code  และก็ยังลดต้นทุนข้อมูลที่จะต้องทำการประมวลผลเป็น HTML ให้เสร็จก่อนจากฝั่ง server เพื่อส่งไปยังฝั่ง client ได้อีก

บทความชุด jQuery Template ที่ผมจะสำเสนอนี้จะประกอบไปด้วย หัวข้อต่างๆตามนี้

เริ่มต้น Projects…

1. สร้าง ASP.NET website แบบ ASP.NET Empty Web Application ใน Visual Studio 2010 ตั้งชื่อว่า jQueryTemplates ตามภาพ

2. สร้าง folder Scripts  ใน project นี้ โดยไปที่ Solution Explorer  click ขวาที่ projects jQueryTemplates > Add > New Folder ตั้งชื่อว่า Scripts  เพื่อไว้เก็บ jQuery library และ JavaScrip file ต่างๆไว้ในนี้ครับ

3. download jQuery Template plugin จาก https://github.com/jquery/jquery-tmpl เมื่อ download มาเสร็จแล้วให้  แตก zip ออกมา copy file jquery.tmpl.min.js ไป paste ไว้ที่ folder Scripts ที่ได้สร้างเตรียมไว้แล้วจากขั้นตอนที่ 2

4. downlaod jQuery library จาก http://code.jquery.com/jquery-1.6.2.min.js แล้ว save ไว้ที่ folder Scripts ของ projects ครับ

5. เมื่อต้องการนำ jQuery และ template plugin library เข้ามาใช้ใน page ASP.NET ใดๆก็ตาม จะต้อง include เข้ามาใน page คล้ายๆ code ข้างล่างนี้

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

มี 2 หนทางในการสร้าง template ได้แก่

  • Inline template คือสร้าง template ไว้ใน block <script type=”text/x-jquery-tmpl”> ของ ASPX page ไปเลย กับ
  • External template คือสร้าง template ไว้ใน file *.htm/*.html/*.txt แยกออกมาเก็บไว้ต่างหาก

ตอนนี้เรามาทำความรู้จัก tag ที่สำคัญของ methods และ template เล็กน้อยกันก่อน

jQuery.tmpl([data],[options]): นี่เป็น method ที่จะดำเนินการกับ data ที่ match ตั้งแต่ element แรกและ ดำเนินการแสดงผล(render)ข้อมูล ออกมาตาม template ที่กำหนด ซึ่งรับ 2 parameter ได้แก่

  •  data: คือ data เพื่อ render มันสามารถเป็นทั้ง array หรือ object ตัวเดียว
  • options: คือ option ของ method นี้มีค่ามาเป็นคู่ key-value

jQuery .tmpl มี method ที่สามารถเปลี่ยนแปลงการแทนที่ใน DOM ได้คือ .appendTo(), .prependTo(), .insertAfter(), หรือ .insertBefore() ตามที่เราต้องการ

jQuery.tmpl(template, [data], [options]): method นี้ช่วย ดำเนินการแสดงข้อมูล(render data) ในแบบเอกสาร HTML markup โดยเฉพาะ มันรับ 3 parameter คือ

  • template: เป็น HTML markup ที่ใช้เป็น template
  • data: เป็นข้อมูลที่ต้องการนำเสนอ เป็นได้ทั้ง array หรือ object ตัวเดียว
  • options: คือ option ของ method นี้เป็นคู่ของ key-value

{{tmpl( [data], [options] ) template}} content {{/tmpl}}: เจ้า {{tmpl}} เป็น  template tag ไว้ใช้กับ nested template หรือ template ซ้อน มันมีไว้ใช้ตอน render template ลูกใน content ของ template หลัก มี 3 parameter

  • data: คือ data เพื่อ render มันสามารถเป็นทั้ง array หรือ object ตัวเดียว
  • options: คือ option เป็นคู่ของ key-value
  • template: เป็น HTML markup หรือ text ก็ได้เป็น template ในการ render ข้อมูล

${ fieldNameOrExpression }: เป็น template tag เพื่อใช้ evaluate field ของ javascript หรือระบุชื่อ field เพือแสดง เมื่ออยู่ใน template สำหรับการนำเสนอข้อมูล

{{each}} และ {{/each}}: เป็น template tag ไว้ใช้เมื่อต้องการวน loop เข้าถึงข้อมูลอยู่ใน collection ทีละตัว

{{if}}, {{else}}, {[/if}}: เป็น template tag ไว้ใช้เมื่อต้องการแสดงเงื่อนไข ใน template block

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

การใช้ jQuery Template เพื่อแสดงข้อมูลง่ายๆ

การลงมือทำครั้งแรกนี้ ผมจะใช้ jQuery Template เพื่อแสดงข้อมูล เป็น table ออกมา โดยนิยาม template แบบ inline หรือประกาศ template ไว้ใน ASP.NET Page นี้เลย ผมจะสร้าง ตัวอย่างข้อมูลชุดหนึ่งขึ้น และ แสดงมันออกมาด้วย template เดียวกัน ดูผลลัพย์ที่เสร็จแล้ว มีหน้าตาตามภาพข้างล่างนี้

1. เพิ่ม web form Template1.aspx เข้ามาใน project นี้

2. include jQuery library และ jQuery template plugin library เข้ามาที่ web form นี้

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

3. นิยาม data Emplyee ไว้เป็น array  ที่ด้าน client เพื่อเป็นตัวอย่างข้อมูลง่ายๆ ไว้ใช้นำเสนอ โดยมี field ตามนี้ EmployeeID, Name, Email และ Contact เขียนเป็น code  javascript แบบนี้

<script type="text/javascript">
    $(function () {
        var EmpData = [
            { EmpID: "CHAVP0", Name: "Chav:P", Email: "Chav.P@Chavp.com", Contact: "08123456789" },
            { EmpID: "CHAVP1", Name: "Chav:Pvn", Email: "Chav.Pvn@Chavp.com", Contact: "08123456789" },
            { EmpID: "CHAVP2", Name: "Chav:Ptmk", Email: "Chav.Ptmk@Chavp.com", Contact: "08123456789" },
            { EmpID: "CHAVP3", Name: "Chav:Pty", Email: "Chav.Pty@Chavp.com", Contact: "08123456789" }
        ];
    });
</script>

4. บทความนี้ผมจะนำเสนอในรูปแบบของตาราง ดังนั้นใส่ HTML table และ header ลงไปใน web form เพื่อแสดงข้อมูล Employee

<form id="form2" runat="server">
    <div>
        <div align="center">
            <table border="1" cellspacing="2" cellpadding="2" id="Table1">
                <tr>
                    <td>Employee ID</td>
                    <td>Employee Name</td>
                    <td>Email</td>
                    <td>Contact</td>
                </tr>
            </table>
        </div>
    </div>
</form>

5. เติม CSS เพื่อแสดง header ให้สวยงามอีกเล็กน้อย

<style media="screen" type="text/css">
    .header
    {
        background-color:Gray;
        font-weight:bold;
        color:White;
        text-align:center;
    }
</style>

6. สร้าง template เพื่อดำเนินการแสดง(render) ข้อมูลทีละตัวให้แสดงในรูปแบบเหมือนๆกัน โดยจะให้แสดงในรูปแบบของ tag HTML ของ row ที่จะต่อเข้าไปเรื่อยๆใน contentTble ที่สร้างเตรียมไว้จากขั้นตอนที่ 4

<script type="text/x-jquery-tmpl" id="Script1">
    <tr><td>${EmpID}</td><td>${Name}</td><td>${Email} </td><td>${Contact}</td></tr>
</script>

7. กลับไปที่ block ของ jQuery ready function เพิ่ม code เพื่อ render ข้อมูล EmpData ที่ได้สร้างไว้จากขั้นตอนที่ 3 และ render ด้วย empTemplate จากขั้นตอนที่ 6

<script type="text/javascript">
    $(function () {
        var EmpData = [
            { EmpID: "CHAVP0", Name: "Chav:P", Email: "Chav.P@Chavp.com", Contact: "08123456789" },
            { EmpID: "CHAVP1", Name: "Chav:Pvn", Email: "Chav.Pvn@Chavp.com", Contact: "08123456789" },
            { EmpID: "CHAVP2", Name: "Chav:Ptmk", Email: "Chav.Ptmk@Chavp.com", Contact: "08123456789" },
            { EmpID: "CHAVP3", Name: "Chav:Pty", Email: "Chav.Pty@Chavp.com", Contact: "08123456789" }
        ];

    });
    $("#empTemplate").tmpl(EmpData).appendTo("#contentTble");
</script>

เป็นอันเสร็จพิธีครับ เมื่อคุณลอง run ดูก็จะได้ผลลัพย์เมือนกับที่ได้แสดงไว้แล้วในตอนต้นครับ

Source Code: https://github.com/chavp/MyWebLabs/tree/master/jQueryTemplates

ขอบคุณครับ 😉

“การได้รู้เป็นแค่ จุดเริ่มต้นของความสำเร็จ

แต่การลงมือทำ ทำ ทำ และก็ทำคือ จุดจบของความสำเร็จ”

— #:P —

#asp-net, #javascript, #jquery