ASP.Net使用JavaScript驗證GridView控件

Question

我有在編輯模式下加載的GridView。 然后，用戶可以更新一行並單擊該行的更新按鈕以對其進行更新。 我需要向每個文本框添加驗證，以使其在單擊更新按鈕時將該文本框作為必填字段。 它必須是JavaScript，因為當用戶將其中一個文本框留為空白時，我需要加載警報對話框。 誰能告訴我如何做到這一點？ 我在下面添加我的GridView代碼。

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="ObjectDataSource1" DataKeyNames="intExaminerID,sintDOLDistrictOfficeID">
        <Columns>            
            <asp:TemplateField>                
                <ItemTemplate>                 
                    <asp:TextBox ID="txtID" Visible="false" runat="server" Text='<%# Bind("intExaminerID") %>'></asp:TextBox>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:TextBox ID="txtDOID"  Visible="false" runat="server" Text='<%# Bind("sintDOLDistrictOfficeID") %>'></asp:TextBox>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="First Name">                
                <ItemTemplate>
                    <asp:TextBox ID="txtFName" Visible='<%# IsInEditMode %>' runat="server" Text='<%# Bind("vcharFirstName") %>'></asp:TextBox>
                </ItemTemplate>
            </asp:TemplateField>  
            <asp:TemplateField HeaderText="Last Name">
                <ItemTemplate>
                    <asp:TextBox ID="txtLName" Visible='<%# IsInEditMode %>' runat="server" Text='<%# Bind("vcharLastName") %>'></asp:TextBox>
                </ItemTemplate>
            </asp:TemplateField>  
            <asp:TemplateField HeaderText="Email">
                <ItemTemplate>
                    <asp:TextBox ID="txtEmail" Visible='<%# IsInEditMode %>' runat="server" Text='<%# Bind("vcharEmailAddress") %>'></asp:TextBox>
                </ItemTemplate>
            </asp:TemplateField> 
            <asp:TemplateField HeaderText="Extension">
                <ItemTemplate>
                    <asp:TextBox ID="txtPhone" Visible='<%# IsInEditMode %>' runat="server" Text='<%# Bind("vcharPhoneExtension") %>'></asp:TextBox>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="SSN Block">
                <ItemTemplate>
                    <asp:TextBox ID="txtSSNStart" Visible='<%# IsInEditMode %>' runat="server" Text='<%# Bind("vcharSSNBlockStart") %>' Width="5em"></asp:TextBox>
                    <asp:TextBox ID="txtSSNEnd" Visible='<%# IsInEditMode %>' runat="server" Text='<%# Bind("vcharSSNBlockEnd") %>' Width="5em"></asp:TextBox>
                </ItemTemplate>
            </asp:TemplateField> 
            <asp:TemplateField HeaderText="Action(s)">
                <ItemTemplate>
                    <asp:Button ID="btnUpdate" runat="server" Text="Update" CommandName="Update" OnClientClick="javascript:return Validategrid();" CommandArgument='<%# Container.DataItemIndex %>' />                    
                    <asp:Button ID="btnDelete" runat="server" Text="Delete" CommandName="Delete" CommandArgument='<%# Container.DataItemIndex %>' />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

Answer 1

我仍在處理查詢的JavaScript方面，但讓我們先設置gridview來驗證必填字段：

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="ObjectDataSource1" DataKeyNames="intExaminerID,sintDOLDistrictOfficeID">
    <Columns>            
        <asp:TemplateField>                
            <ItemTemplate>                 
                <asp:TextBox ID="txtID" ValidationGroup="GridView1" Visible="false" runat="server" Text='<%# Bind("intExaminerID") %>'></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:TextBox ID="txtDOID"  Visible="false" ValidationGroup="GridView1" runat="server" Text='<%# Bind("sintDOLDistrictOfficeID") %>'></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="First Name">                
            <ItemTemplate>
                <asp:TextBox ID="txtFName" ValidationGroup="GridView1" Visible='<%# IsInEditMode %>' runat="server" Text='<%# Bind("vcharFirstName") %>'></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>  
        <asp:TemplateField HeaderText="Last Name">
            <ItemTemplate>
                <asp:TextBox ID="txtLName" ValidationGroup="GridView1" Visible='<%# IsInEditMode %>' runat="server" Text='<%# Bind("vcharLastName") %>'></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>  
        <asp:TemplateField HeaderText="Email">
            <ItemTemplate>
                <asp:TextBox ID="txtEmail" ValidationGroup="GridView1" Visible='<%# IsInEditMode %>' runat="server" Text='<%# Bind("vcharEmailAddress") %>'></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField> 
        <asp:TemplateField HeaderText="Extension">
            <ItemTemplate>
                <asp:TextBox ID="txtPhone" ValidationGroup="GridView1" Visible='<%# IsInEditMode %>' runat="server" Text='<%# Bind("vcharPhoneExtension") %>'></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="SSN Block">
            <ItemTemplate>
                <asp:TextBox ID="txtSSNStart" ValidationGroup="GridView1" Visible='<%# IsInEditMode %>' runat="server" Text='<%# Bind("vcharSSNBlockStart") %>' Width="5em"></asp:TextBox>
                <asp:TextBox ID="txtSSNEnd" Visible='<%# IsInEditMode %>' runat="server" Text='<%# Bind("vcharSSNBlockEnd") %>' Width="5em"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField> 
        <asp:TemplateField HeaderText="Action(s)">
            <ItemTemplate>
                <asp:Button ID="btnUpdate" ValidationGroup='GridView1' CausesValidation='true' runat="server" Text="Update" CommandName="Update" OnClientClick="javascript:return Validategrid();" CommandArgument='<%# Container.DataItemIndex %>' />                    
                <asp:Button ID="btnDelete" runat="server" Text="Delete" CommandName="Delete" CommandArgument='<%# Container.DataItemIndex %>' />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

我在這里所做的添加了

ValidationGroup='GridView1' 

到每個文本框字段以及“更新”按鈕

ValidationGroup='GridView1' CausesValidation='true'

ValidationGroups將有助於在單擊“更新”按鈕時觸發驗證。

編寫JavaScript后，我將更新響應。