ASP显示动态表格图像

我试图在asp中实现一个简单的ajax示例。 1.表单具有一个文本框，其中包含一个用户名并在选项卡出来后验证用户名。 2.如果用户名有效，则会显示一个（绿色勾号）标志，指示用户名有效 3.否则，显示红色十字图像 4.显示加载动画，同时显示ajax请求中的进度。ASP显示动态表格图像

会发生什么情况是红色十字图像显示在文本框后面，有一些看起来很奇怪的空白（空格）。这个差距是为动画加载图像和绿色标志图像保留的。我该如何删除它。我想在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>

来源

2012-09-11 crazyTechie

你应该试试这个，在一个单一的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-12 05:28:01

几乎正确。但有效图像/无效图像不在同一行。他们稍微高于文本框。可能是一些更多的造型是必需的？屏幕截图图片在这里：http：//s11.postimage.org/tie6bye4z/asp_ajax_validation.jpg – crazyTechie

它是如此，由于div的高度..这是设置为30.所以，如果你想要在同一行你可以在td上创建一个类，例如''和.setHeight {line-height：30px;}，我希望这会有所帮助:) –

-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-11 18:17:39

对不起，但你没有得到我的问题。我问的是文本框和图像之间的空间，因为每个图像都不一样 – crazyTechie

那么你可以使用 '绝对' 位置 '图像1'和'Image2'控件的样式属性。

喜欢的东西，

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

那么这类分配给两个图像的CssClass属性控件..然后尝试高度的不同的值，width..etc为pregressbar图像重叠。

你需要的进度图片的显示属性莫名其妙定置为“无”。一样，

style="display:none;"

希望这有助于..

来源

2012-09-11 19:04:37 Glk

谢谢。但是，我认为仍然在文本框旁留有一些空间。 – crazyTechie

ASP显示动态表格图像

回答

相关问题