javascriptasp.netwebformsasplinkbuttoncommandargument

How can I get the value of the CommandArgument in javascript?


I have a gridview that displays a list of files on screen. The column in this view is an asp link button titled Edit. When I click edit, I want to get the value of the commandargument in a javascript function.

function OnEditClick(s, e)
{
    console.log('on edit click fired')
    var values = [];
    values[0] = "Enter document description";
    values[1] = "Edit";
    values[3] = e.CommandArgument.ToString();
    console.log('slowly but surely getting there from here... '+ values[3])
}

<asp:GridView AlternatingRowStyle-CssClass="gridViewAlternatingRow"
    AutoGenerateColumns="False"
    DataKeyNames="Id"
    HeaderStyle-CssClass="gridViewHeader"
    ID="gvDocuments"
    ClientInstanceName="gvDocument"
    OnRowEditing="OnRowEditing"
    RowStyle-CssClass="gridViewRow" runat="server" Caption="DocumentList" CaptionAlign="Right">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:LinkButton CommandArgument='<%#Bind("Id") %>' CommandName="DocDownload" ID="lnkDownload"
                    runat="server" Text="Download">
                </asp:LinkButton>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderStyle-HorizontalAlign="Center" HeaderText="ID">
            <ItemTemplate>
                <asp:Label CssClass="txtAlignCenter" ID="lblId" runat="server" Text='<%#Bind("Id") %>' Width="50px"></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Type">
            <ItemTemplate>
                <asp:Label ID="lblContentType" runat="server" Text='<%#Bind("ContentType") %>' Width="210px"></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Name">
            <ItemTemplate>
                <asp:Label ID="lblDescription" runat="server" Text='<%#Bind("Description") %>' Width="380px"></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Document Desc">
            <ItemTemplate>
                <asp:Label ID="lblDocDescription" runat="server" Text='<%#Bind("DocumentDescription") %>' Width="380px">
                </asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:LinkButton runat="server" ID="lnkEditButton"
                    OnClientClick="OnEditClick()"
                    Text="Edit" CommandName="EditDocument"
                    CommandArgument='<%#Eval("Id")%>' />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

When I use the following code, I get an error in the chrome console stating that the property CommandArgument is undefined. The exact text of the error is

Uncaught TypeError: Cannot read property 'CommandArgument' of undefined

What is missing in my code?

at OnEditClick (Default.aspx:34)

Solution

  • I would add a separate data property to the LinkButton and read from that.

    <asp:LinkButton runat="server" ID="lnkEditButton"
        OnClientClick="OnEditClick(this.id)"
        Text="Edit" CommandName="EditDocument"
        CommandArgument='<%# Eval("Id") %>' 
        data-argument='<%# Eval("Id") %>' />
    

    Then in OnEditClick you can read that property.

    <script>
        function OnEditClick(element) {
            alert($('#' + element).data('argument'));
        }
    </script>
    

    Update

    Without jQuery you can do this. Make sure you change to OnClientClick="OnEditClick(this)"

    <script>
        function OnEditClick(element) {
            alert(element.getAttribute('data-argument'));
        }
    </script>