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

  • Anıl

    ??

  • 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?

  • 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?

  • 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.

  • 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

  • yılmaz

    merhaba bu olayı datalist ile de yapabilr miyiz itemcommand özelliği ile 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 ?

  • 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.

  • 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);
          }

  • 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.

  • 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.

  • 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