Makale Özeti

Bu makalede, GridView ile listelenen haber kategorilerinin üzerine gelindiği zaman kategoriye ait haberlerin AJAX Hover kontrolü aracılığı ile listelenmesi anlatılacaktır.

Makale

AJAX HoverMenu Kontrolünün Veritabanı İle Kullanımı

Bu makalede, GridView ile listelenen haber kategorilerinin üzerine gelindiği zaman kategoriye ait haberlerin AJAX Hover kontrolü aracılığı ile listelenmesi anlatılacaktır.

İlk olarak sayfamıza bir GridView yerleştirip kategorilerin listelenmesini sağlanır. Kategorileri listelemek için Label kontrolü kullanılır ve bu Label kontrolü de bir Panel içerisine yerleştirilir. Label kontrolünün Panel içerisine yerleştirilmesinin amacı AJAX Hover Extender’ın hedef kontrolü olarak kullanılacak olmasıdır.

HaberKategoriKod’un kullanılmasının sebebi ise verilerin çekildiği tabloların birbirine bağlı olmasıdır ve listelemede HaberKategoriKod’un görünmesi istenmediği için de visible özelliği false olarak belirlenir.

<ajaxToolkit:HoverMenuExtender ID="HoverMenuExtender1"  
                               runat="server" 
                               PopupControlID="PanelPopup" 
                               TargetControlID="panelKategori" 
                               PopupPosition="Right" 
                               PopDelay="50">
<asp:SqlDataSource ID="SqlDataSourceKategori" runat="server" 
                   ConnectionString="<%$ ConnectionStrings:conStrHaber %>"
                   SelectCommand="SELECT haberKategoriAd, haberKategoriKod FROM tblHaberKategori">
</asp:SqlDataSource >
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"     
                 DataKeyNames="haberKategoriKod" 
                 DataSourceID="SqlDataSourceKategori">
    <Columns>
       <asp:TemplateField>
          <ItemTemplate>
            <asp:Label ID="lblKod" runat="server" 
                          Visible="false" 
                          Text='<%# Eval("haberKategoriKod") %>' />
            <asp:Panel runat="server" ID="panelKategori" >
            <asp:Label ID="lblKategoriAd" runat="server" Text='<%# Eval("haberKategoriAd") %>' />
           </asp:Panel>
          </ItemTemplate>
       </asp:TemplateField>
  </Columns>
</asp:GridView>

Kategorilerin üzerine gelindiği zaman açılacak olan bilgilerin görünmesi için AJAX HoverMenu Extender kontrolünün PopupControlID özelliğinin belirlenmesi gerekir. Bunun için GridView kontrolünün TemplateField alanı içerisine bir Panel kontrolü ve bu Panel içerisine de kategorilere ait haberlerin listelenmesini sağlayacak olan ikinci bir GridView yerleştirilir. Burada dikkat edilmesi gereken nokta, ikinci GridView kontrolüne yüklenen verilerin birinci GridView`deki “lblKod” kontrolünü parametre olarak kullanacak olmasıdır.

<asp:Panel ID="PanelPopup" runat="server" BackColor="lightpink">
     <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
                           ConnectionString="<%$ ConnectionStrings:conStrHaber %>" 
                           SelectCommand="SELECT TOP 10 haberBaslik, haberTarih FROM tblHaber WHERE (haberKategoriKod = @haberKod)">
        <SelectParameters>
           <asp:ControlParameter ControlID="lblKod" Name="haberKod" PropertyName="Text" />
        </SelectParameters>
    </asp:SqlDataSource>
    <asp:GridView ID="GridView2" ShowHeader="false" runat="server" 
                     DataSourceID="SqlDataSource1" 
                     AutoGenerateColumns="false">
      <Columns>
         <asp:TemplateField>
            <ItemTemplate>
               <asp:Label ID="lblSaat" runat="server" Text='<%# Eval("haberTarih") %>' />                                         
               <asp:Label ID="lblBaslik" runat="server" Text='<%# Eval("haberBaslik") %>'/>
        </ItemTemplate>
     </asp:TemplateField>
   </Columns>
 </asp:GridView>
</asp:Panel> 

Ve en son olarak da birinci GridView kontrolünün TemplateField alanının içerisine AJAX HoverMenu kontrolü eklenir.

     
<ajaxToolkit:HoverMenuExtender ID="HoverMenuExtender1"  
                               runat="server" 
                               PopupControlID="PanelPopup" 
                               TargetControlID="panelKategori" 
                               PopupPosition="Right" 
                               PopDelay="50" />
 

Proje çalıştırıp herhangi bir kategori üzerine gelindiğinde ise görünüm aşağıdaki gibi olur.



Özlem Arslan


ce.ozlemarslan@gmail.com