Ottieni GridView la riga selezionata DataKey in Javascript

Question

Ho GridView che posso selezionare una riga. Ho quindi un pulsante sopra la griglia chiamato Modifica su cui l'utente può fare clic per aprire una finestra e modificare la riga selezionata. Quindi il pulsante avrà un codice Javascript dietro di esso lungo le linee di

function editRecord()
{
  var gridView = document.getElementById("<%= GridView.ClientID %>");
  var id = // somehow get the id here ???
  window.open("edit.aspx?id=" + id);
}

La domanda è: come recuperare l'ID record selezionato in JavaScript?

Answer 1

L'ho elaborato in base alla risposta di JasonS. Quello che ho fatto è stato creare un campo nascosto in Grid View in questo modo:

<asp:TemplateField ShowHeader="False">
    <ItemTemplate>
      <asp:HiddenField ID="hdID" runat="server" Value='<%# Eval("JobID") %>' />
    </ItemTemplate>
</asp:TemplateField>
<asp:TemplateField Visible="False">
    <ItemTemplate>
      <asp:LinkButton ID="lnkSelect" runat="server" CommandName="select" Text="Select" />
    </ItemTemplate>
</asp:TemplateField>

Quindi su OnRowDataBind hai il codice per impostare la riga selezionata

protected virtual void Grid_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        // Click to highlight row
        Control lnkSelect = e.Row.FindControl("lnkSelect");
        if (lnkSelect != null)
        {
            StringBuilder click = new StringBuilder();
            click.AppendLine(m_View.Page.ClientScript.GetPostBackClientHyperlink(lnkSelect, String.Empty));
            click.AppendLine(String.Format("onGridViewRowSelected('{0}')", e.Row.RowIndex));
            e.Row.Attributes.Add("onclick", click.ToString());
        }
    }            
}

E poi nel Javascript ho un codice come questo

<script type="text/javascript">

var selectedRowIndex = null;

function onGridViewRowSelected(rowIndex)
{        
    selectedRowIndex = rowIndex;
}

function editItem()
{   
    if (selectedRowIndex == null) return;

    var gridView = document.getElementById('<%= GridView1.ClientID %>');                
    var cell = gridView.rows[parseInt(selectedRowIndex)+1].cells[0];        
    var hidID = cell.childNodes[0];        
    window.open('JobTypeEdit.aspx?id=' + hidID.value);
}

</script> 

Funziona a meraviglia :-)

Answer 2

1) cambia la tua funzione javascript per usare un parametro

function editRecord(clientId)
{ ....

2) genera la chiamata nel tuo pulsante editRecord ... se vuoi evitare di gestire gli ID generati .net, usa semplicemente un

<input type="button" onclick="editRecord(your-rows-client-id-goes-here)" />

Answer 3

Sulla base dei tuoi commenti alla risposta di @ DaveK, in javascript puoi impostare l'id di un campo nascosto sul clientId della riga selezionata quando l'utente lo seleziona. Quindi fai in modo che la tua funzione editRecord usi il valore impostato nel campo del modulo nascosto.

Answer 4

si potrebbe evitare del tutto javascript, impostando i tag di ancoraggio precompilati con la stringa di query per ogni riga (anche se ciò influirà sul layout della tabella, sarà necessario solo un clic anziché 2 dall'utente)

inserisci nel modello gridview:

<asp:HyperLink runat="server" ID="editLink" Target="_blank"
   NavigateURL='<%# Eval("JobID","edit.aspx?id={0}") %>'> 
     Edit..
</asp:HyperLink>