如何在asp.net中使用jquery在listview中触发按钮点击事件

how to trigger button click event inside listview with jquery in asp.net?

本文关键字：按钮 事件 listview asp net jquery      更新时间：2023-09-26

这是我的ListView控件：

<asp:ListView ID="PortfolioListView" runat="server" onitemcommand="PortfolioListView_ItemCommand">
  <ItemTemplate>
    <li class="item brick1 <%# Eval(" CategoryName ")%> isotope-item">
      <a class="item-popup" href="Gallery/195x195/<%# Eval(" MainImage ") %>" title="<%# Eval(" ShortDesc ") %>">
        <img src="Gallery/195x195/<%# Eval("MainImage") %>" alt="<%# Eval("Title") %>" />
        <div class="hover">
           <span class="Popup">
            <i class="fa fa-search-plus"></i>
          </span>
           <span><%# Eval("CategoryName")%></span>
        </div>
      </a>
      <div class="bottom">
        <div class="isotope-title"><span><%# Eval("Title")%></span>
        </div>
        <div class="like">
          <a class="update">
            <i class="fa fa-thumbs-o-up"></i>
            <span><%# Eval("Counter")%></span>
          </a>
          <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
              <div class="flike">
                <asp:LinkButton ID="LikeLBTN" runat="server" CssClass="likeBTN" ClientIDMode="AutoID" CommandName="Like" CommandArgument="<%# Bind('GalleryID') %>">
                  <i class="fa fa-thumbs-o-up"></i>
                  <span><%# Eval("Counter")%></span>
                </asp:LinkButton>
              </div>
            </ContentTemplate>
          </asp:UpdatePanel>
        </div>
      </div>
    </li>
  </ItemTemplate>
</asp:ListView>

我在ListView中有一个LinkButton，并且列表视图的onitemcommand事件由LinkButton(CommandName="Like" CommandArgument="<%# Bind('GalleryID') %>")触发。

aspx.cs:中的My PortfolioListView_ItemCommand

protected void PortfolioListView_ItemCommand(object sender, ListViewCommandEventArgs e)
{
    DBClass dbc = new DBClass();
    int index = int.Parse(e.CommandArgument.ToString());
    string cmd = e.CommandName;
    if (cmd == "Like")
    {
        string selstr = String.Format("Update Gallery set [Counter]=[Counter]+1 where GalleryID = {0}", index.ToString());
        int res = dbc.RunCommand(selstr);
        selstr = String.Format("SELECT GalleryID, Title, MainImage, Counter, ShortDesc, CategoryName FROM Gallery inner join GalleryCat on Gallery.CatID = GalleryCat.CatID Order By PDate desc");
        dbc.LoadInList(PortfolioListView, selstr);
    }
}

我希望当在ListView中用class="update"点击a标签时，LinkButton触发器的click事件和我在PortfolioListView_ItemCommand事件中的代码都能运行。现在，应该如何使用jquery或javascript来实现这一点？感谢

通常元素的客户端ID与服务器上分配的ID不同。因此，请先尝试获取clientId，然后尝试触发点击。

document.getElementById('<%= LikeLBTN.ClientID %>').click

您可以使用div中的类导航到特定的linkButton。

以下是使用HTML元素的示例代码：

$(document).on("click", ".update", function() {
  var aTag = $(this);
  var contentPanel = $(aTag).next().find(".contentPanel");
  var flike = $(contentPanel).find(".flike");
  var linkBtn = $(flike).find('.linkBtn');
  linkBtn.click();
})
$(document).on("click", ".linkBtn", function() {
  console.warn("Button clicked");
})
div {
  margin: 5px;
  padding: 5px;
  border: 1px solid gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a class="update">Link</a>
<div class="updatePanel">
  <div class="contentPanel">
    <div class="flike">
      <button class="linkBtn">Button</button>
    </div>
  </div>
</div>

我想当点击ListView中带有class="update"的"A"标签时，点击LiunkButton触发的事件

尝试添加点击事件来标记具有类update的a，然后当用户点击时，您可以触发另一个id为#LikeLBTN:的点击标记

$('body').on('click', '.update', function(){
     $('#LikeLBTN').click();
})

或者我建议使用另一个隐藏链接，如：

<asp:LinkButton runat="server" ID="SomeControl" onclick="someControlClicked"
  style="display:none; />

而不是$('#LikeLBTN').click();，您可以调用$('#SomeControl').click();。

希望这能有所帮助。

相关文章：