элементы управления проверкой asp.net - размещение CSS - PullRequest
Новая
       4

элементы управления проверкой asp.net - размещение CSS

2 голосов
/ 05 декабря 2009

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

<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>

1 Ответ

2 голосов
/ 05 декабря 2009 
<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...