ASP.NET กับ jQuery: เปลี่ยน URL ใน hyperlink ได้ทันทีขณะ Runtime

แรงจูงใจ …

เมื่อเลือก item บน page แล้วเปลี่ยน link ไปยัง web page ตามที่เลือกแล้วทันที

เริ่มต้นทำกันเลย …

1. เพิ่มสร้าง page เข้าไปใน projects ตั้งชื่อว่า UpdatingUrlRuntime.aspx แล้วเติม code เข้าไปตามนี้

    <form id="form1" runat="server">
    <div align="left">
        <fieldset style="width: 300px; height: 200px;">
            <table cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td width="10px">
                    </td>
                    <td>
                        <p>
                            Get your news updates here:</p>
                        <asp:RadioButtonList ID="RadioButtonList1" runat="server">
                            <asp:ListItem Text="CNN" Value="http://www.cnn.com"></asp:ListItem>
                            <asp:ListItem Text="BBC" Value="http://www.bbc.co.uk"></asp:ListItem>
                            <asp:ListItem Text="Channel News Asia" Value="http://www.channelnewsasia.com"></asp:ListItem>
                        </asp:RadioButtonList>
                        <br />
                        <asp:HyperLink ID="HyperLink1" runat="server">คลิกเลยเซ่!</asp:HyperLink>
                    </td>
                </tr>
            </table>
        </fieldset>
    </div>
    </form>

2. ลอง run page ขึ้นมา

เติมกลไกเข้าไป …

1. ไปที่ code function $(document).ready แล้วใส่ code jQuery ค้นหา radio แล้ว bind เหตุการณ์ change

$("input[type=radio]").bind("change", function() {

2. จาก scope ใน code ด้านบนให้ค้น a ก็คือ hyperlink แล้ว set attribute href เท่ากับ value ของ radio นี้ แล้ว ปิด scope change และ ready

$("a").attr("href",$(this).val());

});
});

3. code javascript ที่เสร็จแล้ว

<script type="text/javascript">
    $(document).ready(function () {
        $("input[type=radio]").bind("change", function () {
            $("a").attr("href", $(this).val());
        });
    });
</script>

ทำงานยังไง …

เปิด page ขึ้นมาแล้วลอง click เลือก radio แล้วจะเปิดปุ่ม link ให้ click ที่ “คลิกเลยเซ่!” ตามภาพ

… ขอบคุณครับ …

Advertisements

#asp-net, #jquery