23

I want to output a list of news headlines that are clickable. So far I can get it to print out a list of headlines because I dragged and dropped the NewsHeadline table in designer view in VS 2010. How do you think I should the make the list elements clickable? I looked for a URL attribute but I did not see it. Do I need to wrap in a < a href ?

 <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>

5 Answers 5

38

You need to change the column type from a BoundColumn to a Hyperlink column.

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

In addition to making this change, you'll need to make sure that you are selecting the URL or something you can use to create the link to the news article. In the example above, I'm assuming the URL is something you can grab from your SQL source. If it is an ID, simply type out the rest of the url like this... "~/MyNewsPage.aspx?NewsID={0}"...

1
  • 3
    I had to use DataNavigateUrlFields is that a .NET 4 thing? Commented May 9, 2013 at 5:13
9

Use hyperlinkfield instead :

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

You need to use a hyperlink field instead of a BoundField, like so:

<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>

3

Something like this will work fantastic as a solution in Visual Studio 2010.

  1. Create a GridView in the Designer tab of your webpage in VS.
  2. Hover your mouse over the GridView and click the arrow that appears in the top right.
  3. Go to "Choose Data Source" and select "new data source..."
  4. Create the connection string to your database and choose the NewsHeadline table.
  5. Write the query SELECT News_Id, NewsHeadline FROM NewsHeadline
  6. Finish the setup. Now some code should be generated in the Source tab. This will also create an SqlDataSource which is now the DataSource of your GridView.
  7. Go to where the code is for your GridView in the Source tab and replace with the following code.

Code:

<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>

And you're all set. This will create a list of all the Headlines as hyperlinks with a dynamically generated unique link to the newsdetails.aspx page compliments of the query string we built using the PRIMARY KEY News_Id corresponding to each NewsHeadline entry in the NewsHeadline table.

Then when you load the newsdetails.aspx page you use: Request.QueryString["News_Id"] to get the News_Id value from the URL and use it to query the database for the details about the specific NewsHeadline that was clicked. You can then display the result of that query on the webpage.

2

The HyperLinkField will work great as others have pointed out. But, in case you want the entire row clickable, you can use a custom server control that implements a GridView suggested in the SO post "Making an entire row clickable in a gridview".

Check out the question I posted on how to implement a C# custom server control on implementing it.

Just another option.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.