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 ขึ้นมาแบบนี้ครับ

ขอบคุณครับ 😉

Advertisements

#asp-net, #javascript, #jquery