Прочитайте текстовые поля внутри EditItemTemplate Gridview и проверьте с помощью jQuery

У меня есть элемент управления gridview asp.net на веб-форме, который я использовал для добавления, редактирования и удаления записей списка счетов с четырьмя полями AgreementNO(txtRANO), Invoice No(txtInvNo),Dispute Date(txtDisputeDate), Amount(txtInvAmount) Пользователь может добавлять, редактировать и удалять записи по мере необходимости.

Я пытаюсь проверить текстовые поля внутри шаблона элемента сетки и отредактировать шаблон элемента с помощью jQuery, так как txtInvNo и txtDisputeDate будут иметь значение для каждой записи.

Я могу определить текстовые поля в пустом и нижнем колонтитулах, так как это будет одна строка, а идентификатор текстовых полей не изменяется динамически.

Но идентификаторы текстовых полей меняются, например, 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 ниже / / Добавить новую запись

$("[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;
      });

1 ответ

Я нашел ответ на этот вопрос и опубликовать здесь, чтобы помочь другим.

Примечание: 1. В текстовом поле, помещенном внутри, будет создан динамический идентификатор как " textboxName (number)". Поэтому JQuery не будет идентифицировать текстовое поле, используя его идентификатор.

Я добавил имя класса css (такое же как идентификатор текстового поля) вместе с реальным именем класса css. например, мой текстовое поле ID ="txtRANumber" и CssClass="txtRANumber txtbox1". здесь txtbox1 является классом css, а класс txtRANumber, который я добавил, чтобы идентифицировать текстовое поле, используя его имя класса, используя извлечение кода JQuery.Gridview и извлечение кода JQuery, приведены ниже.

 $("[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;
      });
<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>

Другие вопросы по тегам