本文將介紹在 GridView 的 HyperLinkField 資料行中實現 window.open 效果的可能解決方案。
【情境描述】
朋友 Kazuya 和筆者討論到如何在 GridView 的 HyperLinkField 資料行，做到點了 HyperLink 之後以 window.open 方式開啟網頁的效果，實現的方式很多種，筆者以下一節的方式來嘗試做出朋友所需要的效果。
【實作步驟】
首先從工具箱中拉一個 GridView 控制項至 *.Aspx 檔案，為示範方便筆者使用 SqlDataSource 控制項，連接 LocalDB 中的 Northwind 資料庫，讀取 Region 資料表來顯示到 GridView 之中，其中將 RegionID 資料行以 HyperLinkField 呈現，RegionDescription 則由 BoundFiled 呈現，程式碼如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="WebApplication2.WebForm3" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> </head> <body> <form id="form1" runat="server"> <div> <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="RegionID" DataSourceID="SqlDataSource1" OnRowDataBound="GridView1_RowDataBound"> <Columns> <asp:HyperLinkField DataTextField="RegionID" HeaderText="RegionID" Text="RegionID" /> <asp:BoundField DataField="RegionDescription" HeaderText="RegionDescription" SortExpression="RegionDescription" /> </Columns> </asp:GridView> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NWConnectionString %>" SelectCommand="SELECT * FROM [Region]"></asp:SqlDataSource> </div> </form> </body> </html>
接著在 GridView.RowDataBound 事件中以 foreach 巡覽 GridView 的第 1 個 Cell（第 5 列）中的所有控制項，找到控制項型別為 HyperLink 的控制項（第 7 列）後將之轉型為 HyperLink 控制項（第 9 列），最後利用 AttributeCollection.Add 方法來加入 Client 端的 onclick 事件，並設定 onclick 事件觸發時利用 window.open 開啟另一個網頁（第 10 列），若您不指定 HyperLink.NavigateUrl 屬性則 Render 到 Client 端時並不會出現 HyperLink 該有的底線，因此筆者將之設定為 #，以防止點了 HyperLink 後被導到不同頁面。程式碼如下：
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.DataRow) { foreach (Control c in e.Row.Cells[0].Controls) { if (c.GetType().Equals(typeof(HyperLink))) { HyperLink hl = (HyperLink)c; hl.Attributes.Add("onclick", "window.open('WebForm1.aspx');"); hl.NavigateUrl = "#"; } } }
透過上述的做法就可以在 HyperLinkField 資料行中實現 window.open 效果。
【參考資料】
- Creating or Opening New Windows (pop-up) in JavaScript
- Opening a new window from a HyperLinkField of gridview in asp.net