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 —

Advertisements

#asp-net, #javascript, #jquery