ASP.NET Update Panel Kullanımı

Bu yazıda update panelin kullanımına bir örnek vereceğiz.Öncellikle sayfamıza ScriptManager ve UpdatePanel ekleyelim.

UpdatePanel

UpdatePanel

UpdatePanel içinde content template oluşturalım ve içine birer panel atalım ve update panelin dışına bir adet button atalım.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="UpdatePanel.Default_aspx" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <div>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                  <asp:Panel ID="Panel1" runat="server">

                      <p>Panel 1 Açık</p>
                  </asp:Panel>
                   <asp:Panel ID="Panel2" runat="server">

                    <p>Panel 2 Açık</p>
                   </asp:Panel>
            </ContentTemplate>

            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
            </Triggers>
        </asp:UpdatePanel>

        <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
        
    </div>
    </form>
</body>
</html>

Yukarıdaki gördüğünüz trigger tag’i hangi kontrolün update paneli tetikleyeceğini belirliyor.Aşağıda gördüğünz gibi collection kısmına girip hangi kontrolün hangi olayında updatepanel’in tetiklneceğini belirtebiliyoruz.

trigger

trigger

trigger

Son olarak code kısmında button’un click event’inde yapacaklarımızı yazalım

public partial class Default_aspx : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            Panel2.Visible = false;
        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            if (Panel1.Visible == false)
            {
                Panel1.Visible = true;
            }
            else
            {
                Panel1.Visible =false;

                Panel2.Visible = true;
            }
        }
    }

Bu kod ile butona her tıkladığımızda diğer panel açılacak ve sayfa postback olmayacak , son olarak isterseniz buton kontrolünü panelin içine de atabilirsiniz böylelikle trigger kullanmadan ChildrensAsTrigger özelliğinin True olması nedeniyle updatePanel otomatik olarak tetiklenecektir.