动态更改引导组件的值

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#代码

      [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

您需要使用作为 Web 服务方法工作的 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