带有 Kendo UI Asp.net 包装器的 SignalR 值答案

【问题标题】：SignalR values with Kendo UI Asp.net wrappers带有 Kendo UI Asp.net 包装器的 SignalR 值
【发布时间】：2013-07-16 08:12:04
【问题描述】：

我有一个 Kendo UI 数据向导组件 RadialGauge，我想为它提供实时数据。它是使用 asp.net 包装器设置的，就像这样（从 kendo 演示中截取）：

    <div id="gauge-container-center">
        @(Html.Kendo().RadialGauge()
              .Name("tensionGauge")
              .Pointer(pointer => pointer.Value(28))
              .Scale(scale => scale
                                  .MinorUnit(5)
                                  .StartAngle(-60)
                                  .EndAngle(240)
                                  .Max(180)
                                  .Labels(labels => labels
                                                        .Position(GaugeRadialScaleLabelsPosition.Inside)
                                  )
                                  .Ranges(ranges =>
                                      {
                                          ranges.Add().From(80).To(120).Color("#ffc700");
                                          ranges.Add().From(120).To(150).Color("#ff7a00");
                                          ranges.Add().From(150).To(180).Color("#c20000");
                                      })
              )
              )

    </div>

所有基础功能都用于“实时”数据的设置和工作正常。我唯一的问题是如何将 signalR 值输入.Pointer(pointer => pointer.Value(signalRValueHere) 部分。关于如何做到这一点的任何建议？结合这两个框架的例子似乎还不是很多，所以搜索结果很少。

【问题讨论】：

标签： asp.net-mvc-4 kendo-ui signalr kendo-asp.net-mvc

【解决方案1】：

好的，所以我使用不同的方法解决了这个问题。我选择使用 javascript-initializer 代替，允许我在脚本中使用 SignalR 值。

            function createGauge() {
                $("#tensionGauge").kendoRadialGauge({
                    pointer: {
                        value: 0,
                        color: "black",
                    },
                    cap: {
                        color: "white",
                        size: 1
                    },
                    scale: {
                        minorUnit: 50,
                        majorUnit: 100,
                        startAngle: -50,
                        endAngle: 230,
                        min: @Convert.ToInt32(Model.MinTensionRange),
                        max: @Convert.ToInt32(Model.MaxTensionRange),
                        labels: {
                            position: "inside"
                        },
                        ranges: [ // TODO: Fetch limits from signalR or Model
                            {
                                from: 300,
                                to: 100, 
                                color: "#ffc700"
                            },{
                                from: -300,
                                to: -100, 
                                color: "#ffc700"
                            }, {
                                from: @Convert.ToInt32(Model.MinTensionRange),
                                to: -300, 
                                color: "#c20000"
                            },{
                                from: @Convert.ToInt32(Model.MaxTensionRange),
                                to: 300, 
                                color: "#c20000"
                            }
                        ]
                    }
                });
            }
            $(document).ready(function () {
                createGauge();
            });

以及更新值的js部分：

messageHub.client.notifyTension = function (tensionMessage) {
    $('#tensionGauge').data("kendoRadialGauge").value(tensionMessage);
};

【讨论】：