如何在GridView的HyperLinkField中弹出指定样式的新窗口（含传参及母版页场景）

Got it, let's break down how to get that custom popup window working with your GridView, while keeping your existing logic for handling attachments and ID parameters.

The Core Issue #

The HyperLinkField control doesn't support adding client-side onclick events directly—something we need to trigger the custom window behavior. So we'll swap it out for a TemplateField that lets us fully customize the link's functionality.

Step 1: Replace HyperLinkField with TemplateField #

Update your GridView column definition to use a TemplateField instead. Inside it, we'll use an <asp:HyperLink> control where we can add the client-side click handler, while retaining your existing URL logic.

<asp:GridView ID="yourGridViewID" runat="server" ...>
    <Columns>
        <!-- Your other columns here -->
        <asp:TemplateField HeaderText="View/Upload">
            <ItemTemplate>
                <asp:HyperLink 
                    ID="hlAction" 
                    runat="server"
                    Text='<%# String.IsNullOrEmpty(Eval("Attachment").ToString()) ? "Upload Details" : "View Attachment" %>'
                    NavigateUrl='<%# String.IsNullOrEmpty(Eval("Attachment").ToString()) 
                        ? String.Format("sDetailsUpload.aspx?sID={0}", _2Version_Mprep.Base64ForUrlEncode(Eval("ID").ToString())) 
                        : Eval("Attachment").ToString() %>'
                    onclick="openCustomWindow(this.href); return false;">
                </asp:HyperLink>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

Step 2: Add the Client-Side Window Opening Function #

Next, add a JavaScript function to your page (either in the content page's <asp:Content> block or the master page, depending on where you want it available). This function controls the popup's features:

<script type="text/javascript">
    function openCustomWindow(url) {
        // Define your window properties here
        const windowOptions = "toolbar=no, resizable=no, width=800, height=600, left=150, top=150";
        // Open the window with the custom options
        window.open(url, "_blank", windowOptions);
    }
</script>

Key Details Explained #

• toolbar=no: Removes the browser toolbar from the popup window.
• resizable=no: Prevents users from resizing the window.
• width/height/left/top: Adjust these values to set the popup's default size and initial position (tweak as needed for your UI).
• return false: This stops the default link navigation behavior, ensuring the link only opens via our custom window.open call.
• Master Page Compatibility: Since we're using relative URLs and client-side JavaScript, the master page doesn't interfere with this setup—your URL logic (including the Base64-encoded ID) will work exactly as before.

Quick Testing Tips #

• If your attachment URLs are external links, they'll still open in the custom popup (unless the external site has frame restrictions, which is a browser security limitation).
• Double-check that your _2Version_Mprep.Base64ForUrlEncode method correctly encodes the ID to avoid issues with special characters in the query string.

内容的提问来源于stack exchange，提问作者Chevy Mark Sunderland