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