点击显示详细
在以往的设计中，我们如果想要某件产品或是书籍的详细信息时，一般都会写如下代码：
<a href='details.aspx?code=<%#Eval("Code")%>'><%#Eval("Name")%></a>
点击链接后就会跳到另一个页面显示出详细信息，这样是很方便，但是当用户还想浏览上一个页面的内容时，就必须点次返回按钮，这就增添了许多麻烦。
也许聪明的你会想到在<a>标签中加上一个target='_blank'，在新窗口中打开，这确实前一个问题是解决了，用户不想看只需关掉新窗口，但是利用浏览器自带的窗口自定义起来不是很方便。
现在我就介绍一下我的完整做法：
创建一个网站如下：
Book.cs：
using System;
public class Book
{
public Book() { }
public string Code { get; set; }
public string Title { get; set; }
public string Remark { get; set; }
public DateTime PublishTime { get; set; }
}
SampleData.cs：
using System;
public static class SampleData
{
public static Book[] Books =
{
new Book{Code="1001",Title="Funny Stories",Remark="Talk about funny stories",PublishTime=new DateTime(2004,11,10)},
new Book{Code="1002",Title="LINQ rules",Remark="Talk about linq rules",PublishTime=new DateTime(2007,9,2)},
new Book{Code="1003",Title="C# on Rails",Remark="Talk about C# on rails",PublishTime=new DateTime(2007,4,1)},
new Book{Code="1004",Title="All your base are belong to us",Remark="Talk about all your base are belong to us",PublishTime=new DateTime(2006,5,5)},
new Book{Code="1005",Title="Bonjour mon Amour",Remark="Talk about bonjour mon amour",PublishTime=new DateTime(1973,2,18)},
new Book{Code="1006",Title="Linq in Action",Remark="Talk about linq in action",PublishTime=new DateTime(2009,5,3)},
new Book{Code="1007",Title="jQuery in Action",Remark="Talk about jQuery in action",PublishTime=new DateTime(2009,11,8)}
};
}
Default.aspx：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 runat="server">
<title>Click Title To Show Details</title>
<style type="text/css">
table{width:600px;border-collapse:collapse;}
th,td{border:#AAA solid 1px; font-size:12px;padding:5px;}
th{background:#E4E4E4;font-weight:bold;font-size:14px;}
a{color:#AAA;}
a:hover{color:#000};
</style>
</head>
<body>
<div>
<asp:repeater ID="rptOutput" runat="server">
<HeaderTemplate>
<table cellspacing="0">
<tr>
<th style="width:50px">标识码</th>
<th style="width:400px">标题</th>
<th style="width:150px">发布时间</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><%#Eval("Code") %></td>
<td><a href='javascript:openDetails(<%#Eval("Code") %>)'><%#Eval("Title") %></a></td>
<td><%#DateTime.Parse(Eval("PublishTime").ToString()).ToShortDateString() %></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:repeater>
</div>
</body>
</html>
Default.aspx.cs：
using System;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
rptOutput.DataSource = SampleData.Books;
rptOutput.DataBind();
}
}
Default页面效果图：
Details.aspx：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Details.aspx.cs" Inherits="Details" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<div>
<table style="width:100%;background:#E4E4E4;">
<tr>
<td style="width:70px; text-align:right">标识码</td>
<td>
<asp:Label ID="lblCode" runat="server" Text=""></asp:Label></td>
</tr>
<tr>
<td style="width:70px; text-align:right">标题</td>
<td>
<asp:Label ID="lblTitle" runat="server" Text=""></asp:Label></td>
</tr>
<tr>
<td style="width:70px; text-align:right">备注</td>
<td>
<asp:Label ID="lblRemark" runat="server" Text=""></asp:Label></td>
</tr>
<tr>
<td style="width:70px; text-align:right">发布时间</td>
<td>
<asp:Label ID="lblPublishTime" runat="server" Text=""></asp:Label></td>
</tr>
</table>
</div>
Details.aspx.cs：
using System;
using System.Linq;
public partial class Details : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!string.IsNullOrWhiteSpace(Request.QueryString["code"]))
{
Book book = SampleData.Books.Single<Book>(b => b.Code == Request.QueryString["code"]);
lblCode.Text = book.Code;
lblTitle.Text = book.Title;
lblRemark.Text = book.Remark;
lblPublishTime.Text = book.PublishTime.ToShortDateString();
}
}
}
接下来我们要做的就是要在Default.aspx中创建一个用于显示详细信息的div：
<div id="Details">
<div class="title">
<a id="Close" href="javascript:void(0);">关闭</a>
</div>
<div class="output"></div>
</div>
给其添加样式：
<style type="text/css">
#Details
{
width: 500px;
overflow: hidden;
}
#Details .title
{
background:#999999;
height:20px;
}
#Close
{
float: right;
color: Red;
font-size: 12px;
margin: 3px;
}
#Close:hover
{
font-weight: bold;
}
</style>
目前我们所需要的框架都搭建完毕了，接下来就是写Javascript代码，让其运作起来：
<script type="text/javascript">
$(document).ready(function () {
$("#Details").hide();
$("#Close").click(function () { $("#Details").hide(); });
});
function position(target) {
target.css({
position: "absolute",
top: $(window).height()/ 5,
left: ($(window).width() - target.width()) / 2
});
}
function openDetails(code) {
$("#Details .output").load("Details.aspx?code=" + code, position($("#Details")));
$("#Details").show();
}
</script>
提示：
- 记得在此代码之前引用jQuery库；
- position函数用于给显示详细信息的div定位；
- openDetails函数用于接收传递过来的code，通过jQuery的load方法将Details.aspx内容加载到输出div，加载完毕后，给显示详细信息的div重新定位，最后显示出来。
最终效果图：
完整代码下载地址：https://files.cnblogs.com/mapping/ShowDetailsDemo.rar
转载请载明出处http://www.cnblogs.com/mapping/archive/2010/11/25/1887543.html
