Asp.Net GridView jQuery İle Satır(Kayıt) Ayrıntılarını Gösterme
Asp.net GridView kontrolü ile görüntülenen kayıtların ayrıntılarını veya o kayıtla alakalı bir açıklamayı fare üzerine geldiğinde görüntülemek için bir uygulama yapacağız. GridView uygulamamızda kullanacağımız jQuery dosyasını ilk olarak buradan indiriyoruz ve projemizi kaydettiğimiz klasöre kopyalıyoruz
Kaynak kodlarımız… tasarım için
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="sqlserverornek.WebForm2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Gridview satır ayrıntıları www.aspnetornekleri.com</title>
<script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script>
<script src="jquery.tooltip.min.js" type="text/javascript"></script>
<script type="text/javascript">
function InitializeToolTip() {
$(".gridViewToolTip").tooltip({
track: true,
delay: 0,
showURL: false,
fade: 100,
bodyHandler: function () {
return $($(this).next().html());
},
showURL: false
});
}
</script>
<script type="text/javascript">
$(function () {
InitializeToolTip();
})
</script>
<style type="text/css">
#tooltip {
position: absolute;
z-index: 3000;
border: 1px solid #111;
background-color: #FEE18D;
padding: 5px;
opacity: 0.85;
}
#tooltip h3, #tooltip div { margin: 0; }
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="gvDetails" AutoGenerateColumns="false" CellPadding="5" runat="server">
<Columns>
<asp:TemplateField HeaderText="Sıra No">
<ItemStyle Width="30px" HorizontalAlign="Center" />
<ItemTemplate>
<a href="#" class="gridViewToolTip"><%# Eval("id")%></a>
<div id="tooltip" style="display: none;">
<table>
<tr>
<td style="white-space: nowrap;"><b>Öğrenci Adı</b> </td>
<td><%# Eval("ad")%></td>
</tr>
<tr>
<td style="white-space: nowrap;"><b>Sınıfı</b> </td>
<td><%# Eval("sinif")%></td>
</tr>
<tr>
<td style="white-space: nowrap;"><b>Tc.No:</b> </td>
<td><%# Eval("tcno")%></td>
</tr>
<tr>
<td style="white-space: nowrap;"><b>Adresi</b> </td>
<td><%# Eval("adres")%></td>
</tr>
</table>
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField HeaderText="Öğrenci Adı" DataField="ad" />
<asp:BoundField HeaderText="Öğrenci Sınıfı" DataField="sinif" />
<asp:BoundField HeaderText="Öğrenci Tc.No" DataField="tcno" />
</Columns>
<HeaderStyle BackColor="#df5015" Font-Bold="true" ForeColor="White" />
</asp:GridView>
</div>
</form>
</body>
</html>
Uygulamada ben kullandığım veritabanına uygun olan alanları seçip ona göre değerler girdim sizde kullandığınız veritabanı ve tabloya uygun alanlara göre kodları düzenleyebilirsiniz.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
namespace sqlserverornek
{
public partial class WebForm2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
griddoldur();
}
}
protected void griddoldur()
{
string yol = @"Data Source=L1-PCOGRETMEN\SQLEXPRESS;initial Catalog=ogrenci1;integrated security=sspi";
SqlConnection baglan = new SqlConnection(yol);
string sorgu = "select * from kayit";
SqlDataAdapter sadp = new SqlDataAdapter(sorgu, baglan);
DataSet ds = new DataSet();
sadp.Fill(ds);
this.gvDetails.DataSource = ds.Tables[0];
this.gvDetails.DataBind();
}
}
}
