动态更改引导程序组件的值

时间:2018-05-09 09:23:35

标签: c# asp.net webforms bootstrap-4

我正在尝试更改引导组件中的值,该组件将在按钮单击事件

上更改

这是我的组件。这是一个小条形,根据通过标记代码输入的值

填充到一定百分比
....
2018-05-09T09:09:33.686 [Info] New TEST message: Message 19 on thread 33
2018-05-09T09:09:35.702 [Info] Function completed (Success, Id=007eccd0-b5db-466a-91c1-4f53ec5a7b3a, Duration=2013ms)
2018-05-09T09:09:36.390 [Info] Function started (Id=b7160487-d10d-47a6-bab3-78da68a93498)
2018-05-09T09:09:36.420 [Info] New TEST message: Message 10 on thread 39
...

style =" width:95%" 是需要更改的内容,以便更改条形图的填充百分比。以下是引导程序组件的示例 enter image description here 如何在按钮点击事件中更改百分比值?如果我看起来模糊,请提前感谢并抱歉! c#是我正在使用的编码语言,这是在网络表单上进行的

更新:JQUERY CODE

<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>

C#CODE

<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>

按钮标记代码

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

1 个答案:

答案 0 :(得分:2)

您需要使用WebMethod属性作为Web服务方法。

HTML&amp; 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 Web表单

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

<强>的Javascript