Question

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

红色十字图像显示在文本框之后，其中一些间隙（空格）看起来很奇怪。该间隙保留用于动画加载图像和绿色标记图像。我该如何删除它。我想在UI中的同一位置显示绿色或红色图像，因为它们不会同时出现。

screenshot

代码是：

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

Answer 1

你应该试试这个，将Valid-icon和Invalid-icon以及div与Update Progress放在一个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>

Answer 2

你可以对'Image1'和'Image2'控件的样式属性使用'绝对'位置。

类似的东西，

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

然后将此类分配给两个图像控件的CssClass属性。然后尝试使用不同的height，width..etc值来重叠pregressbar图像。

OR

您需要以某种方式将进度条图像的显示属性设置为“无”。等，

style="display:none;"

希望这会有所帮助..

Answer 3

我想代码流在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
}

ASP显示动态表格图像

3 个答案: