Redirect on Listview row click

I have a Listview and one of the columns is called id_Number. Is it possible to redirect to another page, if user clicks on one of the rows? For example if id_Number is 4, than page should be redirected to ~/Page.aspx?id=4.

Code:

<asp:ListView ID="ListView1" runat="server" 
    DataKeyNames="id_Number" >
    <EmptyDataTemplate>
        <table id="Table1" runat="server" style="">
            <tr>
                <td>
                    No data was returned.</td>
            </tr>
        </table>
    </EmptyDataTemplate>               
    <ItemTemplate>
        <tr style="font-family: Arial; color: #FFFFFF" onMouseOver="this.bgColor='#219DD0';" onMouseOut="this.bgColor='#252526';">
            <td>
                <asp:Label ID="Label1" runat="server" Text='<%# Eval("id_Number") %>' />
            </td>
            <td>
                <asp:Label ID="TextLabel" runat="server" Text='<%# Eval("Text") %>' />
            </td>
            <td>
                <asp:Label ID="DateLabel" runat="server" Text='<%# Eval("Date") %>' />
            </td>
        </tr>
    </ItemTemplate>
    <LayoutTemplate>
        <table id="Table2" runat="server">
            <tr id="Tr1" runat="server">
                <td id="Td1" runat="server">
                    <table ID="itemPlaceholderContainer" runat="server" border="0" style="">
                        <tr id="Tr2" runat="server" style="">
                            <th id="Th1" runat="server">
                                Name</th>
                            <th id="Th2" runat="server">
                                Text</th>
                            <th id="Th3" runat="server">
                                Date</th>
                        </tr>
                        <tr ID="itemPlaceholder" runat="server">
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </LayoutTemplate> 
</asp:ListView>

Answers


You can add an HTML link or a JavaScript into the ItemTemplate of your ListView pretty easily:

The "columns" are just HTML columns; in the ItemTemplate, you have access to all of your data, including id_number, so you can use it anywhere in the HTML, not just inside a column.

Since you wan the whole row to be clickable, I'd use a JavaScript function on the onClick event of the HTML table row <TR> element. You already have 2 events (onMouseOver, onMouseOut), with JavaScript in them, so this would just be one more...

A JavaScript redirect utilizes window.location.href which will redirect in the same window, assuming that's what you want (as opposed to a new window, etc.):

<ItemTemplate>
    <tr style="font-family: Arial; color: #FFFFFF" 
        onMouseOver="this.bgColor='#219DD0';" 
        onMouseOut="this.bgColor='#252526';"
        onClick="window.location.href = 'some/path/Page.aspx?id=<%# Eval("id_Number") %>';"
        <td>
            <asp:Label ID="Label1" runat="server" Text='<%# Eval("id_Number") %>' />
        </td>
        <td>
            <asp:Label ID="TextLabel" runat="server" Text='<%# Eval("Text") %>' />
        </td>
        <td>
            <asp:Label ID="DateLabel" runat="server" Text='<%# Eval("Date") %>' />
        </td>
    </tr>
</ItemTemplate>

One thing to note is for the path of Page.aspx, you have to use a relative path.

~/page.aspx?id=

Is a .net path that gets compiled into the full relative path to that page. However, bacause your ItemTemplate contains HTML, you'd need the full (relative) path to Page.aspx in there.

So instead it should be (just an example):

/some/path/page.aspx?id=   <-- page.aspx lives on http://www.yoursite.com/some/path/page.aspx
/page.aspx?id=             <-- page.aspx lives on root, http://www.yoursite.com/page.aspx

Alternately you can use

onClick="window.location.href = '<% System.Web.VirtualPathUtility.ToAbsolute("~/Page.Aspx?ID=" + Eval("id_number")); %>';"

Need Your Help

All Event listing on specified date in Google Calender api (V3) in java?

java google-calendar-api google-data-api

what I want to do is get all the events in a given google calendar for a given date.

How do I copy current folder name to the command line of Midnight commander?

mc

I need something similar to ctrl+enter in total commander, copy current selected folder name in the panel to the command line