当前位置: 代码迷 >> JavaScript >> 使用JavaScript验证网格视图控件
  详细解决方案

使用JavaScript验证网格视图控件

热度:84   发布时间:2023-06-06 09:38:46.0

大家好,我有一个与数据库自动绑定的网格视图,但与数据表绑定。 第一次加载页面时,网格视图的行为空。 我正在使用此网格在数据库中插入数据。 每当用户在第一行中插入数据并单击“添加新行”按钮时,都会创建一个新行。 现在我的问题是,当用户单击按钮时,我要验证是否有空控件。 这样我想添加javascript。 我试过很多脚本,但是无法正常工作。 请指导我。

我的网格视图如下。

资格详细资料
资格-选择-

                                     </asp:DropDownList>
                                 </ItemTemplate>
                             </asp:TemplateField>
                             <asp:TemplateField>
                                 <HeaderTemplate>
                                     Percentage
                                 </HeaderTemplate>
                                 <ItemTemplate>
                                     <asp:TextBox ID="percentageBox" clientID="percentageBox" name="percentageBox" runat="server"></asp:TextBox>
                                  </ItemTemplate>
                             </asp:TemplateField>
                             <asp:TemplateField>
                                 <HeaderTemplate>
                                     Passing Year
                                 </HeaderTemplate>
                                 <ItemTemplate>
                                     <asp:TextBox ID="yearBox"  clientID="yearBox" name="yearBox" runat="server"></asp:TextBox>
                                     </ItemTemplate>
                             </asp:TemplateField>
                             <asp:TemplateField>
                                 <HeaderTemplate>
                                     Institute Name
                                 </HeaderTemplate>
                                 <ItemTemplate>
                                     <asp:TextBox ID="instituteNameBox" clientID="instituteNameBox" name="instituteNameBox" runat="server"></asp:TextBox>
                                    </ItemTemplate>
                             </asp:TemplateField>
                         </Columns>
                         <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                         <PagerStyle BackColor="#284775" ForeColor="White" 
                             HorizontalAlign="Center" />
                         <SelectedRowStyle BackColor="#E2DED6" ForeColor="#333333" Font-Bold="True" />
                         <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                         <EditRowStyle BackColor="#999999" />
                         <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
                     </asp:GridView>
                   </td>
                        </tr>
                    </table>
              </ContentTemplate>
                <Triggers>
                <asp:AsyncPostBackTrigger ControlID="addRowBtn" EventName="Click"/>
                </Triggers>

            </asp:UpdatePanel>
            <br />
    </td>
</tr>

我使用J Query创建了一个用于在网格视图中进行验证的示例。您可以从中获得帮助。

JQUERY:

var vIsProcess = true;
$("#btnSubmitNew").click(function(){
    $("table[id$='gvCommentSample']").find("input:text").each(function(){
    if($(this).val()=="")
    {
        alert("Please fill the required field");
        $(this).focus();
        vIsProcess= false;
        return false;
    }
    else
    {
        vIsProcess= true;
    }
 });
 if(!vIsProcess)
    return false;
 else
    return true;   
});

ASPX:

<asp:GridView ID="gvCommentSample" runat="server" ShowFooter="false" Width="50%" AutoGenerateColumns="false"  >
    <Columns>
        <asp:TemplateField HeaderText="Code">
            <ItemTemplate>
                <asp:TextBox ID="txtCode" runat="server"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Name">
            <ItemTemplate>
                <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
<br />
<asp:Button ID="btnSubmitNew" runat="server" Text="Submit" />

  相关解决方案