Question

在gridview中调用jquery函数。当我点击链接按钮打开div时，我想发生什么。我有问题，这个案子不起作用。

的JavaScript

function toggleDiv(divId) {
    $("#shoow").toggle('slow');
}

HTML标记

<asp:GridView ID="GridView1" runat="server" 
    AutoGenerateColumns="False" 
    CellPadding="4"
    ForeColor="#333333" 
    GridLines="None" 
    Width="507px" 
    Height="294px">
    <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:Label ID="Label1" runat="server" Text='<%# Eval("CategoryName")%>'></asp:Label>
                <br />
                <asp:LinkButton ID="LinkButton1" runat="server" OnClientClick="toggleDiv('Shoow'); return false;">
                    LinkButton</asp:LinkButton>
                <div id="Shoow" style="background-color: blue; width: 150px; height: 150px; display: none;">
                </div>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:Label ID="Label2" runat="server" Text='<%# Eval("Description")%>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
    <EditRowStyle BackColor="#999999" />
    <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
    <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
    <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
    <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
    <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
    <SortedAscendingCellStyle BackColor="#E9E7E2" />
    <SortedAscendingHeaderStyle BackColor="#506C8C" />
    <SortedDescendingCellStyle BackColor="#FFFDF8" />
    <SortedDescendingHeaderStyle BackColor="#6F8DAE" />
</asp:GridView>

Answer 1

进行这些更改

标记

将点击的元素作为自己传递，如toggleDiv(this)
删除div的ID

示例代码

<ItemTemplate>
    <asp:Label ID="Label1" runat="server" Text='<%# Eval("CategoryName")%>'>
    </asp:Label>
    <br />
    <asp:LinkButton ID="LinkButton1" runat="server" 
            OnClientClick="javascript:toggleDiv(this);return false;">
        LinkButton</asp:LinkButton>
    <div style="background-color: blue; width: 150px; height: 150px; display: none;">
    </div>
</ItemTemplate>

JavaScript（切换单击元素旁边元素的可见性）

function toggleDiv(elm) {
    $(elm).next().toggle('slow');
}

Answer 2

每当我需要从Gridview执行JS时，我会尽量避免使用像LinkButton这样的asp控件，因为它们往往会导致你需要阻止的回发，这可以做到，但我发现嵌入一个更容易基本的html按钮或img标签，为你的JS设置onclick。没有回发，也没有额外的代码来阻止回发。

<asp:TemplateField>
  <ItemTemplate>
    <asp:Label ID="Label1" runat="server" Text='<%# Eval("CategoryName")%>'></asp:Label>
    <br />
    <button ID="LinkButton1" runat="server">Button Text</button>
    <div id="Shoow" runat=server style="background-color: blue; width: 150px; height: 150px; display: none;">
    </div>
  </ItemTemplate>
</asp:TemplateField>

然后在OnRowDatabound事件中，您执行以下操作，因为runat="server"已设置：

dim btn as HtmlButton = e.Row.FindControl("LinkButton1")
dim div as HtmlContainer = e.Row.FindControl("Shoow")

dim js as String = String.Format("toggleDiv('#{0}')", div.UniqueID)
btn.Attributes.Add("onclick", js)

和JS：

function toggleDiv(divId) {
  $(divId).toggle('slow');
}

在gridview中调用jquery函数

2 个答案: