GridView Seçilen Satırın Detaylarını Twitter Bootstrap Kullanarak Modal Popup ile Gösterme

Asp.net GridView Seçili Satır Bilgileri Alma işleminden bahsetmiştik şimdi olayı biraz daha değiştirip,güzelleştirip detaylarını öğrenmek istediğiniz bir kayda tıklayınca Twitter Bootstrap ile cilalayıp Modal Popup ile açılır pencere şeklinde göstereceğiz. İyi dedin güzel bir şey galiba ama son cümleden birşey anlamadım diyorsanız hemen uygulamamıza geçelim. Konu sonunda çalışan uygulamayı indirebilirsiniz…
bootstrap
İlk olarak buradan Bootstrap dosyalarımız indiriyoruz. daha sonra projemize css, ve js isimli iki klasör ekleyip css içine bootstrap.css dosyamızı js klasörü içine bootstrap.js dosyamızı ekleyip
aşağıdaki kodları yazıyoruz

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>www.aspnetornekleri.com</title>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="js/bootstrap.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <div>
                    <h4 style="text-align: center;">
                        Aspnetornekleri.com Gridview Detaylarını Twitter Bootstrap ile Modal Dialog da Gösterme</h4>
                    <asp:GridView ID="GridView1" runat="server" Width="400px" HorizontalAlign="Center"
                        OnRowCommand="GridView1_RowCommand" AutoGenerateColumns="false" AllowPaging="false"
                        DataKeyNames="PERSONEL_NO" CssClass="table table-hover table-striped">
                        <Columns>
                            <asp:ButtonField CommandName="detail" ControlStyle-CssClass="btn btn-info" ButtonType="Button"
                                Text="Detaylar" HeaderText="Detayları Göster" />
                            <asp:BoundField DataField="PERSONEL_NO" HeaderText="PERSONEL NO" />
                            <asp:BoundField DataField="ADI" HeaderText="PERSONEL ADI" />
                            <asp:BoundField DataField="GOREVI" HeaderText="GÖREVİ" />
                        </Columns>
                    </asp:GridView>
                </div>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdateProgress ID="UpdateProgress1" runat="server">
            <ProgressTemplate>
                <img src="" alt="Yükleniyor...!" />
            </ProgressTemplate>
        </asp:UpdateProgress>
        <div id="currentdetail" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
            aria-hidden="true">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    ×</button>
                <h3 id="myModalLabel">
                    Personel Bilgileri</h3>
            </div>
            <div class="modal-body">
                <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                    <ContentTemplate>
                        <asp:DetailsView ID="DetailsView1" runat="server" CssClass="table table-bordered table-hover"
                            BackColor="White" ForeColor="Black" FieldHeaderStyle-Wrap="false" FieldHeaderStyle-Font-Bold="true"
                            FieldHeaderStyle-BackColor="LavenderBlush" FieldHeaderStyle-ForeColor="Black"
                            BorderStyle="Groove" AutoGenerateRows="False">
                            <Fields>
                                <asp:BoundField DataField="PERSONEL_NO" HeaderText="PERSONEL NO" />
                                <asp:BoundField DataField="ADI" HeaderText="PERSONEL ADI" />
                                <asp:BoundField DataField="GOREVI" HeaderText="GÖREVİ" />
                                <asp:BoundField DataField="UCRET" HeaderText="ALDIĞI ÜCRET" />
                                <asp:BoundField DataField="YONETICISI" HeaderText="YÖNETİCİSİ" />
                                <asp:BoundField DataField="GIRIS_TAR" HeaderText="İŞE BAŞLAMA TARİHİ" />
                            </Fields>
                        </asp:DetailsView>
                    </ContentTemplate>
                    <Triggers>
                        <asp:AsyncPostBackTrigger ControlID="GridView1" EventName="RowCommand" />
                    </Triggers>
                </asp:UpdatePanel>
                <div class="modal-footer">
                    <button class="btn btn-info" data-dismiss="modal" aria-hidden="true">
                        Kapat</button>
                </div>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

Sayfa Tasarımını yaptık şimdi gridview içini doldurma seçilen kaydın gösterilmesi için kodlarımız

 DataTable dt;
        protected void Page_Load(object sender, EventArgs e)
        {
            OleDbConnection baglanti = new OleDbConnection("Provider=Microsoft.ACE.OLEDB.12.0; DATA Source=" + Server.MapPath("App_Data/personel.accdb"));
            baglanti.Open();
            //www.aspnetornekleri.com
            string komut = "Select * from personel";
            OleDbDataAdapter dAdapter = new OleDbDataAdapter(komut, baglanti);
            DataSet ds = new DataSet();
            dAdapter.Fill(ds);
            //www.aspnetornekleri.com
            dt = ds.Tables[0];
            GridView1.DataSource = dt;
            GridView1.DataBind();
            baglanti.Close();
        }
        protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
        {
            if (e.CommandName.Equals("detail"))
            {
                int index = Convert.ToInt32(e.CommandArgument);
                int code = Int16.Parse(GridView1.DataKeys[index].Value.ToString());
                //www.aspnetornekleri.com
                IEnumerable<DataRow> query = from i in dt.AsEnumerable()
                                             where i.Field<int>("PERSONEL_NO").Equals(code)
                                             select i;
                DataTable detailTable = query.CopyToDataTable<DataRow>();
                DetailsView1.DataSource = detailTable;
                DetailsView1.DataBind();
                System.Text.StringBuilder sb = new System.Text.StringBuilder();
                sb.Append(@"<script type='text/javascript'>");
                sb.Append("$('#currentdetail').modal('show');");
                sb.Append(@"</script>");
                ScriptManager.RegisterClientScriptBlock(this, this.GetType(),
                           "ModalScript", sb.ToString(), false);

            }
        }

ve Sonuç…:
Untitled

GridView Seçilen Satırı Göster İndir

Bunlarda ilginizi çekebilir...

Subscribe
Bildir
guest
22 Yorum
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Burcu

merhaba öncelikle bu güzel bilgiler için teşekkür ederim .bu sayfa için kulandığınız css tagı benm kendi sayfam için tasarladığım css tagını eziyor,sayfa yapım bozuluyor onu kaldırınca da detaylara tıklayınca gelen görsellik kalmıyor , ne yapmam gerek acaba ? şimdiden teşekkürler

Burcu

bahsettiğim tag bu . bunu silince görsellik kalmıyor silmeyince sayfamın yapısı bozuluyor ve popup sayfası gözükmüyor sadece siyahlaşan ekran gözüküyor

BilisimOgretmeni

sorun büyük ihtimal aynı isimli sınıflardan dolayı oluyor, bunları tespit edip ilgili css dosyasından silerek yada lightbox için gerekli olan sınıfları ayrı bir dosyada toplayarak uygulamayı çalıştırabilirsiniz.. Şuan için deneme fırsatım yok ama böyle bir çözüm olabilir,

Burcu

cevabınız için teşekkür ederim ama malesef sorunu çözemedim.

Jack Lost

bu uygulamanın orjinali http://aspsnippets.com sayfasındadır.code larınıda indirebilirsiniz.

Jack Lost

bu uygulamanın orjinali http://aspsnippets.com sayfasındadır.code larınıda indirebilirsiniz.

celestia

gridview i dolduran kodu , butonun click olayına yazınca modal popup çalışmıyor.
sebebi ne olabilir ?

BilisimOgretmeni

sayfa postback olduğu için datatable boş oluyor ve bilgileri okuyamıyor. sorunu gidermek için page_load bölümündeki kodu
if (IsPostBack)
{………..} arasına alırsanız sorun olmaz

celestia

Hocam Selamlar , benim amacım page load da grdiview i doldurmak değil, buton olayına bu kodu yazmak. yani page load şuan kod yok 🙁

Veri tabanında çok fazla veri var , tüm datayı page load da çekmek verimli olmuyor. ayrıca buton olayında filtrelemede yapacağım için bu sorunu çözmem gerekiyor. saygılar

BilisimOgretmeni

o zaman viewstate kullanabilirsiniz yada GridView1_RowCommand içeriğini aşağıdaki ile değiştirin… son küme parantezinden sonraki ifadelerini silin

if (e.CommandName.Equals("detail"))
{
int index = Convert.ToInt32(e.CommandArgument);
int code = Int16.Parse(GridView1.DataKeys[index].Value.ToString());
//www.aspnetornekleri.com
/* IEnumerable query = from i in dt.AsEnumerable()
where i.Field("PERSONEL_NO").Equals(code)
select i;

DataTable detailTable = query.CopyToDataTable();*/
OleDbConnection baglanti = new OleDbConnection("Provider=Microsoft.ACE.OLEDB.12.0; DATA Source=" + Server.MapPath("App_Data/personel.accdb"));
baglanti.Open();
//www.aspnetornekleri.com
string komut = "Select * from personel where PERSONEL_NO=" + code;
OleDbDataAdapter dAdapter = new OleDbDataAdapter(komut, baglanti);
DataSet ds = new DataSet();
dAdapter.Fill(ds);
DataTable detailTable = ds.Tables[0];
DetailsView1.DataSource = detailTable;
DetailsView1.DataBind();
System.Text.StringBuilder sb = new System.Text.StringBuilder();
sb.Append(@"");
sb.Append("$('#currentdetail').modal('show');");
sb.Append(@"");
ScriptManager.RegisterClientScriptBlock(this, this.GetType(),
"ModalScript", sb.ToString(), false);
}

Hüseyin Dağlı

Bilgi için Teşekkür ederim.GErçekten iyi bir nlatım fakat bana açılan o pop up içerisinde güncelleme işleme lazım beceremedi yardımcı olursanız sevinirim.

Orhan

Hocam verdiğiniz bilgiler için teşekkürler.Bu uygulamayı local de denediğim zaman gösterdiğiniz şekilde çalışıyor fakat hostinge yüklediğim zaman çok farklı bir görüntü oluşuyor çalışmıyor sebebi ne olabilir sizce ?

yılmaz

merhaba bu olayı datalist ile de yapabilr miyiz itemcommand özelliği ile yardımcı olursanız sevinirim.

sbeder

Arkadaşım resimlerdeki hataları alıyorum. acil yardım lütfen.

hasan

çözüm bulabilidin mi aynı hatayı bende alıyorum. item template kullandığım için diye düşünüyorum

anıl

evet çözüm bulabıldınızmı sorun bende yaşıyorum

murat

sbeder in yazdıgı aynı hatayıo bende alıyorum. ugrastım cozemedim. malsef

BilisimOgretmeni

konu sonunda uygulamanın çalışan hali ekli indirerek test ede bilirsiniz, oluşan hata ilgili satırdaki tablodaki alanların içinde değer olmadığı için veya öyle bir alan olmadığı için oluşabilir.

hasan

sbeder problemi bendede var dt değeri o kısma gelmiyor aynı hatayı alıyorum . item template image buton click e yazdırdım

BilisimOgretmeni

konu sonundaki uygulamayı indirip denediniz mi acaba?

Anıl

Merhaba bunu kendi projemde uyguladım ama “Dizin aralık dışındaydı. Negatif bir değer olmamalı ve koleksiyonun boyutundan daha küçük olmalıdır. ” Şöyle bi hata aldım sorun nedir?

Anıl

??

22
0
Yazı hakkındaki yorum, görüş ve önerilerinizi yazınx
()
x