如何使用JavaScript更新条形百分比?

时间:2018-09-14 13:24:11

标签: javascript c# html class

我将int值的柱形百分比称为“ Miktar”。当我删除记录时,小节percantage不会改变。我使用了windows.location.reload,但是它不起作用。当我添加新条目时,栏会自动更新,但是当我删除它时,栏不会更新。

如何更新此栏,我是否必须在控制器端执行此操作?

代码如下:

@section scripts {
    <script src="~/js/notify.min.js"></script>
    <script type="text/javascript">
        $(document).on("click", ".delete-row", function () {
            var confirmDelete = confirm("Silmek istediğinize emin misiniz?");
            if (confirmDelete) {
                var deleteTr = $(this).closest("tr");
                var id = $(this).attr("data-id");
                $.ajax({
                    url: "/Recete/GuncelleReceteDetaySil/" + id,
                    type: "GET",
                    success: function (result) {
                        deleteTr.fadeOut(1000, function () {
                            deleteTr.remove();
                        });                     
                    },
                    error: function (result) {
                        $.notify("Hata", "error");

                    }

                })
            }

        });
    </script>
    <script src="~/js/jquery_1.12.4_jquery.min.js"></script>
    <script type="text/javascript">
        $('.bar-percentage[data-percentage]').each(function () {
            var progress = $(this);
            var percentage = Math.ceil($(this).attr('data-percentage'));
            $({ countNum: 0 }).animate({ countNum: percentage }, {
                duration: 1000,
                easing: 'linear',
                step: function () {
                    // What todo on every count
                    var pct = '';
                    if (percentage == 0) {
                        pct = Math.floor(this.countNum) + '%';
                    } else {
                        pct = Math.floor(this.countNum + 1) + '%';
                    }
                    progress.text(pct) && progress.siblings().children().css('width', pct);
                }
            });
        });

    </script>
    <script src="~/js/jquery.validate.js"></script>
 @foreach (var item in Model.receteDetay)
                            {
                                <tr>
                                    <td>@item.NEVI</td>
                                    <td>@item.VOLUMGRUPTANIM</td>
                                    <td>@item.TURADI</td>
                                    <td>@item.MIKTAR</td>

                                    <td>
                                        <a input class="delete-row btn btn-danger btn-sm" data-toggle="tooltip" data-placement="top" title="Sil" value="Sil" style="color:white" data-id="@item.ID">
                                            <span class="fa fa-trash" aria-hidden="true"></span> Sil
                                        </a>
                                    </td>
                                </tr>
                                toplam = toplam + @item.MIKTAR;
                            }

                        </tbody>
                    </table>
                    <div id="container">
                        <div id="bar-2" class="bar-main-container emerald">
                            <div class="wrap">
                                <div class="bar-percentage" id="datap" data-percentage="@toplam"></div>
                                <div class="bar-container">
                                    <div class="bar"></div>
                                </div>
                            </div>
                        </div>
                    </div>

0 个答案:

没有答案