ASP.NET MVC中的剑道开关按钮

问题描述

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

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

但这是行不通的.

解决方案

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
 });

它的作用是:转义％，以便数字文本框不执行算术运算.将值设置为本身的原因是强制kendo使用新的过滤器更新数字文本框(没有开箱即用的功能.)

有关功能示例，请参见我简单的 Dojo .

由于使用MVC生成了数字文本框，因此需要从脚本中删除以下代码:

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

也必须更改以下行:

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

该ID必须与您的小部件的MVC名称相匹配.

I have a kendo switch button, like this:

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

and this is the jquery:

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

and I have a numerictextbox:

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

Now I want to toggle between euro and percent so that you will see euro sign (€) or % sign in the numerictextbox.

How can I do that?

Thank you

oke, I have it now like this:

 $("#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

        });

and this is my kendo numerictextbox:

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

But this doesn't work.

解决方案

Paritosh's example isn't fully functional. So here's how I would do it.

 $("#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
 });

What it does is: escapes the % so the numeric textbox doesn't do arithmetic operations. The reason for setting value as itself is to force kendo to update the numeric textbox with new filter (there isn't functionality out of the box to do it.).

See my simple Dojo for functional example.

Edit:

Because you generate the numeric textbox using MVC, you need to remove the following code from the script:

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

The following line must be changed too:

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

The ID must match your MVC name for the widget.

这篇关于ASP.NET MVC中的剑道开关按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！