GridView value when using Javascript to open page

In my GridView I have a HyperLink which takes a value from the selected row and opens it in a new page. This works fine. Howevever, I need to call a javascript to open the page instead. Once I do this though, I lose the value of the selected row and instead only get the value of the last row in the GridView. Using SelectedIndexChanged handler isn't an option either as I have three other hyperlinks on the given row and this prevents the others from working correctly if I use that. So how can I get the value needed while also calling a JavaScript function to open the URL?

My aspx:

<head id="Head1" runat="server">
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />  
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type = "text/javascript">
    function showComments() {
        var mydiv = $('#commentDiv');
        mydiv.dialog({
            autoOpen: false, modal: true, title: 'My Comments', width: '50%',
            position: { my: 'top', at: 'top+150' }
        });
        // Open the dialog
        mydiv.dialog('open');
    }
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="GridContainer">
        <asp:GridView ID="GridView1" runat="server" DataKeyNames="ID"
            onrowcreated="GridView1_RowDataBound">
            <Columns>
                <asp:TemplateField ItemStyle-Wrap="False" ItemStyle-Width="10%">
                    <ItemTemplate>
                        <asp:HyperLink ID="CommentHyperLink" runat="server">
                            <img  src="images/search.png" /></asp:HyperLink>
                    </ItemTemplate>
                </asp:TemplateField>    
            </Columns>
        </asp:GridView>
        <div id="commentDiv" runat="server" style="display:none">
            <iframe id="commentPage" name="commentPage" runat="server"></iframe>
        </div>
    </div>
    </form>
</body>

This works fine, when I'm not calling my JavaScript for navigation:

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        HyperLink commentHyperLink = (HyperLink)e.Row.FindControl("CommentHyperLink");

        int _id = Convert.ToInt32(DataBinder.Eval(e.Row.DataItem, "ID"));
        
        commentPage.Attributes["src"] = "Page2.aspx?id=" + _id;
        //commentHyperLink.Attributes.Add("onclick", " showComments(); return false;");
        commentHyperLink.NavigateUrl = "Page2.aspx?id=" + _id;
        return;
    }
}

However, if I switch the last 4 lines as shown below, I am not getting the correct value of _id. I think I understand why, I just can't figure out how to solve it.

commentPage.Attributes["src"] = "Page2.aspx?id=" + _id;
commentHyperLink.Attributes.Add("onclick", " showComments(); return false;");
//commentHyperLink.NavigateUrl = "Page2.aspx?id=" + _id;
return;

Solution

Well, I'm not clear why you're using a hyperlink (since I presume you want a button that when clicked on will open the other page. (But, you could even pop a jQuery dialog on the same page if you wish - I often do that).

Regardless, we simply want a button click that runs your code to open the new page, and pass along the "ID" value.

Also, you seem to have a popup for comments on the current page - I'll ignore that code and issue.

So, simply add a button to the markup, and we probably don't really need to use the row data bound event to set this up, but I suppose we could.

So, our button in the GV could look like this:

        <asp:GridView ID="GridView1" runat="server"
            AutoGenerateColumns="False" DataKeyNames="ID"
            CssClass="table table-hover" Width="50%">
            <Columns>
                <asp:BoundField DataField="FirstName" HeaderText="FirstName" />
                <asp:BoundField DataField="LastName" HeaderText="LastName" />
                <asp:BoundField DataField="City" HeaderText="City" />
                <asp:BoundField DataField="HotelName" HeaderText="HotelName" />
                <asp:BoundField DataField="Description" HeaderText="Descripiton" />
                <asp:TemplateField HeaderText="Edit">
                    <ItemTemplate>
                        <button id="cmdEdit"
                            onclick='window.open("EditHotel.aspx?id=<%# Eval("ID") %>","_blank")'>
                            <span aria-hidden="true" class="fa  fa-pencil-square-o fa-lg"></span>
                        </button>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>

In place of trying to stuff in some expression on row data bound, we can just use a server expression for the onclick.

Hence, our code behind was this:

     protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
            LoadData();
    }

    void LoadData()
    {
        string strSQL =
            @"SELECT * FROM tblHotelsA
            WHERE Active = 1
            ORDER BY HotelName";

        GridView1.DataSource = General.MyRst(strSQL);
        GridView1.DataBind();
        
    }

And the result is now this:

Clicking on the button will thus navigate (open a new tab), and pass the PK id to the URL.

Edit: User wants a popup on the SAME page

The approach to this issue is MUCH the same. The only real difference is we need to of course "load up" the data into that div area BEFORE we going to popup up the data.

Now, we could 100% use JavaScript, and call a web method we write for the given page. This would eliminate a post-back, but really, oh so much easier to just use a simple button + server side code for this.

Hence, we:

Click a button - server side code runs.

Server side code gets the row data. Server side code fills out the controls and text boxes for the information in that div we are about to popup.

And THEN after all the server code runs, we then call/run our jQuery.UI popup code (client side code).

In fact, in some ways this is easier then writing code to jump to another page (and I thus had miss-read the goal here). So, I do this all the time from a GV, and it really easy to implement, and the GV button click does not require any client side events.

So, now our button code becomes this: (ONLY server side code).

So, the GV button is now this:

                <asp:TemplateField HeaderText="Edit">
                    <ItemTemplate>
                        <button id="cmdEdit" runat="server"
                            onserverclick="cmdEdit_ServerClick"
                            >
                            <span aria-hidden="true" class="fa  fa-pencil-square-o fa-lg"></span>
                        </button>
                    </ItemTemplate>
                </asp:TemplateField>

(for ease of this post, I kept using a non asp button. However, adding a runat="server" to the button produces a button that really works just the same as a asp.net button.

So, on button click, our code behind is this:

    protected void cmdEdit_ServerClick(object sender, EventArgs e)
    {
        HtmlButton btn = (HtmlButton)sender;
        GridViewRow gRow = (GridViewRow)btn.NamingContainer;
        int PK = (int)GridView1.DataKeys[gRow.RowIndex]["ID"];
        Session["PK"] = PK; // we use this for our save edits code

        string strSQL =
            @"SELECT * FROM tblHotelsA
            WHERE ID = @id";

        SqlCommand cmdSQL = new SqlCommand(strSQL);
        cmdSQL.Parameters.Add("@id",SqlDbType.Int).Value = PK;
        DataRow rHotel = General.MyRstP(cmdSQL).Rows[0];

        General.FLoader(HotelInfo, rHotel); // load row into controls in div HotelINfo

        // call the client side pop div
        // (we pass hotel name for the pop title)
        string sHotelName = rHotel["HotelName"].ToString();
        string sJava = $@"popinfo('{sHotelName}')";

        ScriptManager.RegisterStartupScript(Page, Page.GetType(), "mypop",sJava, true);

    }

Note VERY closely in above we do NOT and did not have to expose the database PK id (you in general don't want to do this for reasons of security - if you expose the database PK to the client side code and use it? Then a user can simply hit F12 browser tools, and change that "id" to anything they want - including PK id's that may well not belong to that logged on user!

So, note how the button click does:

We get the button clicked.

We then get the GridView row clicked (index).

From that we get a "index" into the datakeys[] colleciton. And that collection is 100% server side, thus we don't have to include, expose, or show the database primary keys to the client side browser.

Once we have the PK, then we grab that row from the database.

With that, then we call a routine to load up the controls in the hidden div. I fast became tired of writing code over and over, so I wrote a "general" routine that can automatic load up controls in a given div and data row passed.

So, the pop div probably not really important, so I'll only post a bit of that markup.

Hence this is the div we are to popup:

    <div id="HotelInfo" runat="server" 
        style="float:left;display:none;width:48%"
        clientidmode="Static" >

    <div style="float:left" class="iForm">
            <label>HotelName</label>
            <asp:TextBox ID="txtHotel" runat="server"  width="280" f="HotelName" ></asp:TextBox> <br />

            <label>First Name</label>
            <asp:TextBox ID="txtFirst" runat="server"  width="280" f="FirstName"></asp:TextBox> <br />

            <label>Last Name</label>
            <asp:TextBox ID="txtLast" runat="server"  width="280" f="LastName"></asp:TextBox> <br />

(note the "custom" and "made up" attribute I add to textboxes (f="some column name from database"). This is how the "general" routine knows what database columns to load into what control.

And a bit more of our popup div looks like this:

        <div style="clear:both">
            <asp:Button ID="cmdSave" runat="server" Text="Save" CssClass="btn myshadow" />
            <asp:Button ID="cmdCancel" runat="server" Text="Cancel" CssClass="btn myshadow"
                style="margin-left:20px" OnClientClick="$('#HotelInfo').dialog('close');return false;"
                />
            <asp:Button ID="cmdDelete" runat="server" Text="Delete" CssClass="btn myshadow"
                style="margin-left:40px"
                />
        </div>

So, the save button code?

It just does the "reverse" of that "general" code. (so, it transfers the controls back into the data row, and then saves the data back to the database.

So, the save part looks like this:

    protected void cmdSave_Click(object sender, EventArgs e)
    {
        int PK = (int)Session["PK"];
        General.FWriter(HotelInfo, PK, "tblHotelsA");
        LoadData(); // refresh grid to show any edits
    }

So, with all the above?

Then the end result is this: