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

【问题标题】：How to add switch control to mvc application?如何将开关控制添加到 mvc 应用程序？
【发布时间】：2016-08-01 02:29:26
【问题描述】：

我需要向我的 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>

我尝试了很多方法，但无法渲染如此简单的控制（见我的截图）。

我也尝试只使用剃刀语法，但它只呈现了一个复选框。我的问题是什么以及如何解决？感谢您的提前！

【问题讨论】：

这可能是因为 CheckBoxFor() 生成 2 个元素（<input type="checkbox" ... /> 和 <input type="hidden" .... /> 因此与您的插件关联的 css 选择器不起作用。首先尝试通过创建手动复选框 <input type="checkbox" id="switch" /> 并且如果生成正确的视图，显示适当的 html 和 css 以便可以更正
@StephenMuecke 实际上没有。它呈现了相同的“样式化”开关。
那你确定你已经包含了相关的脚本吗？您是否在浏览器控制台中遇到任何错误？
@StephenMuecke 我有一个错误：Failed to load resource:net::ERR_CONNECTION_REFUSED in http://localhos/.../browserLink，但它之前显示过。点击该控件时不再出现错误。
@StephenMuecke 指定，控制工作正常。我从控制器中的模型中得到正确的值。

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

【解决方案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>

}

【讨论】：