Pass ID from GridView row to Javascript function

Question

The first commented line below is working with a hardcoded ApplicantId, and all I need is to make it work by passing the current ApplicantId column on the same gridrow.

I've tried for many days now, and something like the second commented line does not work for me. Please help.

<asp:GridView ID="GridView1" runat="server" AllowPaging="True" 
DataKeyNames="ApplicantID" >
<Columns>

<asp:TemplateField HeaderText="Select">
<ItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" />
</ItemTemplate>
</asp:TemplateField>

<!-- works -->
<asp:HyperLinkField NavigateUrl="javascript:popUp(3)" Text="Select" Target="_parent"/>

<!-- doesn't work -->
<asp:HyperLinkField NavigateUrl='"javascript:popUp("<%# + DataBinder.Eval(GridView1.DataItem,"ApplicantId") %> + ")"' Text="View" />

</Columns>
</asp:GridView>

Answer 1

Frustratingly, I've never been able to get a HyperLinkField to output sensibly when trying to produce a javascript Url. The following, however, will work for you:

<asp:TemplateField>
    <ItemTemplate>
        <asp:HyperLink runat="server" 
          NavigateUrl='<%# "javascript:popUp(" + Eval("ApplicantId") + ")" %>'
          Text="View">
        </asp:HyperLink>
    </ItemTemplate>
</asp:TemplateField>

One thing that might be worth remembering for any time when you're not producing a javascript Url is the DataNavigateUrlFields and DataNavigateUrlFormatString properties as they allow you to put together the Url in a much cleaner way:

<!-- Doesn't work due to "javascript:" target -->
<asp:HyperLinkField Text="View" DataNavigateUrlFields="ApplicantId"
     DataNavigateUrlFormatString="javascript:popUp({0})" />
<!-- Does work as targeting a "http://" target -->
<asp:HyperLinkField Text="View 2" DataNavigateUrlFields="ApplicantId" 
     DataNavigateUrlFormatString="http://localhost/popUp/{0}/" />