在网格视图中添加带有文本框的 runat 服务器标记时使用 jquery 函数

Posted 2023-05-08

【中文标题】在网格视图中添加带有文本框的 runat 服务器标记时使用 jquery 函数

【英文标题】：using jquery function when added runat server tag with textbox inside grid view

【发布时间】：2020-09-19 16:21:48

【问题描述】：

我在 gridview 中有两个用于值转换的文本框。在 gridview 之外，jJquery 函数运行良好。但是当我在 gridview 中添加文本框时，它不起作用。

<asp:GridView ID="GridCustomer" runat="server" DataKeyNames="ID">
    <Columns>

        <asp:TemplateField HeaderText="Status Reading">
            <ItemTemplate>                                               
               <input type="text" runat="server" id="nepaliDate9" value="2069-08-01"/>
               <input type="text" runat="server" id="englishDate9" value="2012-11-16"/>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>


 <script>
        $(document).ready(function () 
            $('.js-example-basic-single').select2(
                placeholder: "select tole"
            );

            $("[id$=englishDate9]").change(function () 
                $("[id$=nepaliDate9]").val(AD2BS($("[id$=englishDate9]").val()));
            );

            $("[id$=nepaliDate9]").change(function () 
                $("[id$=englishDate9]").val(BS2AD($("[id$=nepaliDate9]").val()));
            );
        );
    </script>

我也尝试使用带有ClientIDMode="Static" 的asp 文本框，但仍然没有用。在检查文本框时，它的显示：：

<input name="ctl00$ContentPlaceHolder1$GridCustomer$ctl02$nepaliDate9" type="text" id="ContentPlaceHolder1_GridCustomer_nepaliDate9_0" value="2069-08-01">

<input name="ctl00$ContentPlaceHolder1$GridCustomer$ctl02$englishDate9" type="text" id="ContentPlaceHolder1_GridCustomer_englishDate9_0" value="2012-11-16">

我尝试将函数更改为 ::

$('#<%=GridCustomer.ClientID%>').find("[id$=englishDate9]").change(function () 
    $('#<%=GridCustomer.ClientID%>').find("[id$=nepaliDate9]").val(AD2BS($("[id$=englishDate9]").val()));
);

$('#<%=GridCustomer.ClientID%>').find("[id$=nepaliDate9]").change(function () 
    $('#<%=GridCustomer.ClientID%>').find("[id$=englishDate9]").val(BS2AD($("[id$=nepaliDate9]").val()));
);

但仍然无法正常工作。请帮忙！！！

【参考方案1】：

在使用 jQuery 和 ASP.NET GridView 时，您应该考虑很多事情。我想指出一些可能有助于您解决问题的事情：

首先，您必须确保您的服务器控件的 ID 属性没有被修改，因为 asp.net 更改了 id，以便每个 id 根据行不同，它可能在末尾包含行索引带下划线的 id。

在您的情况下，它是 ContentPlaceHolder1_GridCustomer_nepaliDate9_0，这意味着文本框 nepaliDate9 控件位于 GridCusomter GridView 的第零行，它位于 ID 为 @ 的内容占位符内987654325@.

所以，在我看来，最好使用类来绑定事件而不是 ID。在您的情况下，您应该像这样绑定它：

<asp:GridView ID="GridCustomer" runat="server" DataKeyNames="ID">
    <Columns>

        <asp:TemplateField HeaderText="Status Reading">
            <ItemTemplate>                                               
               <input type="text" runat="server" id="nepaliDate9" class="nepaliDate9" value="2069-08-01"/>
               <input type="text" runat="server" id="englishDate9" class="englishDate9" value="2012-11-16"/>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

<script>
        $(document).ready(function () 
            $(".englishDate9").change(function () 
                $(".nepaliDate9").val(AD2BS($(this).val())); // I suppose you want to use the value of the currently changed item
            );

            $(".nepaliDate9").change(function () 
                $(".englishDate9").val(BS2AD($(this).val()));
            );
        );
</script>

其次，您必须检查您的 jquery 事件是否绑定到控件。由于某些原因，jQuery 事件未绑定到控件，例如在呈现控件之前加载脚本时。

您可能想尝试这样的方法来绑定控件：

$("body").on('change', "[id$=englishDate9]", function () 
    $("[id$=nepaliDate9]").val(AD2BS($("[id$=englishDate9]").val()));
);

第三，跟踪浏览器开发控制台始终是一个好主意，这样每当出现问题时，您就会立即知道出了什么问题。

【讨论】：

每当我在任何行的第一个文本框中进行任何更改时，每行的第二个文本框的值都会发生变化。该解决方案仅适用于单行网格，但每当我有多行时，它就无法正常工作......请帮忙！！！

@nischalinn，解决它是一个想法。如果它适用于一行，则必须尝试根据每一行的需要解决它。没有人会为您发布完整的模块。这些提示可以帮助您解决问题。