Visual C# (.NET)

ASP.NET’te AJAX ve Asenkron İşlemler (ScriptManager, UpdatePanel, ContentTemplate, Triggers, AsyncPostBackTrigger, PostBackTrigger)

 C#‘ta AJAX ve Asynchronous işlemleri kullanabilmek için aşağıdaki ScriptManager kod parçacığını asenkron işlem yapacağınız her sayfaya eklemeniz gerekiyor ya da bir kere MasterPage‘ye ekleyip her sayfaya ayrı ayrı ekleme derdinden kurtulabilirsiniz.

<asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager>

 Ardından aşağıdaki UpdatePanel kod parçacığıyla sayfamızda asynchron şekilde postback yapmadan kod bölümleri çalıştırabiliriz.

<asp:UpdatePanel ID="updatePanel1" runat="server">
   <ContentTemplate>
         <!-- Buraya gerekli içerikler eklenecek -->
   </ContentTemplate>
</asp:UpdatePanel>

 Postback olmadan asp.net’te panelimizi tetikleyecek kontrolümüz <ContentTemplate></ContentTemplate> kodunun dışında ise, aşağıdaki kod parçacığıyla <Triggers></Triggers> tagları arasına UpdatePanel içindeki içeriğimizi tetikleyecek kontrolümüzü ve dilersek ekstra olarak kontrolün tetikleme çeşidini yazarak asenkron çağrıyı ilgili kontrolün sadece bizim belirttiğimiz event‘ta yapılmasını sağlayabiliriz. Bir de UpdatePanel tag’ine UpdateMode=”Conditional” ChildrenAsTriggers=”false” propertylerini eklememiz gerekiyor. Çünkü yazılmayınca UpdateMode default Always ve ChildrenAsTriggers default true olarak geliyor ve UpdatePanel dışından güncelleme yapamıyoruz.

 UpdatePanel’in  “ChildrenAsTrigger” özelliğinin default değeri “true” olduğu için (“UpdateMode” özelliğinin de default olarak “Always”), UpdatePanel’i tetikleyecek kontrol eğer UpdatePanel içerisinde yer alıyorsa herhangi bir trigger yazmadan otomatik olarak UpdatePanel’i tetikleyecektir. Eğer bu değer “false” yapılırsa, o zaman UpdatePanel’i tetikleyecek olan kontrol, UpdatePanel içinde dahi olsa otomatik olarak tetiklenmez ve trigger alanında belirtmemiz gerekecek.Tabi “ChildrenAsTrigger” özelliğinin “false” olabilmesi için “UpdateMode” özelliğinin “Conditional“a çekilmesi gerekmektedir.

<asp:UpdatePanel ID="updatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
   <ContentTemplate>
         <!-- Buraya gerekli içerikler eklenecek -->
   </ContentTemplate>
   <Triggers>
         <!-- Bu kısımda UpdatePanel'e olaylar bağlanır -->
   </Triggers>
</asp:UpdatePanel>

 UpdatePanel içerisindeki kontrolü Codebehind (.cs)(C#) tarafında değiştirebilmek için ise aşağıdaki kod parçacığını kullanmalısınız. Örneğin, UpdatePanel içerisindeki TalimatNo alan içeriği boşaltılacak, boşaltma işlemi yapıldıktan sonra, TalimatNo kontrolü sayfada hangi UpdatePanel kontrolünün içindeyse onun ID’si ile birlikte Update() komutu kullanılır.

TalimatNo.Text = null;
UpdatePanel2.Update();

 Şimdi de daha komplex bir örnek verelim, aşağıdaki kodu Visual Studio’da aspx sayfanıza kopyalayıp inceleyebilirsiniz. Ctrl+K+D kısayolu ile kodu editörde daha anlaşılır hale getirebilirsiniz.

asp.net grid ajax örnek

Gridli, İki Butonlu, İki UpdatePanelli, Asenkron Advanced Kod Örneği:

<div id="PanelTalimatButton" class="tahpanel01 tah001 tahback <%=RadButIslem.SelectedIndex == 0 ? "invisible" : "" %>" style="margin-top: 5px">
    <div class="divRow">
        <div class="divColR wBilgiLabel">
            <asp:Label ID="Label1" runat="server" Text="Poliçe No :" Style="margin-top: 5px"></asp:Label>
        </div>
        <div class="divColL">
            <asp:TextBox ID="PoliceNo" runat="server" onkeypress="if(isNaN(String.fromCharCode(event.keyCode))) return false;" Width="100px" />
        </div>
        <div class="divColL">
            <telerik:RadButton ID="PoliceSorgula" runat="server" Text="Poliçe No'dan Talimatları Getir" Skin="Office2007" OnClick="PoliceSorgula_Click">
                <Icon PrimaryIconCssClass="rbSearch" PrimaryIconLeft="4" PrimaryIconTop="4"></Icon>
            </telerik:RadButton>
        </div>
    </div>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
        <ContentTemplate>
            <asp:Panel ID="TalimatPanel" runat="server" Visible="False">
                <div class="divColL" style="width: 108px;"></div>
                <div class="divColR">

                    <asp:GridView ID="talimat_grd" runat="server" AlternatingRowStyle-BackColor="#99ccff"
                                  AutoGenerateColumns="False" CellPadding="2" CellSpacing="2"
                                  Font-Bold="True" ForeColor="#333333" GridLines="None"
                                  Style="margin-right: 48px" Width="146px" OnRowCommand="talimat_grd_RowCommand" DataKeyNames="talimat_no_sid"
                                  ShowFooter="false" Visible="true">
                        <AlternatingRowStyle BackColor="#99CCFF"></AlternatingRowStyle>
                        <Columns>
                            <asp:TemplateField HeaderText="Talimat No">
                                <ItemTemplate>
                                    <asp:Label ID="LblTalimatNo" runat="server" Text='<%# Bind("TALIMAT_NO_SID") %>'></asp:Label>
                                </ItemTemplate>
                                <HeaderStyle Font-Size="9pt" HorizontalAlign="Left" Wrap="False" />
                                <ItemStyle HorizontalAlign="Left" />
                            </asp:TemplateField>
                            <asp:TemplateField ShowHeader="False">
                                <ItemTemplate>
                                    <asp:LinkButton ID="LbSec" runat="server" CausesValidation="False" CommandName="Sec" CommandArgument="<%# ((GridViewRow) Container).RowIndex %>" Text="Seç"></asp:LinkButton>
                                </ItemTemplate>
                                <ItemStyle HorizontalAlign="Left" />
                            </asp:TemplateField>
                        </Columns>
                        <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                        <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" Height="25" />
                        <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
                        <RowStyle BackColor="#EFF3FB" Font-Size="9" Height="25" />
                        <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
                        <SortedAscendingCellStyle BackColor="#F5F7FB" />
                        <SortedAscendingHeaderStyle BackColor="#6D95E1" />
                        <SortedDescendingCellStyle BackColor="#E9EBEF" />
                        <SortedDescendingHeaderStyle BackColor="#4870BE" />
                    </asp:GridView>

                </div>
            </asp:Panel>
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="PoliceSorgula" EventName="Click" />
        </Triggers>
    </asp:UpdatePanel>

    <div class="divRow">
        <div class="divColR wBilgiLabel">
            <asp:Label ID="Label6" runat="server" Text="Talimat No :" Style="margin-top: 5px"></asp:Label>
        </div>
        <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
            <ContentTemplate>
                <div class="divColL">
                    <asp:TextBox ID="TalimatNo" runat="server" onkeypress="if(isNaN(String.fromCharCode(event.keyCode))) return false;" Width="100px" />
                </div>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="talimat_grd" EventName="RowCommand" />
                <asp:AsyncPostBackTrigger ControlID="PoliceSorgula" EventName="Click" />
            </Triggers>
        </asp:UpdatePanel>
        <div class="divColL">
            <telerik:RadButton ID="TalimatSorgula" runat="server" Text="Talimat Sorgula" Skin="Office2007" OnClick="TalimatSorgula_Click">
                <Icon PrimaryIconCssClass="rbSearch" PrimaryIconLeft="4" PrimaryIconTop="4"></Icon>
            </telerik:RadButton>
        </div>
    </div>
</div>
You can share and save this page with:
Tags: , , , , , , , , , , , , , , , , , , , , , , , , , , , ,

One Comment

  1. It’s going to be ending of mine day, however before end I
    am reading this fantastic article to increase my know-how.

Leave a Reply

Your email address will not be published. Required fields are marked *

*