如何将开关控制添加到mvc应用程序？

Question

我需要在我的Web应用程序中添加开关控制。我正在尝试使用Kendo Switch控件。我想将我的开关绑定到模型属性。我用以下方式做到这一点：

<div class="form-group">
    @Html.Label("Guest Mode:")
    <label class="checkbox-inline">
        @Html.CheckBoxFor(m => m.SomeProperty, new {@id = "switch"})
    </label>
</div>
<script>
    var switchInstance = $("#switch").kendoMobileSwitch();
</script>

我尝试了很多方法，但无法正常控制（请参阅我的截图）.

此外，我试图只使用剃刀语法，但它只渲染一个复选框。我的问题是什么以及如何解决？谢谢你提前！

Answer 1

我这样做了。目标是为某些文本字段打开/关闭“已禁用”属性。在我的情况下，这种方式工作正常。我希望它有用。在标签标签中，'for'是与模型属性方法的绑定。复选框通过Html帮助程序与模型绑定。

<div class="custom-control custom-switch">
            @Html.CheckBoxFor(m => m.Enabled, new { @class = "custom-control-input" })
             <label class="custom-control-label" for="Enabled">Disable</label>
        </div>

接下来是jQuery脚本：

@section Scripts {
<script type="text/javascript">
    $(document).ready(DOM_Load);

    function DOM_Load(e) {
        $('[data-toggle="popover"]').popover({
            container: "body"
        });

        $("div.custom-switch").children("input").on("change", EnabledToggle_Change);
    }

    function EnabledToggle_Change(e) {
        var inputs = $("div.container-fluid").find("input[type!='checkbox']");
        var textareas = $("div.container-fluid").find("textarea");
        var switchLabel = $("div.custom-switch").children(".custom-control-label");

        switchLabel.text(switchLabel.text() == 'Disable' ? 'Enable' : 'Disable');
        inputs.prop('disabled', (i, v) => !v);
        textareas.prop('disabled', (i, v) => !v);
    }
</script>

}