Asp.Net & Jquery

  Herkese ilk önce başka bir binary günden merhaba demek istiyorum Smile (01.11.2011) Özellikle web projelerimizde çok kullandığımız asp.net gridview için hepimiz belli başlı özelliklere göre filtreleme işlemleri yapmaktayız. Bu işlemleri yaparken bazen sql procedurelere bazen codebehind tarafındaki kodlarımıza sayesinde yaparız. Alternatif seçenek aslında oldukça çok. Fakat basit bir filtreleme işlemi için sistemi yormadan ve en hızlı bir şekilde yapmak için velinimetimiz olan Jquery hemen imdadımıza yetişir. Jquery.quicksearch plugini sayesinde çok rahat ve hızlı bir şekilde istediğimiz aramayı gerçekleştirebiliriz. Bunu küçük bir örnek ile açıklarsak ;

<asp:TextBox ID="id_search" runat="server" placeholder="Search">
</asp:TextBox>

Filtreleme yapmak için bir tane textbox ekledik. Ardından hemen listelenecek olan veriler için xml data file eklenir.

<asp:XmlDataSource ID="productsDataSource" Runat="server" DataFile="~/App_Data/Products.xml"> 
</asp:XmlDataSource>

Sonra verileri listeleyeceğimiz gridview eklenir ve onprerender parametresine codebehind tarafında yazacağımız fonksiyonun adı yazılır.

<asp:GridView ID="grd_telefonDurumu" Runat="server" 
        DataSourceID="productsDataSource" AutoGenerateColumns="False" 
        ClientIDMode="Static" onprerender="grd_telefonDurumu_PreRender" >
        <Columns>
            <asp:BoundField HeaderText="" DataField="ProductID" 
                            SortExpression="ProductID" ItemStyle-HorizontalAlign="Center"></asp:BoundField>
            <asp:BoundField HeaderText="Model" DataField="ProductName" 
                            SortExpression="ProductName"></asp:BoundField>
            
            <asp:BoundField HeaderText="Fiyat" DataField="UnitPrice" 
                            SortExpression="UnitPrice"></asp:BoundField>
            <asp:BoundField HeaderText="Stok(Adet)" DataField="UnitsInStock" 
                            SortExpression="UnitsInStock"></asp:BoundField>
        </Columns>
    </asp:GridView>


Codebehind tarafına geçip aşağıdaki kodlar yazılır. Bunu yapmamızdaki neden ise; gridview sonuçta bir table olarak bize dönüş yapıyor. Biz, jquery quicksearch eklentisini kullanırken, gridview içinde arama yaparken headerlara takılmaması için tablo yapısını <thead></thead> ve <tbody></tbody> şeklinde ikiye ayırıyoruz. Böylece tbody içinde arama yapıp istediğimiz sonuca ulaşıyoruz.

protected void grd_telefonDurumu_PreRender(object sender, EventArgs e)
    {
        if (grd_telefonDurumu.Rows.Count > 0)
        {
            grd_telefonDurumu.UseAccessibleHeader = true;
            grd_telefonDurumu.HeaderRow.TableSection = TableRowSection.TableHeader;
        }
    }

Buraya kadar işlemlerimiz tamamladıysak artık Jquery kısmına geçelim. Hemen kullandığımız script dosyalarını ekleyelim.

<script src="Scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.quicksearch.js" type="text/javascript"></script>

Ardından arama scriptimizi yazalım.

<script type="text/javascript">
        $(function () {
            $('input#id_search').quicksearch('table#grd_telefonDurumu tbody tr');
        })
    </script>

Plugin sayesinde gridview içinde istrediğimizi aramak bu kadar basit. Plugini kendi istediğiniz şekilde, daha etkili bir biçimde kullanabilirsiniz.

 

Jquery ile Asp.Net Gridview Filtreleme İşlemleri

 

Quicksearch plugini keşfetmek istiyorsanız burayı, örnek uygulamayı indirmek istiyorsanız quicksearch.rar (34,65 kb) tıklayınız.



Yorumlar (6) -

ceyne

Selam, hocam güzel bir döküman olmuş teşekkürler. yalnız benim bir sorunum var. Fikir verebilirseniz sevinirim. Ben tablo içerisinde arma yaptıktan sonra diğer diğer satırların gizlenmesini değilde, bulunan kayıtların yanıp sönmesi, farklı renkte gözükmesi vs. gibi bir şekilde gözükmesini istiyorum.
Daha özelde ise tarihi yaklaşan kayıt satırlarının farklı biçimde gösterilmesini istiyorum. bununu gibi bir örek göremedim.
09 Şubat 2012 - Yanıtla


seo hizmetleri

Çok aradığım paylaşımdı teşekkürler
04 Aralık 2015 - Yanıtla


web yazılım

Çok güzel bir yazı olmuş teşekkürler
20 Aralık 2015 - Yanıtla


php yazılım

Sitenizi yandex de gezinirken buldum çok beğendim teşekkürler
20 Aralık 2015 - Yanıtla


doğru web tasarım

İyi konu olmuş teşekkürler
20 Aralık 2015 - Yanıtla


doğru web tasarımı

Merhabalar nette gezinirken yazınız gözüme çarptı çok beğendim teşekkürler.
20 Aralık 2015 - Yanıtla


Yorum ekle