c# - ユーザー名の可用性の確認

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>