在ASP.NET开发中，GridView控件是一个非常常用的数据展示组件。默认情况下，用户可以通过CommandField或超链接列来选择GridView中的行。但是，这种方式可能会让界面看起来不够美观。幸运的是，可以通过客户端JavaScript来实现更优雅的行选择功能。本文将详细介绍如何实现这一功能。
为了演示这一功能，使用了Microsoft SQL Server 2005，并选择了master数据库中的dbo.spt_values表。这个表是SQL Server 2005自带的，其结构和查询语句如下：
SELECT TOP 5 * FROM dbo.spt_values
需要修改Web.Config文件，以指向自己的SQL Server实例。
实现这一功能的关键在于使用控件来绑定数据，并在GridView控件中使用这个数据源。同时，还需要在页面中添加一些JavaScript代码。以下是详细的实现步骤：
首先，需要在ASPX页面中设置控件，并将其绑定到GridView控件。同时，还需要添加一个不可见的控件，以便在客户端触发选择事件。
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="数据库连接字符串"
SelectCommand="SELECT TOP 5 * FROM dbo.spt_values" />
<asp:GridView ID="GridView1" runat="server"
DataSourceID="SqlDataSource1"
AutoGenerateSelectButton="True"
OnRowDataBound="GridView1_RowDataBound"
OnSelectedIndexChanged="GridView1_SelectedIndexChanged" />
<asp:CommandField ShowSelectButton="True" Visible="False" />
此外，还需要在页面的声明部分设置EnableEventValidation属性为false，以允许JavaScript的回发机制。
public partial class Grid : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
}
在代码后台，需要处理GridView的RowDataBound事件和SelectedIndexChanged事件。在RowDataBound事件中，需要为每一行绑定鼠标事件和点击事件。在SelectedIndexChanged事件中，需要显示选中行的第一列数据。
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Attributes["onmouseover"] = "javascript:setMouseOverColor(this);";
e.Row.Attributes["onmouseout"] = "javascript:setMouseOutColor(this);";
e.Row.Attributes["onclick"] = ClientScript.GetPostBackClientHyperlink(this.GridView1, "Select$" + e.Row.RowIndex);
}
}
protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)
{
TextBox1.Text = GridView1.SelectedRow.Cells[1].Text;
}
在ASPX页面中，需要添加一些JavaScript代码来实现鼠标悬停、鼠标移出和点击事件。
<script language="javascript" type="text/javascript">
var oldgridSelectedColor;
function setMouseOverColor(element)
{
oldgridSelectedColor = element.style.backgroundColor;
element.style.backgroundColor = 'yellow';
element.style.cursor = 'hand';
element.style.textDecoration = 'underline';
}
function setMouseOutColor(element)
{
element.style.backgroundColor = oldgridSelectedColor;
element.style.textDecoration = 'none';
}
</script>
通过上述步骤，实现了一个使用JavaScript进行行选择的GridView控件。这种方式不仅让界面看起来更美观，而且用户体验也更好。用户只需点击想要选择的行即可，非常简单直观。