asp.net mvc中的剑道切换按钮答案

【问题标题】：kendo switch button in asp.net mvcasp.net mvc中的剑道切换按钮
【发布时间】：2018-02-05 11:00:21
【问题描述】：

我有一个剑道切换按钮，像这样：

<div class="col-md-2 form-group">
    <input id="euro-switch" aria-label="euro Switch" />
</div>

这是 jquery：

$("#euro-switch").kendoMobileSwitch({
    onLabel: "€",
    offLabel: "%",
    change: function (e) {
        $('kendoNumericTextBox').value                    
    }
});

我有一个数字文本框：

<div class="col-md-2 form-group">
        @(Html.Kendo().NumericTextBox()
            .Name("SignalThreshold")
            .Value(0)
            .Step(10)
            .Min(0)
            .Events(e => e.Change("FilterThresholdChange"))
            .Format("'€' ##.00")
        )
</div>

现在我想在欧元和百分比之间切换，以便您在数字文本框中看到欧元符号 (€) 或 % 符号。

我该怎么做？

谢谢

咳咳，我现在是这样的：

 $("#euro-switch").kendoMobileSwitch({


            onLabel: "€",
            offLabel: "%",
            change: function (e) {

                var label = e.sender.value() ? e.sender.options.onLabel : e.sender.options.offLabel.toString();
                var inpbox = $('#SignalThreshold').data("kendoNumericTextBox");
                console.log(inpbox)
                inpbox.setOptions(
                    {
                        format: "\\" + label + "\\ #",
                        decimals: 3
                    });
                inpbox.value(inpbox.value());
            }

        });


        $("#SignalThreshold").kendoNumericTextBox({
            format: "\\%\\ #",
            decimals: 3,
            value: 1

        });

这是我的剑道数字文本框：

 @(Html.Kendo().NumericTextBox()
                                    .Name("SignalThreshold")
                                    .Value(0)
                                    .Step(10)
                                    .Min(0)
                                    .Events(e => e.Change("FilterThresholdChange"))
                                    .Format("'€' ##.00")
        )

但这不起作用。

【问题讨论】：

标签： c# kendo-ui kendo-asp.net-mvc

【解决方案1】：

Paritosh 的示例功能不完整。所以这就是我的做法。

 $("#euro-switch").kendoMobileSwitch({
     onLabel: "€",
     offLabel: "%",
     change: function(e) {

         var label = e.sender.value() ? e.sender.options.onLabel : e.sender.options.offLabel.toString();

         var inpbox = $('#currency').data("kendoNumericTextBox");

         inpbox.setOptions({
             format: "\\" + label + "\\ #",
             decimals: 3
         });

         inpbox.value(inpbox.value());
     }

 });


 $("#currency").kendoNumericTextBox({
     format: "\\%\\ #",
     decimals: 3
 });

它的作用是：对 % 进行转义，这样数字文本框就不会进行算术运算。将 value 设置为本身的原因是强制 kendo 使用新过滤器更新数字文本框（没有现成的功能。）。

有关功能示例，请参阅我的简单 Dojo。

编辑：

因为你使用MVC生成数字文本框，你需要从脚本中删除以下代码：

 $("#currency").kendoNumericTextBox({
     format: "\\%\\ #",
     decimals: 3
 });

以下行也必须更改：

var inpbox = $('#currency').data("kendoNumericTextBox");

ID 必须与小部件的 MVC 名称匹配。

【讨论】：

@SavantKingOrange 有时，像以前的配置一样添加自己的东西是件好事。世界不仅仅是复制和粘贴:)。为你更新了道场。
@SavantKingOrange 您需要删除生成NumericTextBox 的javascript，因为您使用mvc 生成它...

【解决方案2】：

我了解到您在更新 kendoNumericTextBox 的格式时遇到问题。

您可以使用以下命令对其进行更新

$("#abc").data('kendoNumericTextBox').setOptions({format : '__', decimals: __ });

看看我创建的这个dojo。

    $("#mail-switch").kendoMobileSwitch({
        onLabel: "%",
        offLabel: "€",
        change: changed
    });
    $("#abc").kendoNumericTextBox({
      format: "€ ##"
    });

  function changed(e){
    var control = $("#abc").data('kendoNumericTextBox');
    if(e.checked) control.setOptions({format : '##.## %', decimals: 2 });
    else control.setOptions({format : '$ ##', decimals: 0 });
    console.log(control.options.format);
  }

PS：这不是你的方案的最终解决方案，但希望你能从中得到一些帮助

【讨论】：