ASP.NET GridView 点击详细页弹出 DIV 层
在 ASP.NET 开发中，GridView 是常用的数据展示和操作控件之一。当用户点击 GridView 中的某一行时，我们经常需要弹出一个详细信息的 DIV 层来展示更多的信息。这篇文章将介绍如何实现点击 GridView 弹出 DIV 层的功能，并提供代码示例。
准备工作
在开始之前，我们需要准备好一个基本的 ASP.NET 网页，并在网页中放置一个 GridView 控件和一个 DIV 元素作为详细信息的展示区域。
<!DOCTYPE html>
<html>
<head>
<title>GridView 点击详细页弹出 DIV 层示例</title>
<style>
/* 样式控制 */
.gridview {
width: 100%;
border-collapse: collapse;
}
.gridview th, .gridview td {
padding: 5px;
border: 1px solid #ccc;
}
.details {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
width: 400px;
background-color: #f9f9f9;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
GridView 点击详细页弹出 DIV 层示例
<asp:GridView ID="GridView1" runat="server" CssClass="gridview">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="lnkDetails" runat="server" OnClick="lnkDetails_Click">详情</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Name" HeaderText="姓名" />
<asp:BoundField DataField="Age" HeaderText="年龄" />
<asp:BoundField DataField="Gender" HeaderText="性别" />
</Columns>
</asp:GridView>
</div>
<div id="detailsDiv" class="details">
<h2>详细信息</h2>
<p><strong>姓名：</strong><span id="nameLabel"></span></p>
<p><strong>年龄：</strong><span id="ageLabel"></span></p>
<p><strong>性别：</strong><span id="genderLabel"></span></p>
<button type="button" id="closeButton">关闭</button>
</div>
</form>
<script>
// JavaScript 代码
document.getElementById('closeButton').addEventListener('click', function () {
document.getElementById('detailsDiv').style.display = 'none';
});
function showDetails(name, age, gender) {
document.getElementById('nameLabel').innerText = name;
document.getElementById('ageLabel').innerText = age;
document.getElementById('genderLabel').innerText = gender;
document.getElementById('detailsDiv').style.display = 'block';
}
</script>
</body>
</html>
上述网页代码中，我们定义了一个 GridView 控件用于展示数据，并在每一行中添加了一个 LinkButton 控件用于触发显示详细信息的功能。同时，我们在网页中定义了一个隐藏的 DIV 元素作为详细信息的展示区域，并在 JavaScript 中定义了相关的事件处理函数。
服务器端代码
接下来，我们需要在服务器端处理 LinkButton 的点击事件，在事件处理函数中获取相关数据并将其传递给客户端的 JavaScript 函数。
protected void lnkDetails_Click(object sender, EventArgs e)
{
LinkButton lnkDetails = (LinkButton)sender;
GridViewRow row = (GridViewRow)lnkDetails.NamingContainer;
string name = row.Cells[1].Text;
string age = row.Cells[2].Text;
string gender = row.Cells[3].Text;
string script = $"showDetails('{name}', '{age}', '{gender}');";
ClientScript.RegisterStartupScript(GetType(), "ShowDetails", script, true);
}
在上述代码中，我们首先获取点击事件的 LinkButton 控件，并通过 NamingContainer 属性获取所在的 GridViewRow。然后，我们可以根据需要获取 GridView 中其他单元格的数据。最后，我们通过 ClientScript.RegisterStartupScript 方法将 JavaScript 代码注册到客户端，以便在页面加载完成后执行。
