Bootstrap-toggle 按钮在部分视图中无法正常工作答案

【问题标题】：Bootstrap-toggle button not working properly in a partial viewBootstrap-toggle 按钮在部分视图中无法正常工作
【发布时间】：2020-02-15 22:48:24
【问题描述】：

Boostrap 切换按钮在加载到局部视图后第一次尝试时不起作用，但在第二次尝试时起作用

当我点击下拉菜单的第一条记录时，切换按钮不起作用，当我点击第二条记录时，切换按钮起作用，而在第三条记录中，它不起作用。但是，如果我重新加载页面并单击第二条记录，它不会做任何事情，如果我单击第一条记录，它就会神奇地起作用。有什么建议！

<select name="speed" onchange="showCharts(this)" style="outline: none ;width: 
        100%;border-radius: 3px; height: 35px;color: darkgray;padding-left: 
        5px; border: 0.1em solid lightgray;">
    <option disabled selected>Type of Chart</option>
    <option value="1">First Record</option>
    <option value="2">SecondRecord</option>
    <option value="3">Third Record</option>

</select>

<div class=" " id="collapseOne"></div>

    function showCharts(s) {
        switch (s[s.selectedIndex].value) {
            case "1":
                 $('#collapseOne').load('@Url.Action("1record", "Home")');
                break;
            case "2":
                 $('#collapseOne').load('@Url.Action("2record", "Home")');
                break;
            case "3":
                 $('#collapseOne').load('@Url.Action("3record", "Home")');
                break;
        }
}

        [HttpGet]
        public ActionResult 1record()
        {
            return PartialView();
        }

        [HttpGet]
        public ActionResult 2record()
        {
            return PartialView();
        }

        [HttpGet]
        public ActionResult 3record()
        {
            return PartialView();
        }

@{
    ViewData["Title"] = "# Record";

}

<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>

<input type="checkbox" checked data-toggle="toggle">

【问题讨论】：

标签： asp.net-core drop-down-menu partial-views togglebutton

【解决方案1】：

没关系，我做了一个解决方法，向 javascript 添加只有一个切换按钮的部分视图，如下所示：

function showCharts(s) {
    switch (s[s.selectedIndex].value) {
        case "1":
             $('#collapseOne').load('@Url.Action("empty", "Home")');
             $('#collapseOne').load('@Url.Action("1record", "Home")');
            break;
        case "2":
             $('#collapseOne').load('@Url.Action("empty", "Home")');
             $('#collapseOne').load('@Url.Action("2record", "Home")');
            break;
        case "3":
             $('#collapseOne').load('@Url.Action("empty", "Home")');
            $('#collapseOne').load('@Url.Action("3record", "Home")');
            break;
    }
}

只用一个切换按钮创建局部视图然后将部分视图添加到您的控制器

    [HttpGet]
    public ActionResult empty()
    {
        return PartialView();
    }

【讨论】：

【解决方案2】：

我的问题就这样解决了：

我在局部视图中调用了它的函数。

<input id="my-toggle" type="checkbox" data-toggle="toggle" checked data-size="small"/>

<script>
    $('#my-toggle').bootstrapToggle();
</script>

【讨论】：