如何通过 _layout.cshtml 在视图中使用 javascript答案

【问题标题】：How to use javascript in view with _layout.cshtml如何通过 _layout.cshtml 在视图中使用 javascript
【发布时间】：2015-06-23 09:32:10
【问题描述】：

我有一个 mvc 5 项目。在共享布局 cshtml 文件中，通常的 javascript 链接到 jquery 和 bootstrap。

我有一个单独的视图，我在其中添加了这段代码：

<div class="test">
    @Html.CheckBoxFor(m => m.MyBool, new { @checked = "checked", onClick="toggleVisibility(this)" })
    @Html.LabelFor(m => m.MyBool)

</div>

<div id="content">
    my content
    @Html.TextBoxFor(m => m.MyText, new { id = "TextBoxA", style = "width:20px;" })
    <br />
    <p>
        Lorum ipsum
    </p>
    <p>
        Lorem Ispum
    </p>
</div>

单击复选框时，我想在页面上显示或隐藏一些内容。用于此的 javascript 代码是：

function toggleVisibility(cb) {
        var x = document.getElementById("content");
        if (cb.checked == true)
            //x.style.visibility = "visible"; // or x.style.display = "none";
            $("#content").show("fast");
        else
           // x.style.visibility = "hidden"; //or x.style.display = "block";
        $("#content").hide("fast");
    }

我遇到的问题是，如果我将此 javascript 放在脚本标签中的共享文件中，我无法在我的视图中使用该函数，但如果我在视图本身中使用它，我需要手动添加脚本也链接到那里的 jquery 包。像这样：

@Scripts.Render("~/bundles/jquery")
<script type="text/javascript" language="javascript">
    function toggleVisibility(cb) {
        var x = document.getElementById("content");
        if (cb.checked == true)
            //x.style.visibility = "visible"; // or x.style.display = "none";
            $("#content").show("fast");
        else
           // x.style.visibility = "hidden"; //or x.style.display = "block";
        $("#content").hide("fast");
    }
</script>

我想知道这是否正常，如果不是，是否有解决方案。

【问题讨论】：

如果您包含指向 toggleVisibility 函数的链接，指向您的 javascript 文件/包的链接是否正常工作？乍一看，我看不出它为什么不起作用。
是的，它在那里工作，但恐怕一旦发布到 IIS，路径就会出错。我也不明白为什么它不起作用，因为共享文件中的所有 Jquery/bootstrap css 和 javascript 都可以工作。我只是无法从另一个视图中访问它。
如果包含您的 toggleVisibility 函数的 javascript 文件正确包含（因此页面定义了 toggleVisibility 函数），那么它应该可以在任何地方工作，即使在另一个视图中也是如此。控制台会记录什么吗？
不，我只是收到没有为该页面定义的错误。
如果您查看生成的 HTML（右键单击并查看源代码），您会看到一个包含此函数的 javascript 文件的有效链接？

标签： javascript jquery asp.net-mvc-5

【解决方案1】：

您可以在此处使用section

1.在视图中创建一个部分。

 @section scripts{
 <script type="text/javascript" language="javascript">
function toggleVisibility(cb) {
    var x = document.getElementById("content");
    if (cb.checked == true)
        //x.style.visibility = "visible"; // or x.style.display = "none";
        $("#content").show("fast");
    else
       // x.style.visibility = "hidden"; //or x.style.display = "block";
    $("#content").hide("fast");
}
 </script>
}

在 bundle 调用之后在你的 _layout.cshtml 中渲染部分。

@RenderSection("scripts")

【讨论】：