GridView Nesnesinde Seçilen Satırı Popup Menüde Gösterimini Sağlamak
Merhaba arkadaşlar bu makalemizde javascript kodlarından yararlanarak, seçili satırın detay bilgilerini popup menüde gösterimini sağlayacağız.
http://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css
http://code.jquery.com/jquery-1.8.2.js
http://code.jquery.com/ui/1.10.3/jquery-ui.js
Screenshot
Şekil 1
Şekil 2
Default.aspx.cs
using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
bindGridview();
}
}
protected void bindGridview()
{
DataSet ds = new DataSet();
using (SqlConnection con = new SqlConnection("Data Source=(LocalDB)\\MSSQLLocalDB;AttachDbFilename=|DataDirectory|\\kategori.mdf;Integrated Security=True"))
{
con.Open();
SqlCommand cmd = new SqlCommand("select * from [dbo].[Table]", con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(ds);
con.Close();
gvDetails.DataSource = ds;
gvDetails.DataBind();
}
}
}
Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="jquery-1.8.2.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript">
function openPopup(Id, Yazar, Kitap , Fiyat) {
$('#lblId').text(Id);
$('#lblYazar').text(Yazar);
$('#lblKitap').text(Kitap);
$('#lblFiyat').text(Fiyat);
$("#popupdiv").dialog({
title: "Seçili Satır Detayı ",
width: 300,
height: 250,
modal: true,
buttons: {
Kapat: function () {
$(this).dialog('close');
}
}
});
}
</script>
<style type="text/css">
.GridviewDiv {font-size: 100%; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Helevetica, sans-serif; color: #303933;}
.headerstyle
{
color:#FFFFFF;border-right-color:#abb079;border-bottom-color:#abb079;background-color: red;padding:0.5em 0.5em 0.5em 0.5em;text-align:center;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="popupdiv" title="" style="display: none">
Id: <label id="lblId"></label><br />
Yazar: <label id="lblYazar"></label><br />
Kitap: <label id="lblKitap"></label><br />
Fiyat: <label id="lblFiyat"></label>
</div>
<table align="center" style="margin-top:200px">
<tr>
<td>
<div class="GridviewDiv">
<asp:GridView runat="server" ID="gvDetails" AutoGenerateColumns="false" Width="500px">
<HeaderStyle CssClass="headerstyle" />
<Columns>
<asp:BoundField DataField="Id" HeaderText="Id" />
<asp:BoundField DataField="Yazar" HeaderText="Yazar" />
<asp:BoundField DataField="Kitap" HeaderText="Kitap" />
<asp:BoundField DataField="Fiyat" HeaderText="Fiyat" />
<asp:TemplateField>
<ItemTemplate>
<a href="#" class="gridViewToolTip" onclick='openPopup("<%# Eval("Id")%>","<%# Eval("Yazar")%>", "<%# Eval("Kitap")%>" , "<%# Eval("Fiyat")%>")'>detay</a>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Bir makalenin daha sonuna geldik. Bir sonraki makalede görüşmek üzere. Bahadır ŞAHİN