c# - 放置验证器会扰乱面板布局

Question

当我将 RequiredFieldValidator 放入 asp.net 页面时，它会扰乱页面布局。它适用于所有地方，但在特定地方会扰乱页面布局。

放置验证器之前:

<asp:Panel ID="pnlSearchComplaint" Visible="false" BackColor="#dbdbdb"
             runat="server" Width="400px">
            <br />
            <label>Search By Subject</label>
            <asp:TextBox ID="txtSearchCompBySubject" runat="server" ></asp:TextBox>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator8" runat="server" 
                                ControlToValidate="txtSearchCompBySubject" ErrorMessage="Enter Subject" 
                                ForeColor="Red" ValidationGroup="GroupSearchCompSubject">Enter Subject
            </asp:RequiredFieldValidator>
            <br/>
            <asp:Button ID="btnSearchBySubject" ValidationGroup="GroupSearchCompSubject"  
                        CssClass="btn btn-success" runat="server" Text="Search" 
                        ClientIDMode="Static" OnClick="btnSearchBySubject_Click" />
            <asp:GridView ID="gridViewComplaintsBySubject" AllowPaging="true" OnPageIndexChanging="gridViewComplaintsBySubject_PageIndexChanging" AutoGenerateSelectButton="true" runat="server" CssClass="mGrid" OnSelectedIndexChanged="gridViewComplaintsBySubject_SelectedIndexChanged" Width="408px">
             <EmptyDataRowStyle BorderStyle="None" ForeColor="Red" BorderWidth="0px" />
             <EmptyDataTemplate>
               No Data Found for this Input. Try Again.
             </EmptyDataTemplate> 
             <SelectedRowStyle CssClass="selected-row"  ForeColor="white" />
           </asp:GridView>
            <br />
            <label>Search By Date</label>
            <asp:Label ID="lblDateFrom" runat="server" Text="From"></asp:Label>
            <asp:TextBox ID="txtFromDate" runat="server" ></asp:TextBox>
           <asp:CalendarExtender ID="CalendarExtenderFromDate" TargetControlID="txtFromDate" runat="server">
            </asp:CalendarExtender>
            <asp:Label ID="lblDateTo" runat="server" Text="To"></asp:Label>
            <asp:TextBox ID="txtToDate" runat="server"></asp:TextBox>
            <asp:CalendarExtender ID="CalendarExtenderToDate" TargetControlID="txtToDate" runat="server">
            </asp:CalendarExtender>
            <asp:Button ID="btnSearchByDate"  CssClass="btn btn-success" runat="server" Text="Search" 
                        ClientIDMode="Static" OnClick="btnSearchByDate_Click" />
            <asp:GridView ID="gridViewComplaintsByDate" AllowPaging="true"  AutoGenerateSelectButton="true" runat="server" CssClass="mGrid"  Width="408px" OnPageIndexChanging="gridViewComplaintsByDate_PageIndexChanging" OnSelectedIndexChanged="gridViewComplaintsByDate_SelectedIndexChanged">
             <EmptyDataRowStyle BorderStyle="None" ForeColor="Red" BorderWidth="0px" />
             <EmptyDataTemplate>
               No Data Found for this Input. Try Again.
             </EmptyDataTemplate> 
             <SelectedRowStyle CssClass="selected-row"  ForeColor="white" />
           </asp:GridView>
           <br />
    </asp:Panel>

放置验证器后:

代码:

<asp:Panel ID="pnlSearchComplaint" Visible="false" BackColor="#dbdbdb"
             runat="server" Width="400px">
            <br />
            <label>Search By Subject</label>
            <asp:TextBox ID="txtSearchCompBySubject" runat="server" ></asp:TextBox>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator8" runat="server" 
                                ControlToValidate="txtSearchCompBySubject" ErrorMessage="Enter Subject" 
                                ForeColor="Red" ValidationGroup="GroupSearchCompSubject">Enter Subject
            </asp:RequiredFieldValidator>
            <br/>
            <asp:Button ID="btnSearchBySubject" ValidationGroup="GroupSearchCompSubject"  
                        CssClass="btn btn-success" runat="server" Text="Search" 
                        ClientIDMode="Static" OnClick="btnSearchBySubject_Click" />
            <asp:GridView ID="gridViewComplaintsBySubject" AllowPaging="true" OnPageIndexChanging="gridViewComplaintsBySubject_PageIndexChanging" AutoGenerateSelectButton="true" runat="server" CssClass="mGrid" OnSelectedIndexChanged="gridViewComplaintsBySubject_SelectedIndexChanged" Width="408px">
             <EmptyDataRowStyle BorderStyle="None" ForeColor="Red" BorderWidth="0px" />
             <EmptyDataTemplate>
               No Data Found for this Input. Try Again.
             </EmptyDataTemplate> 
             <SelectedRowStyle CssClass="selected-row"  ForeColor="white" />
           </asp:GridView>
            <br />
            <label>Search By Date</label>
            <asp:Label ID="lblDateFrom" runat="server" Text="From"></asp:Label>
            <asp:TextBox ID="txtFromDate" runat="server" ></asp:TextBox>

             <asp:RequiredFieldValidator ID="RequiredFieldValidator9" runat="server" 
                                ControlToValidate="txtFromDate" ErrorMessage="Enter Subject" 
                                ForeColor="Red" ValidationGroup="GroupSearchCompSubject">Enter Subject
            </asp:RequiredFieldValidator>

             <asp:CalendarExtender ID="CalendarExtenderFromDate" TargetControlID="txtFromDate" runat="server">
            </asp:CalendarExtender>
            <asp:Label ID="lblDateTo" runat="server" Text="To"></asp:Label>
            <asp:TextBox ID="txtToDate" runat="server"></asp:TextBox>
            <asp:CalendarExtender ID="CalendarExtenderToDate" TargetControlID="txtToDate" runat="server">
            </asp:CalendarExtender>
            <asp:Button ID="btnSearchByDate"  CssClass="btn btn-success" runat="server" Text="Search" 
                        ClientIDMode="Static" OnClick="btnSearchByDate_Click" />
            <asp:GridView ID="gridViewComplaintsByDate" AllowPaging="true"  AutoGenerateSelectButton="true" runat="server" CssClass="mGrid"  Width="408px" OnPageIndexChanging="gridViewComplaintsByDate_PageIndexChanging" OnSelectedIndexChanged="gridViewComplaintsByDate_SelectedIndexChanged">
             <EmptyDataRowStyle BorderStyle="None" ForeColor="Red" BorderWidth="0px" />
             <EmptyDataTemplate>
               No Data Found for this Input. Try Again.
             </EmptyDataTemplate> 
             <SelectedRowStyle CssClass="selected-row"  ForeColor="white" />
           </asp:GridView>
           <br />
        </asp:Panel>

Answer 1

请在您的验证控件中设置“Display='dynamic'”属性。

<asp:RequiredFieldValidator Display="Dynamic"></asp:RequiredFieldValidator>

如果您不想在显示消息时打扰您的 UI

<asp:RequiredFieldValidator Display="Dynamic" ErrorMessage="*" ToolTip="Set your message here"></asp:RequiredFieldValidator>

编辑 1:

<label>
    Search By Date</label>
<asp:Label ID="lblDateFrom" runat="server" Text="From"></asp:Label>
<asp:TextBox ID="txtFromDate" runat="server"></asp:TextBox>
<asp:Label ID="lblDateTo" runat="server" Text="To"></asp:Label>
<asp:TextBox ID="txtToDate" runat="server"></asp:TextBox>
<div>
    <asp:RequiredFieldValidator Display="Dynamic" ID="RequiredFieldValidator9" runat="server" ControlToValidate="txtFromDate"
        ErrorMessage="Enter Subject" ForeColor="Red" ValidationGroup="GroupSearchCompSubject">Enter Subject
    </asp:RequiredFieldValidator>
</div>
<asp:Button ID="btnSearchByDate" CssClass="btn btn-success" runat="server" Text="Search"
    ClientIDMode="Static" />