0

私はaspで簡単なajaxの例を実装しようとしていました。1.フォームには、ユーザー名を取得し、タブアウト後にユーザー名を検証するテキストボックスがあります。2.ユーザー名が有効な場合は、ユーザー名が有効であることを示す（緑色のチェックマーク）記号が表示されます。3。そうでない場合は、赤い十字の画像が表示されます。

何が起こるかというと、テキストボックスの後に赤い十字の画像が表示され、奇妙に見えるギャップ（スペース）があります。ギャップは、アニメーションの読み込み画像と緑色の記号画像用に予約されています。これを削除するにはどうすればよいですか。両方が同時に表示されないため、UIの同じ場所に緑または赤の画像を表示したいと思います。

スクリーンショット

コードは次のとおりです。

     <table><tr><td>
            User Id:&nbsp;</td><td>
            <asp:TextBox ID="TextBox1" runat="server" ontextchanged="TextBox1_TextChanged" 
                AutoPostBack="True"></asp:TextBox></td><td>
            &nbsp;&nbsp;
            <div style="height:30px;width:30px">
            <asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="100">
              <ProgressTemplate>
                    <asp:Image ID="loading" runat="server" ImageUrl="loading.gif" Height="20px" Width="20px" />
               </ProgressTemplate>
            </asp:UpdateProgress></div>
            </td><td>
            <asp:Image ID="Image1" runat="server" Height="15px" 
                ImageUrl="~/valid-icon.gif" ToolTip="Valid User Id" Visible="False" 
                Width="15px" /></td><td>
            &nbsp;&nbsp;<asp:Image ID="Image2" runat="server" Height="15px" 
                ImageUrl="~/invalid_icon.png" ToolTip="Invalid User Id. Already exists" 
                Visible="False" Width="15px" />
            &nbsp;</td></tr></table>
4

3 に答える 3

1

これを試してみてください。Valid-icon と Invalid-icon の両方を配置し、更新の進行状況を含む div を単一の td に配置します。これらを別の td に配置する必要はありません。Update Progress at last を td に配置します。それはあなたの問題を解決します

<table>
   <tr>
      <td>
        User Id:&nbsp;
      </td>
      <td>
        <asp:TextBox ID="TextBox1" runat="server" ontextchanged="TextBox1_TextChanged" 
            AutoPostBack="True"></asp:TextBox>
      </td>
      <td>          
        <asp:Image ID="Image1" runat="server" Height="15px" 
            ImageUrl="~/valid-icon.gif" ToolTip="Valid User Id" Visible="False" 
            Width="15px" />

        <asp:Image ID="Image2" runat="server" Height="15px" 
            ImageUrl="~/invalid_icon.png" ToolTip="Invalid User Id. Already exists" 
            Visible="False" Width="15px" />

        <div style="height:30px;width:30px">
           <asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="100">
             <ProgressTemplate>
                <asp:Image ID="loading" runat="server" ImageUrl="loading.gif" Height="20px" Width="20px" />
              </ProgressTemplate>
           </asp:UpdateProgress>
         </div>
       </td>
    </tr>
</table>
于 2012-09-12T05:28:01.727 に答える
0

Well you can use 'Absolute' position for 'Image1' and 'Image2' control's style property.

Something like,

Images.
{  
 position:absolute; 
  height:150px; 
  width:300px;
    top:100px; 
  left:120px; 
}

Then assign this class to CssClass property of both images control.. then Try different value of height,width..etc for overlapping the pregressbar image.

OR

you need to somehow set the Progressbar Images's Display property to 'none'. like,

style="display:none;"

Hope this helps..

于 2012-09-11T19:04:37.960 に答える
-1

コードフローは ontextchanged イベントでこのようにする必要があると思います

protected void TextBox1_TextChanged(object sender, EventArgs e)
{
     UpdateProgress1.Visible = true;

     // Existing code to check the user validation 

     UpdateProgress1.Visible = false;           

     // Existing code to display image according to validation success or failed
}
于 2012-09-11T18:17:39.707 に答える