点击显示详细
在以往的设计中,我们如果想要某件产品或是书籍的详细信息时,一般都会写如下代码:
<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