0

我试图在 asp 中实现一个简单的 ajax 示例。1. 表单有一个文本框，它接受用户名并在标签出来后验证用户名。2. 如果用户名有效，会显示一个（绿色勾号）标志，表示用户名有效 3. 否则，显示红色叉号图像 4. ajax 请求正在进行时显示加载动画。

发生的情况是红十字图像显示在文本框之后，其中有一些看起来很奇怪的间隙（空格）。该间隙是为动画加载图像和绿色标志图像保留的。我该如何删除它。我想在 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 中。最后将更新进度放在 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

好吧，您可以为“Image1”和“Image2”控件的样式属性使用“绝对”位置。

就像是，

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

然后将此类分配给两个图像控件的 CssClass 属性。然后尝试不同的高度、宽度等值来重叠 pregressbar 图像。

或者

您需要以某种方式将 Progressbar Images 的 Display 属性设置为“none”。像，

style="display:none;"

希望这可以帮助..

于 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 回答