使用 JQuery 将 Click 事件添加到 GridView 中的 TextBox

Add Click Event to TextBox in GridView Using JQuery

提问人：Demetrius Rhodes 提问时间：9/26/2023 最后编辑：codeandcloudDemetrius Rhodes 更新时间：9/27/2023 访问量：41

问：

我正在尝试访问我的文本框并添加单击事件。我在文本框之外添加了一个单击事件，使用 .GridviewGridviewjQuery

<asp:TextBox ID = "dcrTxtBoxAll" runat="server"
    style="Z-INDEX: 120; LEFT: 783px; POSITION: absolute; TOP: 111px; width: 432px; height: 71px;"
    ClientIDMode="Static" 
    Text='<%# Bind("Description") %>' 
    Visible="false" 
    TextMode="MultiLine">
</asp:TextBox>

Javascript的

<script type="text/javascript" src="jquery-3.7.1.js"></script>

<script type="text/javascript">
    // This function adds a click listener to the dcrTxrBoxAll textbox. When the textbox is clicked the update button and the GridView Rows textboxes are disabled
    $("#dcrTxtBoxAll").on('click', function()
    {
        $("#cmdUpdate").val('Update All'); // Changed the button text

        // Loop through the GridView and disable each text box
        $("#GridView1 tr").each(function ()
        {
            var $this = $(this);
            var $dcrTextBox = $("#dcrTextBox", $this); // Get the textbox at each row
            $dcrTextBox.prop("disabled", true); // Disable the textbox
        });

        $("*").unbind("click"); // Removes all click handlers added by javascript from every element
        $("[onclick]").removeAttr("onclick"); // Finds all elements with an 'onclick' attribute, and removes that attribute
    });
</script>

我尝试了类似的方法，但我无法让它工作。

这是：GridView

<asp:GridView ID="GridView1"
              runat="server"
              style="Z-INDEX: 120; LEFT: 410px; POSITION: absolute; TOP: 244px; width: 698px; height: 251px;"
              BackColor="DeepSkyBlue"
              AutoGenerateColumns="False"
              BorderStyle="Solid"
              BorderColor="Black"
              AllowSorting="True"
              PageSize="15"
              AllowMultiRowSelection="true"
              ShowHeaderWhenEmpty="true"
              GridLines="None">
  <RowStyle backcolor="White" />
  <SelectedRowStyle BackColor="Yellow" />
  <Columns>
    <asp:TemplateField>
      <HeaderTemplate>
        <asp:CheckBox ID="ChkHeader"
                      runat="server"
                      AutoPostBack="true"
                      OnCheckedChanged="ChkHeader_CheckedChanged" />
      </HeaderTemplate>
      <ItemTemplate>
        <asp:CheckBox ID="ChkEmpty"
                      runat="server"
                      AutoPostBack="true"
                      OnCheckedChanged="ChkEmpty_CheckedChanged" />
      </ItemTemplate>
    </asp:TemplateField>
    <asp:BoundField DataField="RequestorId"
                    HeaderText="Requestor Id"
                    ReadOnly="True">
    </asp:BoundField>
    <asp:BoundField DataField="FileName"
                    HeaderText="File Name"
                    ReadOnly="True">
    </asp:BoundField>
    <asp:BoundField DataField="FolderName"
                    HeaderText="Sub Folder Name"
                    ReadOnly="True">
      <HeaderStyle HorizontalAlign="Center"
                   Width="24px"
                   VerticalAlign="Middle"></HeaderStyle>
      <ItemStyle HorizontalAlign="Center"></ItemStyle>
    </asp:BoundField>
    <asp:BoundField DataField="ModifiedDt"
                    HeaderText="Uploaded Dt"
                    ReadOnly="True">
      <HeaderStyle HorizontalAlign="Center"
                   Width="48px"></HeaderStyle>
      <ItemStyle HorizontalAlign="Center"></ItemStyle>
      <HeaderStyle HorizontalAlign="Center"
                   Width="96px" />
      <ItemStyle HorizontalAlign="Left" />
    </asp:BoundField>
    <asp:TemplateField HeaderText="Description of Change/Reason"
                       ItemStyle-Width="300px">
      <ItemTemplate>
        <asp:Label ID="dcrLabel"
                   runat="server"
                   Text='<%# Bind("Description") %>'></asp:Label>
        <asp:TextBox ID="dcrTextBox"
                     runat="server"
                     ClientIDMode="Static"
                     Text='<%# Bind("Description") %>'
                     Visible="false"
                     TextMode="MultiLine"></asp:TextBox>
      </ItemTemplate>
    </asp:TemplateField>
  </Columns>
</asp:GridView>

这是我尝试访问中的文本框的内容。我似乎无法让它注册点击。GridView

<script type="text/javascript">
    $('#dcrTextBox').on('click', function() {
        alert('Hello');
    });
</script>`
GridView asp.net jQuery

评论

答：

1赞 Albert D. Kallal 9/26/2023 #1

好吧，该文本框 ID 是“dcrTextBox”。

但是，由于它在 GridView 中重复了很多次，那么上面的 TextBox 将引用哪一行和哪个实例？

请记住，HTML 标准是不允许在同一页面上使用相同 ID 的控件。因此，如果您有 10 行，那么您将在标记中看到 10 行，并且该行上的每个控件都将具有自己自动生成的 ID。

但是，当将控件、文本框或几乎任何控件拖放到网页中时？

为什么要使用jQuery将某些事件连接到控件？我认为没有真正的理由这样做，现在你有更难阅读的标记，因为你有一个按钮，或者像文本框一样的控件，现在在该页面的标记中的其他一些地方，你必须知道，必须找到，必须寻找连接该事件的jQuery。因此，对于按钮或文本框，在大多数情况下，最好只将事件添加到控件中。

因此，当开发人员查看该控件时，您可以看到某个事件附加到该控件。因此，您不必在页面上的其他地方查找即可知道/查看/发现某些jQuery代码现在决定将某些事件连接到该控件。这增加了开发人员的上下文和脑力劳动量，并使调试此类页面变得相当困难。

要100%清楚？jQuery能够在页面上附加和连接控件事件，并针对许多控件执行此操作，这是jQuery的一个非常出色的功能。因此，我强烈建议使用 jQuery 选择器来连接页面上的事件。

但是，如果不需要选择多个控件并将事件连接到这些控件的功能，则只需使用给定控件标记中定义的常规纯 Jane 事件。

为文本框定义单击事件的几个额外结果之一是，我们可以自由地使用给定的单击事件传递其他参数。

所以，我们可以这样说：

<asp:TemplateField HeaderText="Description">
    <ItemTemplate>
        <asp:TextBox ID="txtDesc" runat="server"
            TextMode="MultiLine" 
            Text='<%# Eval("Description") %>'
                onclick='<%# $"myrowclick(this,{Eval("ID")},{Container.DataItemIndex});return false" %>'
            >
        </asp:TextBox>
    </ItemTemplate>
</asp:TemplateField>

因此，在上面，我们传递了控件“this”，我们传递了数据库行 PK id，我们传递了行索引。

因此，上面的标记是 GridView 的一部分，如下所示：

<asp:GridView ID="GVHotels" runat="server" AutoGenerateColumns="False"
    DataKeyNames="ID" CssClass="table table-hover" 
    Width="55%"
    >
    <Columns>
        <asp:BoundField DataField="FirstName" HeaderText="FirstName" />
        <asp:BoundField DataField="LastName" HeaderText="LastName" />
        <asp:BoundField DataField="City" HeaderText="City" />
        <asp:BoundField DataField="HotelName" HeaderText="Hotel" />
            <asp:TemplateField HeaderText="Description">
                <ItemTemplate>
                    <asp:TextBox ID="txtDesc" runat="server"
                        TextMode="MultiLine" 
                        Text='<%# Eval("Description") %>'
                            onclick='<%# $"myrowclick(this,{Eval("ID")},{Container.DataItemIndex});return false" %>'
                        >
                    </asp:TextBox>
                </ItemTemplate>
            </asp:TemplateField>
        <asp:TemplateField HeaderText="Bookings">
            <ItemTemplate>
                <asp:Button ID="cmdView" runat="server" Text="Bookings" 
                    class="btn myshadow"
                    OnClientClick="return callme(this)"
                    OnClick="cmdView_Click" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

要加载的代码隐藏：

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    If Not IsPostBack Then
        LoadGrid
    End If

End Sub

Sub LoadGrid()

    GVHotels.DataSource = MyRst("SELECT * FROM tblHotelsA
                                WHERE ID IN (select Hotel_id FROM BOOKINGS)
                                ORDER BY HotelName")
    GVHotels.DataBind()

End Sub

我们现在有这个结果：

enter image description here

因此，由于 GridView 控件“重复”了该文本框，因此不妨在标记中添加一次单击事件。如上所示，这具有传递数据库 PK ID、行索引等值的额外优势，当然还有对传递的控件使用“this”。

评论

0赞 Naveen J 9/27/2023
很好的答案。你用什么工具来制作这个GIF？
1赞 Albert D. Kallal 9/27/2023
我使用屏幕来gif。这个： screentogif.com

上一个：DevExpress GridView SQL：如何在不添加列的情况下向绘制的表添加新数据？

下一个：无法连接到服务器 - 与网络相关或特定于实例的错误