ASP.NET2.0中的网格控件GridView是ASP.NET1.X中DataGrid控件的替代，该控件以类似电子表格的形式提供给用户一个表格视图，表中每行数据代表数据源的一条记录，这样可以批量显示数据。通常对于字段较多的数据源，不宜单独使用GridView控件显示数据，我们更希望能在批量显示数据源每个记录的主要信息同时，又能显示指定记录的详细信息，ASP.NET2.0就提供了一对这样的控件与GridView配合满足这一要求：DatailsView控件和FormView控件。
2 问题的提出
GridView控件对其绑定的数据源具有进行删除、编辑和选择等数据编辑操作功能，设计人员用极少的代码就可以实现这些功能。但是这样设计出来的表格的每一行都相应定义一个功能按扭，用户只有单击该按扭才能实现相应的功能，这样的外观设计和操作与用户习惯了的电子表格不相符合，我们能否摒弃定义功能按扭而只通过单击行的任意位置来选择当前行显示相应记录的详细信息？要实现这个功能笔者认为需要解决三个问题：首先，着色显示鼠标所在行；
其次，如何通过单击鼠标所在行获取当前记录；最后，用户对主视图分页操作时，详细视图要动态更新显示新记录详细信息。
尽管， GridView控件提供了数据源控件来自动完成控件与数据源的连接的功能，设计人员可以不用编程即可实现控件与数据源的连接，但是，为了解决以上的三个问题，也同时为了能更清楚控件与数据源实现连接的机理，本文采用了编程的方式来实现GridView控件与FormView控件的主-详细视图功能。
3 解决问题的思路过程
着色鼠标所在行的思路：当鼠标移到某一行时保存原背景色并设置行背景色，而当鼠标离开该行时再还原该行背景色。据此原理，我们可以考虑利用JavaScript的鼠标事件来解决着色所在行的问题。
JavaScript中鼠标事件MouseOver表示在鼠标移过一个界面对象时发生，事件发生后JavaScript自动调用执行onMouseOver句柄；而鼠标事件MouseOut则表示在鼠标脱离一个界面的对象时发生，事件发生后JavaScript自动调用onMouseOut句柄。实现的主要代码如下：MouseOver事件为“currentcolor=this.style.backgroundColor;this.style.backgroundColor='red'”（红色），MouseOut事件为“this.style.backgroundColor=currentcolor”
在解决如何通过单击鼠标所在行获取当前记录这一问题之前，让我们来研究在GridView 控件每行前自定义一个选择功能按扭时的情况：在调试运行的过程中，笔者发现当将鼠标位于选择功能按扭上时，屏幕状态行的左方会显示类似这样的代码：javascript:_doPostBack(‘GridView1’,’$
_doPostBack是ASP.NET脚本函数，当ASPX页面有包含asp:LinkButton或者带有AutoPostBack属性且其值为true的服务器控件时，ASP.NET会自动为页面生成下面的脚本：
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
function __doPostBack(eventTarget, eventArgument)
{
if(!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
__doPostBack带有两个参数：eventTarget和eventArgument。
eventTarget是引起回送的控件的ID，eventArgument是回调参数(与控件相关的附加数据)。这两个参数分别由隐藏的两个表单域__ EVENTTARGET和__ EVENTARGUMENT保存。通过利用_doPostBack这一特性，如果我们不给GridView每行增加一个选择功能按扭，而是在GridView控件的每行创建时激发一个单击事件，事件的内容就是注册一个_doPostBack函数，那情况会如何呢？笔者经研究发现利用如下代码：javascirpt:__doPostBack('GridView1','select$" + e.Row.RowIndex即可实现。
由于笔者将GridView控件的属性PageSize值设计为系统默认值（即PageSize=10，GridView控件每页要显示的10行记录），因此主视图分页操作时，详细视图显示的当前记录索引号应该等于GridView控件当前页码的十倍。实现的主要代码可表示为：FormView1.PageIndex = e.NewPageIndex * 10，（FormView1为详细视图FormView控件的ID）。
4 页面及代码的设计
（1）数据库采用mdb文件（文件名：demo.mdb，与页面文件位于同一路径），其结构如表1所示：
表1 数据库demo.mdb库结构
|
字段名称 |
字段类型 |
字段大小 |
字段含义 |
|
ID |
文本 |
4 |
记录序号 |
|
KSBH |
文本 |
15 |
准考证号 |
|
XM |
文本 |
8 |
姓名 |
|
XB |
文本 |
2 |
性别 |
|
BKZYMC |
文本 |
40 |
报考专业名称 |
|
ZZLLMC |
文本 |
10 |
政治名称 |
|
WGYMC |
文本 |
10 |
外国语名称 |
|
YWK1MC |
文本 |
40 |
业务课一名称 |
|
YKW2MC |
文本 |
40 |
业务课二名称 |
（2）页面布局及页代码如图1所示：
图1 页面布局效果图
其中主视图由GridView控件组成，详细视图由FormView控件组成，页面文件代码为：
<%@ Page enableEventValidation="false" 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>ASP.NET2.0中编程实现GridView与FormView的主/详细视图功能
</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<table border="1" style="width: 516px; height: 388px">
<tr align="center">
<td colspan="2">ASP.NET2.0中编程实现GridView与FormView的主/详细视图功能
</td>
</tr>
<tr>
<td style="width: 1240px; height: 297px;" align="Center">主视图
<asp:GridView ID="GridView1" runat="server" Width="260px"
AutoGenerateColumns="False" DataKeyNames="ksbh" Font-Size="Small"
AllowPaging="true" OnRowCreated="GridView1_RowCreated"
OnRowDataBound="GridView1_RowDataBound"
OnSelectedIndexChanged="GridView1_SelectedIndexChanged" Height="245px" OnPageIndexChanging="GridView1_PageIndexChanging">
<Columns>
<asp:BoundField DataField="id" HeaderText="序号" >
<ItemStyle HorizontalAlign="Center" />
</asp:BoundField>
<asp:BoundField DataField="ksbh" HeaderText="准考证号" >
<ItemStyle HorizontalAlign="Center" />
</asp:BoundField>
<asp:BoundField DataField="xm" HeaderText="姓名" >
<ItemStyle HorizontalAlign="Left" />
</asp:BoundField>
</Columns>
</asp:GridView>
</td>
<td style="height: 297px; width: 1832px;">详细视图
<asp:FormView ID="FormView1" runat="server" Height="220px"
Width="377px" DataKeyNames="ksbh" Font-Size="Small"
OnPageIndexChanging="FormView1_PageIndexChanging">
<ItemTemplate> 准考证号
<asp:TextBox ID="TextBox2" runat="server" Text='<%# Eval("ksbh") %>'
Width="122px"></asp:TextBox>
姓名
<asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("xm") %>'
Width="38px"></asp:TextBox>
性别<asp:TextBox ID="TextBox3" runat="server" Text='<%# Bind("xb") %>'
Width="18px"></asp:TextBox><br />
报考专业
<asp:TextBox ID="TextBox4" runat="server" Text='<%# Bind("bkzymc") %>'
Width="267px"></asp:TextBox><br />
政治理论
<asp:TextBox ID="TextBox5" runat="server" Text='<%# Bind("zzllmc") %>'
（3）后台文件代码如下所示：
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.OleDb;
public partial class _Default : System.Web.UI.Page
{
OleDbConnection oleConn;
OleDbDataAdapter myCmd;
DataSet ds;
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
OpenDatabase();
string cmdSelect = "select * from demo";
CreateDataSet(cmdSelect);
GridView1.DataSource = ds.Tables["table1"];
GridView1.DataBind();
FormView1.DataSource = ds.Tables["table1"];
FormView1.DataBind();
oleConn.Close();
}
}
private void OpenDatabase()
{
string connectionString = "Provider =
Microsoft.Jet.OLEDB.4.0 ;Data Source=" + Server.MapPath("demo.mdb");
oleConn = new OleDbConnection(connectionString);
oleConn.Open();
}
private DataSet CreateDataSet(string cmdselect)
{
myCmd = new OleDbDataAdapter(cmdselect,oleConn);
ds = new DataSet();
myCmd.Fill(ds, "table1");
return ds;
}
protected void GridView1_RowDataBound(object sender,
GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow ||
e.Row.RowType == DataControlRowType.Separator)
{
e.Row.Attributes.Add("onmouseover", "currentcolor=this.style.backgroundColor;this.style.backgroundColor='red'");//鼠标所在行显示为红色
e.Row.Attributes.Add("onmouseout",
"this.style.backgroundColor=currentcolor"); //鼠标离开后恢复原色
e.Row.Attributes["style"] = "Cursor:hand"; //鼠标形状为手形
}
//给表格的第一列自动填充序号
if (e.Row.RowIndex != -1)
{
int id = e.Row.RowIndex + 1;
e.Row.Cells[0].Text = id.ToString();
}
}
//注册行单击事件
protected void GridView1_RowCreated(object sender,
GridViewRowEventArgs e)
{
e.Row.Attributes.Add("onclick",
"javascirpt:__doPostBack('GridView1','select$" + e.Row.RowIndex + "')");
}
//单击GridView控件记录行
protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)
{ if (GridView1.SelectedIndex == -1)
{
GridView1.SelectedIndex = 0;
}
OpenDatabase();
string cmdSelect = "select * from demo where ksbh='"
+ GridView1.SelectedValue.ToString() + "'";
CreateDataSet(cmdSelect);
FormView1.PageIndex = GridView1.SelectedIndex; //将控件的选中行的索引号作为FormView控件的当前页码
FormView1.DataSource = ds.Tables["table1"];
FormView1.DataBind();
oleConn.Close();
}
//分页
protected void GridView1_PageIndexChanging(object sender,
GridViewPageEventArgs e)
{
GridView1.PageIndex = e.NewPageIndex;
OpenDatabase();
string cmdSelect = "select * from demo";
CreateDataSet(cmdSelect);
GridView1.DataSource = ds.Tables["table1"];
GridView1.DataBind();
FormView1.DataSource = ds.Tables["table1"];
FormView1.PageIndex = e.NewPageIndex * 10; //分页时GridView控件当前页码*10即为FormView控件的分页后的页码
FormView1.DataBind();
oleConn.Close();
}
}
以上程序在VS2005.NET中调试运行成功，调试运行效果如图2所示：
图2 运行效果图
其设计方法也在实际的项目开发中得到了应用。