Pass parameter to Javascript function from ASP code behind

Question

I have a long process and I want to show a user a progress bar where I pass a parameter (percentage) to a Javascript function in my Webform with masterpage.

I have this:

<script type="text/javascript"> 
        function updateProgress(percentage) {          
            document.getElementById('ProgressBar').style.width = percentage+"%";
        }
</script>

and:

<div class="progress progress-striped active progress-success" style="height: 43px">
      <div id="ProgressBar" class="progress-bar" role="progressbar" runat="server"
          aria-valuemin="0" aria-valuemax="100" style="width: 0%">
      </div>
</div>

In my code-behind, I have this to pass a parameter to the function:

// Report progress >> ~ 18%                   
string updateProgress = "18";
ClientScript.RegisterStartupScript(this.GetType(), "updateProgress", "updateProgress('" + updateProgress + "');", true);

As I run the code, the progressbar never moves from 0%. I would like to keep updating the percentage completion from code behind until it reaches 100% by calling the function again with new parameters.

I have looked through forums but I cant see what I need to to to make it work.

Any ideas?

Solution

Try this way

    string updateProgress = "18%";
    ClientScript.RegisterStartupScript(this.GetType(), "updateProgress", "updateProgress('" + updateProgress + "');", true);

Script AS

   <script type="text/javascript">
    function updateProgress(percentage) {
        document.getElementById("ProgressBar").style.width = percentage;
    }
  </script>

ASPX page

   <div class="progress progress-striped active progress-success" style="height: 43px">
        <div id="ProgressBar" runat="server" class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100"
            style="width: 0px;" >
        </div>
    </div>