将链接列添加到 ASP.NET GridView答案

【问题标题】：Adding Link Column to ASP.NET GridView将链接列添加到 ASP.NET GridView
【发布时间】：2010-12-23 10:37:48
【问题描述】：

我想输出一个可点击的新闻标题列表。到目前为止，我可以让它打印出标题列表，因为我在 VS 2010 的设计器视图中拖放了 NewsHeadline 表。你认为我应该如何使列表元素可点击？我寻找了一个 URL 属性，但我没有看到它。我需要包装在

 <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
        DataSourceID="SqlDataSource1" 
        EmptyDataText="There are no data records to display.">
        <Columns>
            <asp:BoundField DataField="NewsHeadline" HeaderText="NewsHeadline" 
                SortExpression="NewsHeadline" />
        </Columns>
    </asp:GridView>

  <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
        ConnectionString="<%$ ConnectionStrings:ConnectionString1 %>" 
        ProviderName="<%$ ConnectionStrings:ConnectionString1.ProviderName %>" 
        SelectCommand="SELECT [NewsHeadline] FROM [NewsTable]"></asp:SqlDataSource>
   </form>

【问题讨论】：

标签： asp.net gridview hyperlink

【解决方案1】：

像这样的东西作为 Visual Studio 2010 中的解决方案非常有用。

在 VS 网页的设计器选项卡中创建GridView。
将鼠标悬停在GridView 上，然后点击右上角的箭头。
转到“选择数据源”并选择“新数据源...”
创建到数据库的连接字符串并选择 NewsHeadline 表。
写查询SELECT News_Id, NewsHeadline FROM NewsHeadline
完成设置。现在应该在 Source 选项卡中生成一些代码。这还将创建一个SqlDataSource，它现在是您的GridView 的DataSource。
在“源”选项卡中转到您的GridView 的代码所在的位置，然后替换为以下代码。

代码：

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
    DataKeyNames="Id" DataSourceID="SqlDataSource1">
    <Columns>
    <asp:HyperLinkField
            DataNavigateUrlFields="News_Id"
            DataNavigateUrlFormatString="~\newsdetails.aspx?News_Id={0}"
            DataTextField="NewsHeadline"
            HeaderText="News HeadLines"
            SortExpression="NewsHeadline" />
    </Columns>
</asp:GridView>

一切就绪。这将创建一个包含所有标题的列表作为超链接，其中包含一个动态生成的唯一链接，指向我们使用与 NewsHeadline 表中的每个 NewsHeadline 条目对应的 PRIMARY KEY News_Id 构建的查询字符串的 newsdetails.aspx 页面补充。

然后，当您加载 newsdetails.aspx 页面时，您使用：Request.QueryString["News_Id"] 从 URL 中获取 News_Id 值，并使用它来查询数据库以获取有关单击的特定 NewsHeadline 的详细信息。然后，您可以在网页上显示该查询的结果。

【讨论】：

【解决方案2】：

正如其他人指出的那样，HyperLinkField 会很好地工作。但是，如果您希望整行都可点击，您可以使用自定义服务器控件来实现 SO 帖子 "Making an entire row clickable in a gridview" 中建议的 GridView。

查看我在how to implement a C# custom server control 上发布的关于实施它的问题。

只是另一种选择。

【讨论】：

【解决方案3】：

您需要将列类型从 BoundColumn 更改为 Hyperlink 列。

   <asp:hyperlinkfield headertext="NewsHeadline"
      datatextfield="NewsHeadline"
      datanavigateurlfield="NewsURL" 
      datanavigateurlformatstring="http://{0}" />

除了进行此更改之外，您还需要确保选择 URL 或可用于创建新闻文章链接的内容。在上面的示例中，我假设 URL 是您可以从 SQL 源中获取的内容。如果是 ID，只需像这样输入 URL 的其余部分...“~/MyNewsPage.aspx?NewsID={0}”...

【讨论】：

我必须使用 DataNavigateUrlFields 是 .NET 4 的东西吗？

【解决方案4】：

请改用hyperlinkfield：

<asp:hyperlinkfield datatextfield="NewsHeadline"
        datanavigateurlfields="NewsID"
        datanavigateurlformatstring="~\newsdetails.aspx?Id={0}"  />

【讨论】：

【解决方案5】：

您需要使用超链接字段而不是 BoundField，如下所示：

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
    DataSourceID="SqlDataSource1" 
    EmptyDataText="There are no data records to display.">
    <Columns>
        <asp:HyperLinkField HeaderText="NewsHeadline" SortExpression="NewsHeadline" DataTextField="NewsHeadline" NavigateUrl="..." />
    </Columns>

【讨论】：