在Gridview的EditItemTemplate中读取文本框并使用jQuery

Question

我在webform上有asp.net gridview控件，我用它来添加，编辑和删除发票列表的记录，其中包含四个AgreementNO(txtRANO), Invoice No(txtInvNo),Dispute Date(txtDisputeDate), Amount(txtInvAmount)字段。用户可以根据需要添加，编辑和删除记录。

我尝试验证网格视图项模板中的文本框并使用jQuery编辑项模板，因为txtInvNo和txtDisputeDate将具有每条记录的值。

我可以识别侧面空白和页脚模板中的文本框，因为它将是单行，文本框的ID不会动态更改。

但是文本框的ID更改为例如txtInvNo_0，txtInvNo_1等依赖于行数，并且jQuery无法使用$(this).closest("tr").find("[id$=txtRANumber]")方法识别。

我查找了很多示例，并建议使用css类并使用其css类名标识每个文本框。我已经为所有文本框应用了相同的css类。

有没有任何正确的方法来做到这一点，其他明智的将最终在css类的数量作为所需的唯一类名。代码如下。

<asp:GridView ID="grdCNoteRADetailAdd" runat="server" AutoGenerateColumns="false"
                                    ShowFooter="true" CssClass="grdMain" GridLines="None" DataKeyNames="CNRecID"
                                    OnRowEditing="EditRADetail" OnRowUpdating="UpdateRADetail" OnRowCancelingEdit="CancelEditRADetail"
                                    Width="100%">
                                    <HeaderStyle CssClass="grdheader" />
                                    <RowStyle CssClass="grdItem" VerticalAlign="Top" />
                                    <AlternatingRowStyle CssClass="grdaltItem" VerticalAlign="Top" />
                                    <FooterStyle VerticalAlign="Top" />
                                    <Columns>
                                        <asp:TemplateField HeaderText="RA Number" HeaderStyle-Width="25%" ItemStyle-CssClass="grdItemborder">
                                            <ItemTemplate>
                                                <asp:Label ID="lblRANumber" runat="server" Text='<%# Eval("RANumber")%>'></asp:Label>
                                            </ItemTemplate>
                                            <EditItemTemplate>                                                  
                                                <asp:TextBox ID="txtRANumber" runat="server" Text='<%# Eval("RANumber")%>' CssClass="txtbox1" ValidationGroup="edRa"></asp:TextBox>
                                                <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="!"
                                                    Display="Dynamic" CssClass="rqrdtxt" ControlToValidate="txtRANumber" ValidationGroup="edRa"></asp:RequiredFieldValidator>
                                                <asp:RegularExpressionValidator ID="RegularExpressionValidator4" runat="server" ErrorMessage="!"
                                                    Display="Dynamic" CssClass="rqrdtxt" ControlToValidate="txtRANumber" ValidationExpression="[a-zA-Z0-9\s]+$" ValidationGroup="edRa"></asp:RegularExpressionValidator>
                                            </EditItemTemplate>
                                            <FooterTemplate>
                                                <tr>
                                                    <td style="width: 25%;">
                                                        <asp:TextBox ID="txtRANumber" runat="server" CssClass="txtbox1" Width="90%"></asp:TextBox>
                                                        <asp:RequiredFieldValidator ID="RequiredFieldValidator7" runat="server" ErrorMessage="!"
                                                    Display="Dynamic" CssClass="rqrdtxt" ControlToValidate="txtRANumber" ValidationGroup="newNRA"></asp:RequiredFieldValidator>
                                                        <asp:RegularExpressionValidator ID="RegularExpressionValidator5" runat="server" ErrorMessage="!" ValidationGroup="newNRA"
                                                            Display="Dynamic" CssClass="rqrdtxt" ControlToValidate="txtRANumber" ValidationExpression="[a-zA-Z0-9\s]+$"></asp:RegularExpressionValidator>
                                                    </td>
                                                    <td style="width: 25%;">
                                                        <asp:TextBox ID="txtInvNo" runat="server" CssClass="txtbox2" Width="90%" ValidationGroup="newNRA"></asp:TextBox>
                                                        <asp:RegularExpressionValidator ID="revInvNo" runat="server"
                                                            ErrorMessage="!" Display="Dynamic" CssClass="rqrdtxt" ControlToValidate="txtInvNo" ValidationGroup="newNRA"
                                                            ValidationExpression="^(ri|RI|STI|sti|TI|ti|RIR|rir|OSTI|osti)?\d{7,15}$"></asp:RegularExpressionValidator>
                                                    </td>
                                                    <td style="width: 20%;">
                                                        <asp:TextBox ID="txtDisputeDate" runat="server" CssClass="txtbox2JQDP" Width="75%"></asp:TextBox>
                                                    </td>
                                                    <td style="width: 20%;">
                                                        <asp:TextBox ID="txtCreditAmount" runat="server" CssClass="txtbox1" Width="85%" ValidationGroup="newNRA"></asp:TextBox>
                                                        <asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" ErrorMessage="!"
                                                            Display="Dynamic" CssClass="rqrdtxt" ControlToValidate="txtCreditAmount" ValidationGroup="newNRA"></asp:RequiredFieldValidator>
                                                        <asp:RegularExpressionValidator ID="RegularExpressionValidator9" runat="server" ErrorMessage="!" ValidationGroup="newNRA"
                                                            Display="Dynamic" CssClass="rqrdtxt" ControlToValidate="txtCreditAmount" ValidationExpression="^\d+(\.\d{1,2})?$"></asp:RegularExpressionValidator>
                                                    </td>
                                                    <td style="width: 10%;">
                                                        <asp:Button ID="btnAddRF" runat="server" Text="Add" OnClick="AddNewRADetail" ValidationGroup="newNRA"/>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td></td>
                                                    <td class="tdsubhead2" style="text-align: center;">Total
                                                    </td>
                                                    <td>
                                                        <asp:Label ID="lblCNoteTotal" runat="server" Text=""></asp:Label>
                                                    </td>
                                                    <td></td>
                                                </tr>
                                            </FooterTemplate>
                                        </asp:TemplateField>
                                        <asp:TemplateField HeaderStyle-Width="25%" HeaderText="Invoice No" ItemStyle-HorizontalAlign="Center"
                                            HeaderStyle-CssClass="grdItemborder" ItemStyle-CssClass="grdItemborder">
                                            <ItemTemplate>
                                                <asp:Label ID="lblInvNo" runat="server" Text='<%# Eval("InvoiceNo")%>'></asp:Label>
                                            </ItemTemplate>
                                            <EditItemTemplate>
                                                <asp:TextBox ID="txtInvNo" runat="server" Text='<%# Eval("InvoiceNo")%>' CssClass="txtbox2" Width="95%" ValidationGroup="edRa"></asp:TextBox>
                                                <asp:RegularExpressionValidator ID="revInvNo" runat="server"
                                                    ErrorMessage="!" Display="Dynamic" CssClass="rqrdtxt" ControlToValidate="txtInvNo"
                                                    ValidationExpression="^(ri|RI|STI|sti|TI|ti|RIR|rir|OSTI|osti)?\d{7,15}$" ValidationGroup="edRa"></asp:RegularExpressionValidator>
                                            </EditItemTemplate>
                                        </asp:TemplateField>
                                        <asp:TemplateField HeaderStyle-Width="20%" HeaderText="Dispute Date" ItemStyle-HorizontalAlign="Center"
                                            HeaderStyle-CssClass="grdItemborder" ItemStyle-CssClass="grdItemborder">
                                            <ItemTemplate>
                                                 <asp:Label ID="lblDispute_Date" runat="server" Text='<%# Eval("Dispute_Date")%>'></asp:Label>
                                            </ItemTemplate>
                                            <EditItemTemplate>
                                                <asp:Label ID="lblDisputeDate" runat="server" Text='<%# Eval("Dispute_Date")%>' Visible='<%# IIf(Eval("IsInvoice") = True, True, False)%>'></asp:Label>
                                                <asp:TextBox ID="txtDisputeDate" runat="server" CssClass="txtbox2JQDP" Width="75%" Text='<%# Eval("Dispute_Date")%>' Visible='<%# If(Eval("IsInvoice") = True, False, True)%>'></asp:TextBox>
                                            </EditItemTemplate>
                                        </asp:TemplateField>
                                        <asp:TemplateField HeaderStyle-Width="20%" HeaderText="Credit Amount" HeaderStyle-CssClass="grdItemborder"
                                            ItemStyle-CssClass="grdItemborder">
                                            <ItemTemplate>
                                                <asp:Label ID="lblCreditAmount" runat="server" Text='<%# Eval("CNAmount")%>'></asp:Label>
                                            </ItemTemplate>
                                            <EditItemTemplate>
                                                <asp:TextBox ID="txtCreditAmount" runat="server" Text='<%# Eval("CNAmount")%>' CssClass="txtbox1" Width="90%" ValidationGroup="edRa"></asp:TextBox>
                                                <asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" ErrorMessage="!" ValidationGroup="edRa"
                                                    Display="Dynamic" CssClass="rqrdtxt" ControlToValidate="txtCreditAmount"></asp:RequiredFieldValidator>
                                                <asp:RegularExpressionValidator ID="RegularExpressionValidator8" runat="server" ErrorMessage="!"
                                                    Display="Dynamic" CssClass="rqrdtxt" ControlToValidate="txtCreditAmount" ValidationExpression="^\d+(\.\d{1,2})?$" ValidationGroup="edRa"></asp:RegularExpressionValidator>
                                            </EditItemTemplate>
                                            <FooterTemplate>
                                            </FooterTemplate>
                                        </asp:TemplateField>
                                        <%--<asp:CommandField ShowEditButton="True" />--%>
                                        <asp:TemplateField ShowHeader="False" HeaderStyle-Width="10%">
                                <ItemTemplate>
                                    <asp:LinkButton ID="lnkEdit" runat="server" CausesValidation="False" CommandName="Edit"
                                        Text="Edit" ValidationGroup="vgEdit"></asp:LinkButton>
                                </ItemTemplate>
                                <EditItemTemplate>
                                    <table style="width: 100%">
                                        <tr>
                                            <td>
                                                <asp:LinkButton ID="lnkUpdate" runat="server" CausesValidation="True" CommandName="Update"
                                                    Text="Update" ValidationGroup="edRa"></asp:LinkButton>
                                            </td>
                                            <td>
                                                <asp:LinkButton ID="lnkRemoveRF" runat="server" CommandArgument='<%# Eval("CNRecID")%>'
                                                    Text="Delete" OnClick="DeleteRADetail" CausesValidation="false"></asp:LinkButton>
                                            </td>
                                            <td>
                                                <asp:LinkButton ID="lnkCancel" runat="server" CausesValidation="False" CommandName="Cancel"
                                                    Text="Cancel"></asp:LinkButton>
                                            </td>
                                        </tr>
                                    </table>
                                </EditItemTemplate>
                                <HeaderStyle Width="5%" />
                            </asp:TemplateField>
                                        <%--<asp:TemplateField HeaderStyle-Width="10%" HeaderStyle-CssClass="grdItemborder" ItemStyle-CssClass="grdItemborder">
                                            <ItemTemplate>
                                                <asp:LinkButton ID="lnkRemoveRF" runat="server" CommandArgument='<%# Eval("CNRecID")%>'
                                                    Text="Delete" OnClick="DeleteRADetail" CausesValidation="false"></asp:LinkButton>
                                            </ItemTemplate>
                                        </asp:TemplateField>--%>
                                    </Columns>
                                    <EmptyDataTemplate>
                                        <tr>
                                            <td class="tdsubhead2" style="width: 25%; text-align: center;">RA Number
                                            </td>
                                            <td class="tdsubhead2" style="width: 25%; text-align: center;">Invoice No
                                            </td>
                                            <td class="tdsubhead2" style="width: 20%; text-align: center;">Dispute Date
                                            </td>
                                            <td class="tdsubhead2" style="width: 20%; text-align: center;">Credit Amount
                                            </td>
                                            <td style="border: 0px solid grey; width: 10%;"></td>
                                        </tr>
                                        <tr>
                                            <td style="text-align: center">
                                                <asp:TextBox ID="txtRANumber" runat="server" CssClass="txtbox1" ValidationGroup="newRa" Width="90%" />
                                                <asp:RequiredFieldValidator ID="RequiredFieldValidator7" runat="server" ErrorMessage="!"
                                                    Display="Dynamic" CssClass="rqrdtxt" ControlToValidate="txtRANumber" ValidationGroup="newRa"></asp:RequiredFieldValidator>
                                                <asp:RegularExpressionValidator ID="RegularExpressionValidator10" runat="server"
                                                    ErrorMessage="!" Display="Dynamic" CssClass="rqrdtxt" ControlToValidate="txtRANumber"
                                                    ValidationExpression="[a-zA-Z0-9\s]+$" ValidationGroup="newRa"></asp:RegularExpressionValidator>
                                            </td>
                                            <td style="vertical-align: top; text-align: center">
                                                <asp:TextBox ID="txtInvNo" runat="server" CssClass="txtbox2" ValidationGroup="newRa" Width="90%" />
                                                <asp:RegularExpressionValidator ID="revInvNo" runat="server"
                                                    ErrorMessage="!" Display="Dynamic" CssClass="rqrdtxt" ControlToValidate="txtInvNo"
                                                    ValidationExpression="^(ri|RI|STI|sti|TI|ti|RIR|rir|OSTI|osti)?\d{7,15}$" ValidationGroup="newRa"></asp:RegularExpressionValidator>
                                            </td>
                                            <td style="vertical-align: top; text-align: center">
                                                <asp:TextBox ID="txtDisputeDate" runat="server" CssClass="txtbox2JQDP" Width="75%"></asp:TextBox>
                                            </td>
                                            <td style="text-align: center">
                                                <asp:TextBox ID="txtCreditAmount" runat="server" CssClass="txtbox1" Width="75%" ValidationGroup="newRa" />
                                                <asp:RequiredFieldValidator ID="RequiredFieldValidator9" runat="server" ErrorMessage="!"
                                                    ValidationGroup="newRa" Display="Dynamic" CssClass="rqrdtxt" ControlToValidate="txtCreditAmount"></asp:RequiredFieldValidator>
                                                <asp:RegularExpressionValidator ID="RegularExpressionValidator12" runat="server"
                                                    ErrorMessage="!" Display="Dynamic" CssClass="rqrdtxt" ControlToValidate="txtCreditAmount"
                                                    ValidationExpression="^\d+(\.\d{1,2})?$" ValidationGroup="newRa"></asp:RegularExpressionValidator>
                                            </td>
                                            <td style="width: 10%">
                                                <asp:Button ID="btnAddRF" runat="server" Text="Add" OnClick="AddNewRADetail" CommandName="emptyInsert"
                                                    CausesValidation="true" CssClass="buttonScreenSpec" ValidationGroup="newRa" />
                                            </td>
                                        </tr>
                                        <tr>
                                            <td></td>
                                            <td></td>
                                            <td class="tdsubhead2" style="text-align: center;">Total
                                            </td>
                                            <td>
                                                <asp:Label ID="lblCNoteTotal" runat="server" Text=""></asp:Label>
                                            </td>
                                            <td></td>
                                        </tr>
                                    </EmptyDataTemplate>
                                </asp:GridView>

下面的JQuery代码/ /添加新记录

＆＃13;

＆＃13;

$("[id$=grdCNoteRADetailAdd] [id$=btnAddRF]").click(function () {         
          var raRow = $(this).closest("tr");
          alert($(this).closest("tr input[type='text']").length);
            var txtRaNo = raRow.find("[id$=txtRANumber]");
            var txtInvNo = raRow.find("[id$=txtInvNo]");
            var txtDisDate = raRow.find("[id$=txtDisputeDate]");          
            if ($.trim(txtRaNo.val()) != "")
            {
                if ($.trim(txtInvNo.val()) == "" && $.trim(txtDisDate.val()) == "")
                {                   
                var msg = "Both Invoive No and Dispute Date cannot be empty.\nIf system generated invoice is not available, specify the date when was the dispute happend.\n ";
                msg += "For example : Date when the tarffic fine was charged directly to customer by police..!"
                alert(msg);
                return false;
            }
        }
            return true;
      });

//Edit Record using Update Link button
//This does not work as txtRANumber,txtInvNo and txtDisputeDate are dynamically gaving index at the end as txtDisputeDate_0,1 etc based on number of rows in  the grid

$('#<%=grdCNoteRADetailAdd.ClientID %> a:contains(Update)').click(function () {
         
          var raRow = $(this).closest("tr");          
          var txtRaNo = raRow.find("[id$=txtRANumber]");
          var txtInvNo = raRow.find("[id$=txtInvNo]");
          var txtDisDate = raRow.find("[id$=txtDisputeDate]");
          alert(txtRaNo.attr("id"));
          if ($.trim(txtRaNo.val()) != "") {
              if ($.trim(txtInvNo.val()) == "" && $.trim(txtDisDate.val()) == "") {
                  //alert('fuck2');
                  var msg = "Both Invoive No and Dispute Date cannot be empty.\nIf system generated invoice is not available, specify the date when was the dispute happend.\n ";
                  msg += "For example : Date when the tarffic fine was charged directly to customer by police..!"
                  alert(msg);
                  return false;
              }
          }
          return true;
      });

＆＃13;

＆＃13;

＆＃13;

Answer 1

我找到了问题的答案，并在此发布，以帮助他人。

注意：1。放置在里面的文本框将创建一个动态ID作为＆＃34; textboxName （数字）＆＃34;。所以JQuery不会使用它的id识别文本框。

我添加了一个css类名（与文本框ID相同）以及实际的css类名。 例如，我的文本框ID =＆＃34; txtRANumber＆＃34;和CssClass =＆＃34; txtRANumber txtbox1＆＃34;。 这里txtbox1是css类，我添加了txtRANumber类，使用它的类名来识别文本框，使用JQuery.Gridview代码提取和JQuery代码提取在下面。

＆＃13;

＆＃13;

 $("[id*=grdCNoteRADetailAdd] [id*=lnkUpdate]").click(function () {
        
          var raNo = $('.txtRANumber').val(); // txtRANumber text box identifiied using its css class name
          var invNo = $('.txtInvNo').val();
          var disDate = $('.txtbox2JQDP').val();
         
          if ($.trim(raNo) == "") {
              
                var msg="Enter RA number"
                  alert(msg);
                  return false;
              }
          }
          return true;
      });

＆＃13;

<EditItemTemplate>
<asp:TextBox ID="txtRANumber" runat="server" Text='<%# Eval("RANumber")%>' CssClass="txtRANumber txtbox1" ValidationGroup="edRa"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="!"
Display="Dynamic" CssClass="rqrdtxt" ControlToValidate="txtRANumber" ValidationGroup="edRa"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegularExpressionValidator4" runat="server" ErrorMessage="!" Display="Dynamic" CssClass="rqrdtxt" ControlToValidate="txtRANumber" ValidationExpression="[a-zA-Z0-9\s]+$" ValidationGroup="edRa"></asp:RegularExpressionValidator>
</EditItemTemplate>

＆＃13;

＆＃13;

＆＃13;