Управление проверкой asp.net - размещение CSS

Я создаю адресный контроль, который будет использовать некоторые API проверки адреса (google/bing и т. Д.) Для проверки введенного пользователем адреса. Я также хотел бы проверить поля на стороне клиента (например, обязательные поля, формат Zip и т. Д.) С помощью элементов проверки проверки asp.net. Я пытаюсь построить это с помощью CSS и использую float для выравнивания текстовых полей (или есть лучший способ?) Элементы управления проверкой имеют динамический дисплей и хотят размещать их рядом с текстовыми полями, когда они не проверяются. Прямо сейчас он обертывает/помешает размещению других элементов управления. Может быть, есть лучший способ сделать это? Вот мой кодУправление проверкой asp.net - размещение CSS

<style type="text/css"> 
.Wrapper{ 
    width:auto; 
    height:auto; 
} 

.address{ 
    width:500px; 
    height:auto; 
} 

.validator{ 

    } 
    .textbox { 
    float:right; 

    } 

    label{ 
    float:left; 
    } 

    .button-right{ 
    float:right; 
    margin-right:290px; 
    } 

    div{ 
    margin:5px; 
    } 

    .field 
    { 
    width:200px; 
    } 
</style> 


<div id="addressUI" class="address"> 
     <div class="field" > 
     <label ID="lblStreet" for="txtStreet">Street: </label><label style="color:Red">*</label> 
     <asp:TextBox ID="txtStreet" runat="server" CssClass="textbox" Text="" ></asp:TextBox> 
     <asp:RequiredFieldValidator ID="rqdStreet" runat="server" ErrorMessage="Street is required" ControlToValidate="txtStreet" Display="Dynamic"> 
     </asp:RequiredFieldValidator> 
     </div> 
     <div class="field"> 
     <label ID="lblCity" for="txtCity">City: </label><label style="color:Red">*</label> 
     <asp:TextBox ID="txtCity" runat="server" Text="" CssClass="textbox" > </asp:TextBox> 
     <asp:RequiredFieldValidator ID="rqdCity" runat="server" ErrorMessage="City is required" ControlToValidate="txtCity" Display="Dynamic"> 
     </asp:RequiredFieldValidator> 
     </div> 
     <div class="field"> 
     <label ID="lblState" for="ddlState" >State: </label><label style="color:Red">*</label> 
     <asp:DropDownList ID="ddlState" runat="server" style="width:80px;margin-left:12px;" CssClass=""> 
     </asp:DropDownList> 
     <asp:RequiredFieldValidator ID="rqdState" runat="server" ControlToValidate="ddlState" ErrorMessage="State is required" Display="Dynamic"> 
     </asp:RequiredFieldValidator> 
     </div> 

     <div class="field"> 
     <label ID="lblZip" for="txtZip">Zip: </label><label style="color:Red">*</label> 
     <asp:TextBox ID="txtZip" runat="server" CssClass="" Text="" style="width:50px;margin-left:22px;" ></asp:TextBox> 
     <asp:RequiredFieldValidator ID="rqdZIP" ControlToValidate="txtZip" runat="server" ErrorMessage="ZIP is required" Display="Dynamic"> 
     </asp:RequiredFieldValidator> 
     <asp:RegularExpressionValidator ID="regexValidator" runat="server" 
      ErrorMessage="Zip is invalid" Display="Dynamic" ControlToValidate="txtZip" 
      ValidationExpression="\d{5}(-\d{4})?"></asp:RegularExpressionValidator> 
    </div> 

     <div class="button-right"> 
     <asp:Button ID="btnValidate" runat="server" Text="validate" OnClick="btnValidate_Click" CausesValidation="true" /> 
     </div> 
    </div>

источник

2009-12-05 ram

<head> 
    <style type="text/css"> 
    label 
    { 
     display:inline; 
     float:left; 
     width:75px; 
    } 
    </style> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
     <div id="addressUI" class="address"> 
      <div class="field"> 
       <label id="lblStreet" for="txtStreet"> 
        Street: <span style="color: Red">*</span> 
       </label> 
       <asp:TextBox ID="txtStreet" runat="server" CssClass="textbox" Text=""></asp:TextBox> 
       <asp:RequiredFieldValidator ID="rqdStreet" runat="server" ControlToValidate="txtStreet" 
        Display="Dynamic" ErrorMessage="Street is required"> 
       </asp:RequiredFieldValidator> 
      </div> 
      <div class="field"> 
       <label id="lblCity" for="txtCity"> 
        City:<span style="color: Red">*</span> 
       </label> 
       <asp:TextBox ID="txtCity" runat="server" CssClass="textbox" Text=""> </asp:TextBox> 
       <asp:RequiredFieldValidator ID="rqdCity" runat="server" ControlToValidate="txtCity" 
        Display="Dynamic" ErrorMessage="City is required"> 
       </asp:RequiredFieldValidator> 
      </div> 
      <div class="field"> 
       <label id="lblState" for="ddlState"> 
        State:<span style="color: Red">*</span> 
       </label>     
       <asp:DropDownList ID="ddlState" runat="server" CssClass="" Style="width: 80px"> 
       </asp:DropDownList> 
       <asp:RequiredFieldValidator ID="rqdState" runat="server" ControlToValidate="ddlState" 
        Display="Dynamic" ErrorMessage="State is required"> 
       </asp:RequiredFieldValidator> 
      </div> 
      <div class="field"> 
       <label id="lblZip" for="txtZip"> 
        Zip:<span style="color: Red">*</span> 
       </label>     
       <asp:TextBox ID="txtZip" runat="server" CssClass="" Style="width: 50px" 
        Text=""></asp:TextBox> 
       <asp:RequiredFieldValidator ID="rqdZIP" runat="server" ControlToValidate="txtZip" 
        Display="Dynamic" ErrorMessage="ZIP is required"> 
       </asp:RequiredFieldValidator> 
       <asp:RegularExpressionValidator ID="regexValidator" runat="server" ControlToValidate="txtZip" 
        Display="static" ErrorMessage="Zip is invalid" ValidationExpression="\d{5}(-\d{4})?"></asp:RegularExpressionValidator> 
      </div> 
      <div class="button-right"> 
       <asp:Button ID="btnValidate" runat="server" CausesValidation="true" 
        Text="validate" /> 
      </div> 
     </div> 
     </div> 
    </form> 
</body> 
</html>

источник

2009-12-05 19:07:08 Phaedrus

Superb !! Всегда новые вещи, чтобы учиться :) – ram

На самом деле я не думаю, что нам нужен Дисплей: встроенный, установка ширины на ярлык сделает трюк – ram

Справа от дисплея в строке нет необходимости. Однако вам нужно поплавок: он остался для работы в FireFox. – Phaedrus

Управление проверкой asp.net - размещение CSS

ответ

Смежные вопросы