Question

我有一个gridview。每一行都有一个备用名称（TextBox）和一个隐藏按钮，这个按钮必须在文本框中被JQuery点击＆＃34; onblur＆＃34;自动。

 <asp:GridView ID="GridView1" CssClass="GridView1" runat="server" AutoGenerateColumns="False" EnableViewState="True">
        <Columns>
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:CheckBox ID="checkbox1" runat="server" OnClick="checkboxing(this)" />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="City Name Id">
                <ItemTemplate>
                    <asp:Label ID="NameId" runat="server" Text='<%# Eval("Name_Id") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Alternate Names">
                <ItemTemplate>

                    <asp:TextBox runat="server" ClientIDMode="Static" ID="altTxtNames" Style="display: none" onblur="buttonupdate(this)"></asp:TextBox>
                    <asp:Button runat="server" ID="TxtButton" ClientIDMode="Static"  Style="visibility: hidden; display: none" OnClick="TxtButton_Click" />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

每当＆＃34; onblur＆＃34;事件发生在备用名称（文本框）

中

 onblur="buttonupdate(this)"

执行以下JQuery：

 function buttonupdate(alternateTxtNames) {
            $('#TxtButton').click();
        }

此按钮单击提示执行aspx.cs方法，其中编辑的＆＃34;备用名称＆＃34;和＆＃34;城市名称ID＆＃34;使用以下代码从单击的按钮网格视图行中选择：

 protected void TxtButton_Click(object sender, EventArgs e)
            {
                Button btn = (Button)sender;
                GridViewRow gvr = (GridViewRow)btn.NamingContainer;
                string updatedSNo = (gvr.FindControl("NameId") as Label).Text;
                int SNo = Convert.ToInt32(updatedSNo);
                string updatedText = (gvr.FindControl("altTxtNames") as TextBox).Text;
           }

但每次点击来自另一行时，只选择第一个gridview行值，我认为这是使用 ClientIDMode 的因果关系，因为它无法使用区分按钮点击与其他行。

我应该如何克服这个问题。有人可以指导。

Answer 1

除了使用重复ID的逻辑错误之外，如果通过jQuery附加事件处理程序，您将能够访问事件的目标。因此，在这种情况下，您可以使用jQuery事件处理程序，而不是onblur="buttonupdate(this)，而不是<asp:TextBox runat="server" ClientIDMode="Static" class="altTxtNames" Style="display: none" ></asp:TextBox>。

将id更改为class :(这是将处理程序附加到多个文本框所必需的）

function buttonupdate(row) {
     $(row).find('#TxtButton').click();
}

新功能：

$("#GridView1 .altTxtNames").on("blur", function(event){
   var clickedRow = $(event.target).closest("tr");
   buttonupdate(clickedRow);
});

jQuery事件处理程序：

this.form.get('lower.radiobuttonsControl').setValue(this.entity.radiobuttonValue);

上面的处理程序将获取blur事件，然后查找最接近的父tr，然后找到要在该行中单击的按钮。

我不熟悉asp，但上述问题应该只通过jQuery来解决。

Answer 2

这对我有用：

以下是GridView标记：

<input>

这是Jquery代码，它在复选框点击时将标签更改为文本框：

  <asp:TemplateField>
        <ItemTemplate>
            <asp:CheckBox ID="checkbox1" runat="server" OnClick="checkboxing(this)" />
        </ItemTemplate>
    </asp:TemplateField>

    <asp:TemplateField HeaderText="Alternate Names">
        <ItemTemplate>
            <asp:Label runat="server" ID="AlternateNames" Text='<%# Eval("alternateNames") %>'></asp:Label>
            <asp:TextBox runat="server" ID="altTxtNames" class="altTxtNameClass" Style="display: none"></asp:TextBox>
            <asp:Button runat="server" ID="TxtButton" Style="visibility: hidden; display: none" OnClick="TxtButton_Click" />
        </ItemTemplate>
    </asp:TemplateField>

这是在文本框模糊时触发的代码：

function checkboxing(chkbox) {
        var cellz = $(chkbox).parent();
        var lbl = $(cellz).siblings().find('span[id*=AlternateNames]');
        var txtbox = $(cellz).siblings().find('input[id*=altTxtNames]');

        if ($(chkbox).is(':checked')) {
            lbl.hide();
            var str = lbl.text();
            txtbox.val(str);
            txtbox.show();
        }
        else {
            lbl.show();
            txtbox.hide();
        }
    }

以下是从上面代码调用的代码：

$(document).ready(function () {
    $('.altTxtNameClass').on('blur', function (event) {
        var clickedRow = $(event.target).closest('tr');
        buttonupdate(clickedRow);
    });
});

下面是单击按钮后触发的代码

    function buttonupdate(row) {
        $(row).find('input[id*=TxtButton]').click();
    }

希望这对某人有所帮助。关于如何实现这个想法的Jquery的语法是由 Rich 提供的，所以要感谢他。

如何单击使用JQuery动态生成的按钮

2 个答案: