使用 JavaScript 或无回发显示 GridView 中的主从详情页面
2.43/5 (6投票s)
2007年10月1日
27486
208
本文解决了在不回发页面的情况下，使用 JavaScript 在网格视图中显示详情页面的问题。开发人员可以使用任何控件，例如数据列表、重复器、表单视图或任何自定义逻辑，使用相同技术查看详情页面中的信息。
引言
如何使用 JavaScript 在网格视图的行内显示详情页面。
使用代码
解压缩代码并在 VS2005 Web 应用程序中打开文件。使用 SQL Server 作为数据库服务器，这里我使用了 pubs 数据库的 author 表来显示作者的详细信息。
在 web.config 中更新以下连接字符串设置
// // <add providername="System.Data.SqlClient" connectionstring="Data Source=Server Name;Initial Catalog=pubs;User ID=;Password=" name="pubsConnectionString" /> //<add providername="System.Data.SqlClient" connectionstring="Data Source=Server Name;Initial Catalog=pubs;User ID=;Password=" name="pubsConnectionString2" /> //
Default.aspx.cs 文件。
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.DataRow || e.Row.RowType == DataControlRowType.Separator) { //*******************Code to show/Hide row record*********************** //Url of the detail page, auth_id is the id of auther String Url = "Detail.aspx?auth_id=" + GridView1.DataKeys[e.Row.RowIndex].Value; //Find the link button HtmlAnchor lnkShowHideDetail = (HtmlAnchor)e.Row.FindControl("lnkSHDetail"); // Add client side attribute "index" in each row of grid // this attribute give row number of below which detail has to be shown e.Row.Attributes.Add("Index", e.Row.RowIndex.ToString()); // Add same attribute "index" in link button , with same value //To identify whose row, link button clicked lnkShowHideDetail.Attributes.Add("Index", e.Row.RowIndex.ToString()); // add mode attribute in link button to know the status of detail page <shown /> lnkShowHideDetail.Attributes.Add("mode", "HIDE"); //At last register client side onclick event and the name of java function //which will open the dealil page in grid //Parameter: grid view client id, url of detail page,link button object,caption1,caption2 lnkShowHideDetail.Attributes.Add("onclick", "HideShowDetails('" + GridView1.ClientID + "','" + Url + "',this,'Show Detail',' Hide Detail')"); //*******************End*********************************************** } }