Динамическое изменение значения компонента начальной загрузки

Question

Я пытаюсь изменить значение в компоненте начальной загрузки, которое изменится при нажатии кнопки

Вот мой компонент. Это небольшая полоска, которая заполняется до определенного процента в зависимости от того, какое значение было введено через код разметки

<div class="progress">
 <div id="theprogressbar" class ="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" 
style="width: 95%">
  <span class="sr-only">95% Complete</span>
    </div>
 </div>

style = "width: 95%" - это то, что необходимо изменить, чтобы изменить процент заполнения бара. Вот пример того, как выглядит компонент начальной загрузки Как мне изменить процентное значение в событии нажатия кнопки? заранее спасибо и извините если мне покажется расплывчатым! C # является языком кодирования, который я использую, и это происходит в веб-форме

ОБНОВЛЕНИЕ: КОД JQUERY

<script>


$('#btnSave').click(function () {
    $.ajax({

    url: 'http://localhost:61417/ProjectMainMenu/GetProgress',
    method: 'POST',
    contentType: 'application/json',
    success: function(response){
        var progressValue=response.d;
        $('#theprogressbar').attr('aria-valuenow', progressValue).css('width',progressValue);
        $("#progressValue").text(progressValue);
    }
        });

     </script>

C # CODE

      [WebMethod]
public static double GetProgress()
{
     double progress=0;
     //Your Business Logic
     progress=56;
     return progress;
}

КОД КАРТЫ КНОПКИ

<asp:Button ID="btnSave" width =" 250px" runat="server" Text="View"  class="btn btn-info" />

Answer 1

вам нужно использовать атрибут WebMethod, который работает как метод веб-сервиса.

HTML & Jquery

<div class="progress">
     <div id="theprogressbar" class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="width: 95%">
     <span class="sr-only"><span id="progressValue">95</span>% Complete</span>
   </div>
</div>

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js">

<script>
     $(document).ready(function(){
        $('#btnSave').click(function () {
          $.ajax({
            url: 'http://localhost:56894/Progress.aspx/GetProgress',
            method: 'POST',
            contentType: 'application/json',
            success: function(response){
                var progressValue=response.d;
                $('#theprogressbar').attr('aria-valuenow', progressValue).css('width',progressValue);
                $("#progressValue").text(progressValue);
            }
       });
    });
</script>

Веб-форма ASP.NET

[WebMethod]
public static double GetProgress()
{
     double progress=0;
     //Your Business Logic
     progress=56;
     return progress;
}

Javascript