This article is currently in the process of being translated into Thai (~98% done).

Controls:

UpdatePanel control

The UpdatePanel control เป็น control ที่สำคัญที่สุดของ ASP.NET AJAX package ซึ่งเป็นส่วนประกอบสำคัญของ AJAX'ify controls สามารถเรียกใช้งานในบางส่วนของ View ได้ ดังที่อธิบายไปในบทของ Hello world และในบทนี้ เราจะเรียนรู้ AJAX แบบเจาะลึกมากขึ้น

แท็ก <asp:UpdatePanel> แบ่งออกเป็น 2 แท็กย่อยได้แก่ ContentTemplate และ Triggers tags โดย ContentTemplate tag เป็นหนึ่งแท็กที่จำเป็น เพราะเป็นส่วนติดต่อกับ Panel The content เป็นเหมือน Object ที่จะปรากฎบนหน้าเพจให้เราดำเนินการตามที่ต้องการ The Triggers tag จะทำหน้าที่กำหนด Trigger ที่เหมาะสมสำหรับการใช้งานร่วมกับ Panel เพื่อความเข้าใจมากขึ้นให้ศึกษาจากคำสั่งด้านล่าง

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>UpdatePanel</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <asp:UpdatePanel runat="server" id="UpdatePanel" updatemode="Conditional">
        <Triggers>
            <asp:AsyncPostBackTrigger controlid="UpdateButton2" eventname="Click" />
        </Triggers>
            <ContentTemplate>
                <asp:Label runat="server" id="DateTimeLabel1" />
                <asp:Button runat="server" id="UpdateButton1" onclick="UpdateButton_Click" text="Update" />               
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdatePanel runat="server" id="UpdatePanel1" updatemode="Conditional">           
            <ContentTemplate>
                <asp:Label runat="server" id="DateTimeLabel2" />
                <asp:Button runat="server" id="UpdateButton2" onclick="UpdateButton_Click" text="Update" />
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

ในส่วนของ CodeBehind. ให้เพิ่มคำสั่งนี้ลงไป:

protected void UpdateButton_Click(object sender, EventArgs e)
{
    DateTimeLabel1.Text = DateTime.Now.ToString();
    DateTimeLabel2.Text = DateTime.Now.ToString();
}

หลังจากนั้นลองรันโปรแกรม คุณจะเห็นปุ่ม Button ปรากฎปุ่มแรกพร้อมกับ datestamp พร้อมๆกับปุ่ม Btutton ตัวที่สองปรากฎขึ้นมา เพราะอะไรกันล่ะ? เราได้สร้าง Panel ให้อัพเดตตามเงื่อนไข นั่นก็หมายความว่าแต่ละ Content จะมีการเปลี่ยนแปลงตามเงื่อนไขที่กำหนดเท่านั้น หรือ triggers อันใดอันหนึ่งถูกส่งไปยังระบบ

การทำงานเป็นดังนี้ UpdatePanel ตัวแรกจะ trigger ไปยังปุ่มตัวที่สอง โดยที่จะคอยรับ Parameter จาก Panel ตัวแรกก่อนถึงปรากฎ Panel ตัวถัดไป

แท็ก AsyncPostBackTrigger เป็นแท็กที่เข้าใจง่าย แบ่งออกเป็น 2 แอนทริบิว ได้แก่ controlid เป็นส่วนที่ใช้อ้างอิงการ trigger และ eventname ทำหน้าที่ระบุ eventtype สำหรับการ Trigger หากคุณต้องการให้เนื้อหาของ UpdatePanel เปลี่ยนแปลงใดๆ คุณสามารถเปลี่ยนการตั้งค่า updatemode ได้ตลอดเวลา

โดยปกติแล้ว คุณสามารถกำหนด UpdatePanels ให้สามารถเปลี่ยนแปลงบาง Content ที่คุณต้องการได้โดยไม่ต้องคลุมทั้งหน้า UpdatePanel และสามารถใช้ได้ร่วมกับหลาย Panel เพียงแค่กำหนดเงื่อนไขให้สอดคล้องกัน

This article has been fully translated into the following languages:

Is your preferred language not on the list? Click here to help us translate this article into your language!

Metadata

UpdatePanel control