javascript - 如何将 Java 脚本移动到自定义文件，然后从 MVC 应用程序调用它？

Question

我需要将脚本(打开模式窗口)从 View 内部移动到自定义脚本文件中，但我需要一些帮助。

这是索引 View 的一部分:

<div class="">
    <button id="showModal">Click Me</button>
</div>

div id="theModal" class="modal fade">
    <div class="modal-dialog">
       // Code
       ...
    </div>
</div>

@section Scripts {
    <script>
        $(function () {
            var showModal = function () {
                $("#theModal").modal("show");
            };
            $("#showModal").click(showModal);
        });
    </script>
}

我知道我需要在按钮 OnClick 事件中连接该函数并添加对脚本文件的引用，但问题是:将脚本编写为文件中的函数的正确方法是什么，传递参数以及如何从单击按钮正确调用它？

Answer 1

您标记了 MVC 4，所以我假设您将使用 bundler 。

首先确保您创建的脚本文件位于 bundle 中，查找 BundleConfig.cs 并为您的新文件添加一个包:

bundles.Add(new ScriptBundle("~/bundles/myBundle").Include(
  "~/Scripts/sample.js"));

那么在你看来:

@Scripts.Render(
    "~/bundles/myBundle")

这是请求的具体示例:

假设一个名为 sample.js 的文件包含以下内容:

showAlert = function(){
     alert('hey an alert!);
};

您认为:

<script>
$(function () {
    $('#showModal').on('click', function () {
        showAlert();
    });
});
</script>

这会将 showAlert 添加为单击 showModal anchor 的事件处理程序。