Question

我在createuserwizard中创建了一个检查用户名可用性。我在检查过程中添加了一个进度指示器，并显示一个微调器图像（以gif格式），并使用java脚本完成。

如果系统正在检查数据库中的用户名，它将显示微调器图像，同时显示文本“正在检查可用性...”

问题不在于它在检查时不会出现微调器图像。

这是代码：

<script language="javascript" type="text/javascript">
      // Hook the InitializeRequest event.
      Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(InitializeRequest);

      function InitializeRequest(sender, args) {
          // Change div's CSS class and text content.
          $get('UserAvailability').className = 'progress';
          $get('UserAvailability').innerHTML = 'Checking availability...';

      }
  </script>


  <asp:UpdatePanel runat="server" ID="up1">
                            <ContentTemplate>
                        <tr> 
                            <td class="style4">Username:</td>
                            <td> 

                                <asp:TextBox runat="server" ID="UserName" AutoPostBack="True" 
                                    ontextchanged="Username_Changed" Width="190" />



                                     <div runat="server" id="UserAvailability" style="background-position: left; background-repeat: no-repeat; margin-left: -250px; padding-left: 22px; float:right;"></div>
                          </td> 

                        </tr> 

                        </ContentTemplate>
                      </asp:UpdatePanel>

这是背后的代码：

 protected void Username_Changed(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(2000);

        TextBox UserNameTextBox = (TextBox)CreateUserWizardStep1.ContentTemplateContainer.FindControl("UserName");

        if (Membership.GetUser(UserName.Text) != null)
        {
          UserAvailability.InnerText = "Username taken, sorry.";
          UserAvailability.Attributes.Add("class", "taken");

        }
        else
        {
         UserAvailability.InnerText = "Username available!";
         UserAvailability.Attributes.Add("class", "available");

        }
    }

我使用了一个母版页，我曾尝试将JS文件放在母版页中，但图像仍然没有出现。

编辑

    <style type="text/css">
       #UserAvailability 
{
  padding-left: 22px;
  margin-left: 30px;
  float: left;
  background-position: left;
  background-repeat: no-repeat;
}

.progress
{
  background-image: url(Images/spinner.gif);
}

.taken
{
  background-image: url(Images/taken.gif);
}

.available
{
  background-image: url(Images/available.gif);
}


        </style>

检查用户名可用性

0 个答案: