asp.net-mvc - 剑道进度条未绑定到数据源

Question

我正在尝试在 HTML 表中实现剑道进度条。因此，到目前为止，我能够在表格单元格内呈现进度条，但无法将其绑定到名为“百分比”的模型属性。我在值字段中使用 item.Percentage 但无法将其绑定到进度条以根据百分比值更改显示。

Relevant part of the HTML table cell:
<td align="center">
                    @*<div id="profileCompleteness"></div>*@
                    <div class='progress'></div>

                    @Html.DisplayFor(modelItem => item.Percentage)


                </td> 

Javascript:
<script>
    $(".progress").each(function(){
        var row = $(this).closest("tr");
        var model = grid.dataItem(row);

        $(this).kendoProgressBar({
            value: item.Percentage,
            min:0,
            max: 1100,
            type:"chunk"
        });
    });


</script>

Model

 public class MainScreenViewModel
    {
        private IMainScreenRepository mainScreenRepository;

        #region Properties
        [Required]

        public decimal ReportId { get; set; }
        public string ReportDescription { get; set; }

        public string Status { get; set; }

        public string Percentage { get; set; }
}

请指出我正确的方向。我不知道如何将百分比值属性绑定到 Progressbar 以动态显示该值。

Answer 1

item.Percentage是仅在服务器上可用的表达式，因此不能在 JavaScript 代码中使用。

要实现所需的行为，您需要执行以下操作：

• 为 Grid使用Ajax DataSource。这将允许数据项对象在创建 ProgressBar 时在客户端上可用 http://docs.telerik.com/aspnet-mvc/helpers/grid/binding/ajax-binding

• JavaScript 代码已将 dataItem 检索为model. 所以在 ProgressBar 初始化语句中使用model.Percentage代替。item.Percentage

Answer 2

终于解决了这个问题。希望这将帮助其他试图实现相同目标的人。

<script>
        $(document).ready(function () {
            debugger;
            $(".dashboard-table tr.trReport").each(function () {
                debugger;
                var row = $(this).closest("tr");
                var hiddenPercentageId = row[0].id + "_percentage";
                var hiddenProgress = row[0].id + "_progress";
                var progressValue = $('.dashboard-table tr#' + row[0].id + ' input[name="' + hiddenPercentageId + '"]')[0].value;

                $(".dashboard-table tr#" + row[0].id + " div#" + hiddenProgress).kendoProgressBar({
                    value: ((progressValue == undefined || progressValue == null) ? '-1' : progressValue),
                    min: 0,
                    max: 36
                });
            });
        });
    </script>

在表格内，进度条 ID 是这样捕获的：

<td align="center" id="@(item.Percentage)">
                    @Html.Hidden(item.ReportId + "_percentage", item.Percentage)

                    <div class='progress' id="@(item.ReportId + "_progress")"></div>
                </td>

谢谢