局部视图中Bootstrap Toggle按钮首次点击失效问题求助

看起来你遇到了动态加载局部视图时Bootstrap Toggle按钮状态混乱的问题——切换下拉选项时按钮时好时坏，刷新后状态还反转，这大概率是动态DOM元素未重新初始化插件加上重复加载脚本引发冲突导致的，下面是具体的解决步骤：

1. 移除局部视图里的重复资源引用 #

你现在每个局部视图都引入了bootstrap-toggle.min.css和bootstrap-toggle.min.js，每次加载局部视图都会重复添加这些资源，这是导致按钮状态混乱的核心原因之一。

修复方案：
把CSS和JS引用移到主视图（比如_Layout.cshtml）中，只加载一次：

<!-- 放到主视图的<head>或者页面底部合适位置 -->
<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>

之后所有局部视图里删掉这些重复的引用。

2. 动态加载完成后手动初始化Toggle #

Bootstrap Toggle默认只会在页面首次加载时，对已存在的[data-toggle="toggle"]元素初始化。但通过load()加载的局部视图里的新元素，不会自动触发初始化，所以需要在加载完成的回调里手动执行初始化。

修改你的showCharts函数：

function showCharts(s) {
    var targetUrl;
    switch (s[s.selectedIndex].value) {
        case "1": targetUrl = '@Url.Action("1record", "Home")'; break;
        case "2": targetUrl = '@Url.Action("2record", "Home")'; break;
        case "3": targetUrl = '@Url.Action("3record", "Home")'; break;
    }
    // 加载局部视图后，立即初始化新的toggle按钮
    $('#collapseOne').load(targetUrl, function() {
        $('[data-toggle="toggle"]').bootstrapToggle();
    });
}

3. 避免重复初始化的冲突（可选但推荐） #

如果切换下拉选项时旧的toggle元素没有被正确清理，重复初始化可能会引发新的异常。可以在加载新内容前先销毁旧的toggle实例：

function showCharts(s) {
    var targetUrl;
    switch (s[s.selectedIndex].value) {
        case "1": targetUrl = '@Url.Action("1record", "Home")'; break;
        case "2": targetUrl = '@Url.Action("2record", "Home")'; break;
        case "3": targetUrl = '@Url.Action("3record", "Home")'; break;
    }
    // 先销毁旧的toggle实例
    $('#collapseOne [data-toggle="toggle"]').bootstrapToggle('destroy');
    // 加载新内容并初始化
    $('#collapseOne').load(targetUrl, function() {
        $('[data-toggle="toggle"]').bootstrapToggle();
    });
}

4. 优化Action方法命名（规范建议） #

另外提个小建议：你的Action方法命名1record、2record不符合C#的PascalCase命名规范，虽然能运行，但建议改成更规范的名称，比如FirstRecord、SecondRecord，避免潜在的隐性问题：

[HttpGet]
public ActionResult FirstRecord() {
    return PartialView();
}
[HttpGet]
public ActionResult SecondRecord() {
    return PartialView();
}
[HttpGet]
public ActionResult ThirdRecord() {
    return PartialView();
}

对应的JS里的Url.Action也要同步修改：

case "1": targetUrl = '@Url.Action("FirstRecord", "Home")'; break;
case "2": targetUrl = '@Url.Action("SecondRecord", "Home")'; break;
case "3": targetUrl = '@Url.Action("ThirdRecord", "Home")'; break;

按照上面的步骤修改后，动态加载局部视图时，Toggle按钮应该就能稳定正常工作了。

内容的提问来源于stack exchange，提问作者Heissel Rivero