如何在 javascript 中获取 CommandArgument 的值？

Question

我有一个在屏幕上显示文件列表的 gridview。此视图中的列是一个名为 Edit 的 asp 链接按钮。当我单击编辑时，我想在 javascript 函数中获取命令参数的值。

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>

当我使用以下代码时，我在 chrome 控制台中收到一个错误，指出属性 CommandArgument 未定义。错误的确切文本是

未捕获的类型错误：无法读取属性“CommandArgument”的 未定义

我的代码中缺少什么？

at OnEditClick (Default.aspx:34)

Answer 1

由于您的命令参数是 Id，请尝试将 Id 隐藏字段添加到您的 gridview 列

<asp:TemplateField>
    <ItemTemplate>
      <span style="display:none"><%# Eval("Id") %></span>
  <asp:LinkButton runat="server" Id="lnkEditButton"
OnClientClick="OnEditClick()"
   Text="Edit" CommandName="EditDocument"
CommandArgument='<%#Eval("Id")%>'/>
</ItemTemplate>
  </asp:TemplateField>

并使用 javascript 在编辑点击时获得价值

var id = $(this).closest("tr").find('span').html();

Answer 2

我会向 LinkBut​​ton 添加一个单独的数据属性并从中读取。

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

然后在OnEditClick 中您可以读取该属性。

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

更新

没有 jQuery 你可以做到这一点。确保您更改为OnClientClick="OnEditClick(this)"

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