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 —

Advertisements

#asp-net, #javascript, #jquery